Emerald scale
An 11-step ramp from base #10B981, shaped in OKLCH for even perceptual movement.
- Base
- #10b981
- Steps
- 11
- Space
- OKLCH
Emerald from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e4fcef
100
#caf3de
200
#9fe2c1
300
#6ecea2
400
#38b885
500
#00a16b
600
#008551
700
#006b3d
800
#00512c
900
#003b20
950
#002311
Create the Emerald 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([
'#e4fcef',
'#caf3de',
'#9fe2c1',
'#6ecea2',
'#38b885',
'#00a16b',
'#008551',
'#006b3d',
'#00512c',
'#003b20',
'#002311',
]);Use a specific Emerald 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 Emerald as CSS variables
Drop these tokens into :root, then reference any step as var(--emerald-500).
css
:root {
--emerald-50: #e4fcef;
--emerald-100: #caf3de;
--emerald-200: #9fe2c1;
--emerald-300: #6ecea2;
--emerald-400: #38b885;
--emerald-500: #00a16b;
--emerald-600: #008551;
--emerald-700: #006b3d;
--emerald-800: #00512c;
--emerald-900: #003b20;
--emerald-950: #002311;
}