Cyan scale
An 11-step ramp from base #06B6D4, shaped in OKLCH for even perceptual movement.
- Base
- #06b6d4
- Steps
- 11
- Space
- OKLCH
Cyan from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e3faff
100
#c8f0fb
200
#9cddee
300
#69c7dd
400
#2eb0ca
500
#0098b5
600
#007c99
700
#00637d
800
#004b60
900
#003645
950
#00202b
Create the Cyan 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([
'#e3faff',
'#c8f0fb',
'#9cddee',
'#69c7dd',
'#2eb0ca',
'#0098b5',
'#007c99',
'#00637d',
'#004b60',
'#003645',
'#00202b',
]);Use a specific Cyan 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 Cyan as CSS variables
Drop these tokens into :root, then reference any step as var(--cyan-500).
css
:root {
--cyan-50: #e3faff;
--cyan-100: #c8f0fb;
--cyan-200: #9cddee;
--cyan-300: #69c7dd;
--cyan-400: #2eb0ca;
--cyan-500: #0098b5;
--cyan-600: #007c99;
--cyan-700: #00637d;
--cyan-800: #004b60;
--cyan-900: #003645;
--cyan-950: #00202b;
}