Sky scale
An 11-step ramp from base #0EA5E9, shaped in OKLCH for even perceptual movement.
- Base
- #0ea5e9
- Steps
- 11
- Space
- OKLCH
Sky from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e3f9ff
100
#c8eeff
200
#9edaff
300
#6dc2f6
400
#39a9e6
500
#0091d3
600
#0075b6
700
#005d96
800
#004574
900
#003254
950
#001e35
Create the Sky 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([
'#e3f9ff',
'#c8eeff',
'#9edaff',
'#6dc2f6',
'#39a9e6',
'#0091d3',
'#0075b6',
'#005d96',
'#004574',
'#003254',
'#001e35',
]);Use a specific Sky 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 Sky as CSS variables
Drop these tokens into :root, then reference any step as var(--sky-500).
css
:root {
--sky-50: #e3f9ff;
--sky-100: #c8eeff;
--sky-200: #9edaff;
--sky-300: #6dc2f6;
--sky-400: #39a9e6;
--sky-500: #0091d3;
--sky-600: #0075b6;
--sky-700: #005d96;
--sky-800: #004574;
--sky-900: #003254;
--sky-950: #001e35;
}