A parametric color system that turns three inputs — a hue angle, a peak chroma, and a hero lightness — into a full 11-step scale plus an off-scale neon. Built in OKLCH so perceptual lightness stays consistent across every hue, and brand hex values can pin into any step without breaking the ramp.
OKLCH Pure Rulebook v3d
Three inputs generate any hue from white to black.
Scale calculator
interactivecustomH200 · C0.160 · L0.700hero: #00BAC5
100
200
300
400
500
600
700
800
900
1000
1100
58FFFFL0.92
FFFFFFL1.00
DFF5F6L0.95
C3F2F4L0.93
97F3F7L0.91
5DF1F9L0.88
00BAC5L0.72
00888FL0.57
005A60L0.43
003236L0.29
000E10L0.15
000000L0.00
3Inputs per family
12Steps per scale (+ neon)
7 + 3Core + demo families
Color scales
Legend:pinned= brand hex lock
redH28 · C0.2 · L0.6
neutralH68→17 · C0.016 · L0.764
cautionH95 · C0.17 · L0.856
verdeH125 · C0.2 · L0.819
greenH156 · C0.17 · L0.729
blueH239 · C0.15 · L0.709
plumH350 · C0.2 · L0.714
Demo families — generated from formula alone, no pins
orangeH55 · C0.17 · L0.72
tealH180 · C0.14 · L0.7
purpleH300 · C0.17 · L0.65
Lightness (L)
| Step | Name | Formula |
|---|---|---|
| 100 | white | 1.000 |
| 200 | wash | 0.955 |
| 300 | tint | 0.930 |
| 400 | mid | (tint + accent) / 2 |
| 500 | accent | heroL + blend × (tint − heroL) |
| 600 | hero | heroL (input) |
| 700 | heroL × 0.80 | |
| 800 | heroL × 0.60 | |
| 900 | heroL × 0.40 | |
| 1000 | heroL × 0.20 | |
| 1100 | black | 0.000 |
Accent blend = 0.50 when heroL > 0.82, else 0.80. Pins override computed L; gaps interpolate linearly.
Chroma (C)
| Step | Ratio | Intent |
|---|---|---|
| 100 | 0 | pure white |
| 200 | 0.15 | soft wash |
| 300 | 0.30 | tint |
| 400 | 0.55 | mid saturation |
| 500 | 0.78 | strong accent |
| 600 | 1.00 | full hero |
| 700 | 0.72 | strong shade |
| 800 | 0.54 | mid shade |
| 900 | 0.42 | deep shade |
| 1000 | 0.28 | near-dark |
| 1100 | 0 | pure black |
C = maxC × ratio. Bell curve peaks at the hero (step 600).
Brand pins
| Hex | Family | Step | Role |
|---|---|---|---|
| #F8F6F4 | neutral | 200 | Warm background |
| #615959 | neutral | 800 | Warm rosy dark gray |
| #C6EA84 | verde | 500 | Brand verde accent |
| #1EC677 | green | 600 | Primary brand green |
| #009C52 | green | 700 | Secondary brand green |
| #0D4029 | green | 900 | Dark brand green |
| #052016 | green | 1000 | Deepest brand green |
| #401B22 | plum | 900 | Dark brand plum |
How to explain it
- Every scale is built from three inputs: a hue angle, a peak saturation, and a hero lightness.
- The hero (step 600) is the main color — everything else derives from it.
- Light steps (wash, tint) are pinned to fixed lightness so they align across all families.
- Mid steps adapt: for bright hues the accent sits near the hero, for cool hues it stretches toward tint.
- Dark steps are hero lightness × 0.8, 0.6, 0.4, 0.2 — linear decay to black.
- Saturation follows a bell curve peaking at the hero, tapering to zero at white and black.
- Neons sit off-scale at step 0 — base C 0.138 for naturally vivid hues, boosted C for red, blue, plum, orange.
- Neutrals drift from a warm sandy hue in the lights to warm rosy in the darks.
- Brand hex values snap into any step; surrounding steps interpolate smoothly around them.
- It works because OKLCH is perceptually uniform — L 0.7 looks equally light at any hue.
Design System·2026