In HSL, “50% light” yellow looks blinding while “50% light” blue looks heavy — same number, different perceived weight. OKLCH was built so a lightness value means the same thing across the wheel. All three swatches below sit at L = 0.7, C = 0.14 in different hues. They feel equally bright.

Three inputs run everything: a hue, a peak chroma, and a hero lightness. Light and dark anchors stay constant across every scale so families align, while accent and soft pull toward your hero to give each family its character. Chroma follows a bell curve peaking at the hero — and optional hue drift lets warm or cool tones creep in at the ends without breaking the math above.

Step 600 lands at your hero lightness. Step 100 is white, step 1100 is black. Everything in between is derived.

Soft + accent split [hero → tint] into equal thirds so steps 300 / 400 / 500 / 600 all get the same L gap, regardless of where the hero sits on the axis.

Dark decay uses positions {0.25, 0.48, 0.68, 0.85}instead of equal 1/5 steps. Gaps shrink as L decreases — Weber-aware, so each dark step stays perceivably distinct rather than mathematically equidistant. At default darkCap = 0 this evaluates to heroL × {0.75, 0.52, 0.32, 0.15}.

Hue per step = hue + lightShift + (darkShift − lightShift) × (i / 10). With both shifts at 0 (default), every step sits at the base hue. Non-zero shifts drift the hue at the extremes — subtle ones read as “warm in the shadows” or “cool in the highlights” depending on direction.

Saturation per step as a ratio of your peak. The bell curve below keeps the lightest and darkest tones from feeling muddy.

Final chroma = peakC × ratio. Designers tweak peakC with the Saturation slider.

Sits at step 0, outside the 100–1100 ramp. Computed independently: binary-search for the maximum reachable chroma at L ≥ 0.70 for the given hue, with per-hue targets for the hues that naturally hold more saturation.

Floor: L ≥ 0.70. If the target chroma isn't reachable at L = 0.70, the algorithm climbs slightly to maximize C × L instead.