Slate scale
An 11-step ramp from base #64748B, shaped in OKLCH for even perceptual movement.
- Base
- #64748b
- Steps
- 11
- Space
- OKLCH
Slate from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#f2f5fb
100
#e2e8f2
200
#c8d2e0
300
#abb8cb
400
#90a0b6
500
#77879f
600
#5d6d84
700
#48566a
800
#354051
900
#262e3a
950
#151b23
Create the Slate 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([
'#f2f5fb',
'#e2e8f2',
'#c8d2e0',
'#abb8cb',
'#90a0b6',
'#77879f',
'#5d6d84',
'#48566a',
'#354051',
'#262e3a',
'#151b23',
]);Use a specific Slate 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 Slate as CSS variables
Drop these tokens into :root, then reference any step as var(--slate-500).
css
:root {
--slate-50: #f2f5fb;
--slate-100: #e2e8f2;
--slate-200: #c8d2e0;
--slate-300: #abb8cb;
--slate-400: #90a0b6;
--slate-500: #77879f;
--slate-600: #5d6d84;
--slate-700: #48566a;
--slate-800: #354051;
--slate-900: #262e3a;
--slate-950: #151b23;
}