Indigo scale
An 11-step ramp from base #6366F1, shaped in OKLCH for even perceptual movement.
- Base
- #6366f1
- Steps
- 11
- Space
- OKLCH
Indigo from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#eef3ff
100
#dbe4ff
200
#becaff
300
#a0acff
400
#848eff
500
#6c71fd
600
#5554de
700
#423eba
800
#312c91
900
#222169
950
#131144
Create the Indigo 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([
'#eef3ff',
'#dbe4ff',
'#becaff',
'#a0acff',
'#848eff',
'#6c71fd',
'#5554de',
'#423eba',
'#312c91',
'#222169',
'#131144',
]);Use a specific Indigo 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 Indigo as CSS variables
Drop these tokens into :root, then reference any step as var(--indigo-500).
css
:root {
--indigo-50: #eef3ff;
--indigo-100: #dbe4ff;
--indigo-200: #becaff;
--indigo-300: #a0acff;
--indigo-400: #848eff;
--indigo-500: #6c71fd;
--indigo-600: #5554de;
--indigo-700: #423eba;
--indigo-800: #312c91;
--indigo-900: #222169;
--indigo-950: #131144;
}