Teal scale
An 11-step ramp from base #14B8A6, shaped in OKLCH for even perceptual movement.
- Base
- #14b8a6
- Steps
- 11
- Space
- OKLCH
Teal from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#e4fbf6
100
#c9f2ea
200
#9fe0d5
300
#6dcbbc
400
#36b5a4
500
#009d8c
600
#008272
700
#00685b
800
#004f44
900
#003931
950
#00221d
Create the Teal 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([
'#e4fbf6',
'#c9f2ea',
'#9fe0d5',
'#6dcbbc',
'#36b5a4',
'#009d8c',
'#008272',
'#00685b',
'#004f44',
'#003931',
'#00221d',
]);Use a specific Teal 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 Teal as CSS variables
Drop these tokens into :root, then reference any step as var(--teal-500).
css
:root {
--teal-50: #e4fbf6;
--teal-100: #c9f2ea;
--teal-200: #9fe0d5;
--teal-300: #6dcbbc;
--teal-400: #36b5a4;
--teal-500: #009d8c;
--teal-600: #008272;
--teal-700: #00685b;
--teal-800: #004f44;
--teal-900: #003931;
--teal-950: #00221d;
}