Yellow scale
An 11-step ramp from base #EAB308, shaped in OKLCH for even perceptual movement.
- Base
- #eab308
- Steps
- 11
- Space
- OKLCH
Yellow from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#fff4dd
100
#f9e6bd
200
#ebcd8d
300
#dab254
400
#c69600
500
#b17c00
600
#956100
700
#794b00
800
#5d3700
900
#432800
950
#291600
Create the Yellow 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([
'#fff4dd',
'#f9e6bd',
'#ebcd8d',
'#dab254',
'#c69600',
'#b17c00',
'#956100',
'#794b00',
'#5d3700',
'#432800',
'#291600',
]);Use a specific Yellow 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 Yellow as CSS variables
Drop these tokens into :root, then reference any step as var(--yellow-500).
css
:root {
--yellow-50: #fff4dd;
--yellow-100: #f9e6bd;
--yellow-200: #ebcd8d;
--yellow-300: #dab254;
--yellow-400: #c69600;
--yellow-500: #b17c00;
--yellow-600: #956100;
--yellow-700: #794b00;
--yellow-800: #5d3700;
--yellow-900: #432800;
--yellow-950: #291600;
}