Rose scale
An 11-step ramp from base #F43F5E, shaped in OKLCH for even perceptual movement.
- Base
- #f43f5e
- Steps
- 11
- Space
- OKLCH
Rose from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ffeaeb
100
#ffd4d6
200
#ffb1b6
300
#ff8893
400
#ff6073
500
#eb3557
600
#ca003d
700
#a7002c
800
#81001e
900
#5e0015
950
#3c000a
Create the Rose 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([
'#ffeaeb',
'#ffd4d6',
'#ffb1b6',
'#ff8893',
'#ff6073',
'#eb3557',
'#ca003d',
'#a7002c',
'#81001e',
'#5e0015',
'#3c000a',
]);Use a specific Rose 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 Rose as CSS variables
Drop these tokens into :root, then reference any step as var(--rose-500).
css
:root {
--rose-50: #ffeaeb;
--rose-100: #ffd4d6;
--rose-200: #ffb1b6;
--rose-300: #ff8893;
--rose-400: #ff6073;
--rose-500: #eb3557;
--rose-600: #ca003d;
--rose-700: #a7002c;
--rose-800: #81001e;
--rose-900: #5e0015;
--rose-950: #3c000a;
}