Green scale
An 11-step ramp from base #22C55E, shaped in OKLCH for even perceptual movement.
- Base
- #22c55e
- Steps
- 11
- Space
- OKLCH
Green from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e4fde8
100
#c9f5d0
200
#9fe5ac
300
#6dd184
400
#36bb60
500
#00a43e
600
#00871f
700
#006d0a
800
#005302
900
#003c04
950
#002401
Create the Green 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([
'#e4fde8',
'#c9f5d0',
'#9fe5ac',
'#6dd184',
'#36bb60',
'#00a43e',
'#00871f',
'#006d0a',
'#005302',
'#003c04',
'#002401',
]);Use a specific Green 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 Green as CSS variables
Drop these tokens into :root, then reference any step as var(--green-500).
css
:root {
--green-50: #e4fde8;
--green-100: #c9f5d0;
--green-200: #9fe5ac;
--green-300: #6dd184;
--green-400: #36bb60;
--green-500: #00a43e;
--green-600: #00871f;
--green-700: #006d0a;
--green-800: #005302;
--green-900: #003c04;
--green-950: #002401;
}