Amber scale
An 11-step ramp from base #F59E0B, shaped in OKLCH for even perceptual movement.
- Base
- #f59e0b
- Steps
- 11
- Space
- OKLCH
Amber from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#fff2de
100
#ffe2bf
200
#f8c78f
300
#eaa958
400
#d88b10
500
#c36f00
600
#a55400
700
#883f00
800
#682d00
900
#4b2100
950
#2f1100
Create the Amber 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([
'#fff2de',
'#ffe2bf',
'#f8c78f',
'#eaa958',
'#d88b10',
'#c36f00',
'#a55400',
'#883f00',
'#682d00',
'#4b2100',
'#2f1100',
]);Use a specific Amber 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 Amber as CSS variables
Drop these tokens into :root, then reference any step as var(--amber-500).
css
:root {
--amber-50: #fff2de;
--amber-100: #ffe2bf;
--amber-200: #f8c78f;
--amber-300: #eaa958;
--amber-400: #d88b10;
--amber-500: #c36f00;
--amber-600: #a55400;
--amber-700: #883f00;
--amber-800: #682d00;
--amber-900: #4b2100;
--amber-950: #2f1100;
}