Blue scale
An 11-step ramp from base #3B82F6, shaped in OKLCH for even perceptual movement.
- Base
- #3b82f6
- Steps
- 11
- Space
- OKLCH
Blue from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e7f6ff
100
#cfeaff
200
#a9d2ff
300
#81b7ff
400
#5c9cff
500
#3a81f5
600
#1d64d6
700
#094db3
800
#02398b
900
#042965
950
#011741
Create the Blue 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([
'#e7f6ff',
'#cfeaff',
'#a9d2ff',
'#81b7ff',
'#5c9cff',
'#3a81f5',
'#1d64d6',
'#094db3',
'#02398b',
'#042965',
'#011741',
]);Use a specific Blue 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 Blue as CSS variables
Drop these tokens into :root, then reference any step as var(--blue-500).
css
:root {
--blue-50: #e7f6ff;
--blue-100: #cfeaff;
--blue-200: #a9d2ff;
--blue-300: #81b7ff;
--blue-400: #5c9cff;
--blue-500: #3a81f5;
--blue-600: #1d64d6;
--blue-700: #094db3;
--blue-800: #02398b;
--blue-900: #042965;
--blue-950: #011741;
}