Violet scale
An 11-step ramp from base #8B5CF6, shaped in OKLCH for even perceptual movement.
- Base
- #8b5cf6
- Steps
- 11
- Space
- OKLCH
Violet from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#f5f0ff
100
#e9dfff
200
#d3c2ff
300
#bca1ff
400
#a581ff
500
#8f61fb
600
#7642dc
700
#5f2db8
800
#481e8f
900
#331768
950
#1e0a43
Create the Violet 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([
'#f5f0ff',
'#e9dfff',
'#d3c2ff',
'#bca1ff',
'#a581ff',
'#8f61fb',
'#7642dc',
'#5f2db8',
'#481e8f',
'#331768',
'#1e0a43',
]);Use a specific Violet 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 Violet as CSS variables
Drop these tokens into :root, then reference any step as var(--violet-500).
css
:root {
--violet-50: #f5f0ff;
--violet-100: #e9dfff;
--violet-200: #d3c2ff;
--violet-300: #bca1ff;
--violet-400: #a581ff;
--violet-500: #8f61fb;
--violet-600: #7642dc;
--violet-700: #5f2db8;
--violet-800: #481e8f;
--violet-900: #331768;
--violet-950: #1e0a43;
}