Pink scale
An 11-step ramp from base #EC4899, shaped in OKLCH for even perceptual movement.
- Base
- #ec4899
- Steps
- 11
- Space
- OKLCH
Pink from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ffeaf7
100
#ffd4eb
200
#ffb1d6
300
#ff89be
400
#f462a6
500
#df3b8e
600
#bf0f73
700
#9e005c
800
#7a0045
900
#590032
950
#38001d
Create the Pink 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([
'#ffeaf7',
'#ffd4eb',
'#ffb1d6',
'#ff89be',
'#f462a6',
'#df3b8e',
'#bf0f73',
'#9e005c',
'#7a0045',
'#590032',
'#38001d',
]);Use a specific Pink 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 Pink as CSS variables
Drop these tokens into :root, then reference any step as var(--pink-500).
css
:root {
--pink-50: #ffeaf7;
--pink-100: #ffd4eb;
--pink-200: #ffb1d6;
--pink-300: #ff89be;
--pink-400: #f462a6;
--pink-500: #df3b8e;
--pink-600: #bf0f73;
--pink-700: #9e005c;
--pink-800: #7a0045;
--pink-900: #590032;
--pink-950: #38001d;
}