Lime scale
An 11-step ramp from base #84CC16, shaped in OKLCH for even perceptual movement.
- Base
- #84cc16
- Steps
- 11
- Space
- OKLCH
Lime from 50 to 950
Chroma tapers toward both ends so pale and dark stops remain visibly on-hue instead of clipping.
50
#ecfbdf
100
#d7f2c1
200
#b7e092
300
#95cb5c
400
#75b418
500
#579c00
600
#3d8000
700
#2b6700
800
#1d4e00
900
#153800
950
#092200
Create the Lime 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([
'#ecfbdf',
'#d7f2c1',
'#b7e092',
'#95cb5c',
'#75b418',
'#579c00',
'#3d8000',
'#2b6700',
'#1d4e00',
'#153800',
'#092200',
]);Use a specific Lime 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 Lime as CSS variables
Drop these tokens into :root, then reference any step as var(--lime-500).
css
:root {
--lime-50: #ecfbdf;
--lime-100: #d7f2c1;
--lime-200: #b7e092;
--lime-300: #95cb5c;
--lime-400: #75b418;
--lime-500: #579c00;
--lime-600: #3d8000;
--lime-700: #2b6700;
--lime-800: #1d4e00;
--lime-900: #153800;
--lime-950: #092200;
}