Orange scale
An 11-step ramp from base #F97316, shaped in OKLCH for even perceptual movement.
- Base
- #f97316
- Steps
- 11
- Space
- OKLCH
Orange from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ffeee0
100
#ffdcc3
200
#ffbd96
300
#ff9a64
400
#ef7831
500
#db5700
600
#bb3900
700
#9b2500
800
#781700
900
#571200
950
#370700
Create the Orange 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([
'#ffeee0',
'#ffdcc3',
'#ffbd96',
'#ff9a64',
'#ef7831',
'#db5700',
'#bb3900',
'#9b2500',
'#781700',
'#571200',
'#370700',
]);Use a specific Orange 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 Orange as CSS variables
Drop these tokens into :root, then reference any step as var(--orange-500).
css
:root {
--orange-50: #ffeee0;
--orange-100: #ffdcc3;
--orange-200: #ffbd96;
--orange-300: #ff9a64;
--orange-400: #ef7831;
--orange-500: #db5700;
--orange-600: #bb3900;
--orange-700: #9b2500;
--orange-800: #781700;
--orange-900: #571200;
--orange-950: #370700;
}