Red scale
An 11-step ramp from base #EF4444, shaped in OKLCH for even perceptual movement.
- Base
- #ef4444
- Steps
- 11
- Space
- OKLCH
Red from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ffebe7
100
#ffd6cf
200
#ffb3ab
300
#ff8c83
400
#fd655f
500
#e93e3f
600
#c81223
700
#a60011
800
#800007
900
#5d0007
950
#3b0002
Create the Red 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([
'#ffebe7',
'#ffd6cf',
'#ffb3ab',
'#ff8c83',
'#fd655f',
'#e93e3f',
'#c81223',
'#a60011',
'#800007',
'#5d0007',
'#3b0002',
]);Use a specific Red 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 Red as CSS variables
Drop these tokens into :root, then reference any step as var(--red-500).
css
:root {
--red-50: #ffebe7;
--red-100: #ffd6cf;
--red-200: #ffb3ab;
--red-300: #ff8c83;
--red-400: #fd655f;
--red-500: #e93e3f;
--red-600: #c81223;
--red-700: #a60011;
--red-800: #800007;
--red-900: #5d0007;
--red-950: #3b0002;
}