Understanding OKLCH Color Space

OKLCH describes color using Lightness, Chroma, and Hue — but unlike HSL, its lightness value actually matches how bright a color looks to the human eye. That makes it far easier to build color scales that step evenly.

The HSL problem

In HSL, hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share the same lightness value, but yellow looks dramatically brighter. Any UI built on HSL lightness for contrast decisions inherits that inconsistency.

Try it live

Open the OKLCH Studio to generate a full accessible palette and export it as CSS custom properties.