OKLCH vs HSL: why perceptual color wins

HSL and RGB describe colors the way a screen builds them, not the way an eye sees them. That gap is why a palette that looks balanced on paper can look uneven on screen: the same numbers produce wildly different perceived brightness from one hue to the next.

OKLCH is built on a model of human perception. Lightness means the same thing across every hue, and changing one channel doesn’t quietly shift the others. That’s why this tool generates every scale in OKLCH — and the demos below show the difference directly.

HSL (hue, saturation, lightness) maps directly to how a screen mixes red, green, and blue light. It’s easy to read and write, but its “lightness” is a mathematical midpoint, not perceived brightness — so the same value looks very different from one hue to the next.

OKLCH (lightness, chroma, hue) is based on Oklab, a model of human vision. Its lightness tracks how bright a color actually looks, chroma controls intensity, and the hue stays put when you change the other two — exactly what you want when generating a scale.

Every swatch below is set to the same lightness value within its own space. In HSL, yellow blazes while blue sinks into the dark — “50% lightness” means something different for every hue. In OKLCH, the row reads as one even band of brightness.

Drag the hue. Both swatches stay at a fixed lightness — only the hue changes. Watch the HSL side lurch between bright and dark while OKLCH holds steady.

Take one blue and lighten it. In HSL, raising lightness drifts the color toward a washed periwinkle. In OKLCH, lightening keeps the hue and chroma intact — it stays blue all the way up.

Both gradients run between the same two colors. The HSL blend spikes through an over-bright cyan-green in the middle — the same uneven lightness from the first demo. The OKLCH blend keeps the brightness progression even from end to end.