Fuchsia scale
An 11-step ramp from base #D946EF, shaped in OKLCH for even perceptual movement.
- Base
- #d946ef
- Steps
- 11
- Space
- OKLCH
Fuchsia from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ffeaff
100
#ffd4ff
200
#fdb1ff
300
#f088ff
400
#de5ff2
500
#c933df
600
#ab00c1
700
#8c00a0
800
#6c007c
900
#4e005a
950
#310039
Create the Fuchsia scale in PHP
Use the exact catalog values when the published token ramp must remain stable between releases.
<?php
use PhpColor\Color\Palette\ColorPalette;
$scale = ColorPalette::fromHex([
'#ffeaff',
'#ffd4ff',
'#fdb1ff',
'#f088ff',
'#de5ff2',
'#c933df',
'#ab00c1',
'#8c00a0',
'#6c007c',
'#4e005a',
'#310039',
]);Use a specific Fuchsia step
Scale palettes use zero-based positions; the published token name remains your application-level key.
<?php
use PhpColor\Color\Color;
use PhpColor\Color\Contrast\ColorContrast;
$color500 = $scale->get(5);
$contrast = ColorContrast::calculate($color500, Color::white());Format Fuchsia as CSS variables
Drop these tokens into :root, then reference any step as var(--fuchsia-500).
css
:root {
--fuchsia-50: #ffeaff;
--fuchsia-100: #ffd4ff;
--fuchsia-200: #fdb1ff;
--fuchsia-300: #f088ff;
--fuchsia-400: #de5ff2;
--fuchsia-500: #c933df;
--fuchsia-600: #ab00c1;
--fuchsia-700: #8c00a0;
--fuchsia-800: #6c007c;
--fuchsia-900: #4e005a;
--fuchsia-950: #310039;
}