Modern Color Spaces: OKLCH vs sRGB

For decades, digital design has been shackled to sRGB and HSL. While intuitive for code, these models are mathematically flawed regarding human perception.

The Flaw of HSL

In HSL (Hue, Saturation, Lightness), the "Lightness" value is purely mathematical. For example, a pure Blue (#0000FF) and a pure Yellow (#FFFF00) both have a "Lightness" of 50%, yet to the human eye, Yellow is significantly brighter.

This inconsistency makes HSL dangerous for accessible UI design. If you change a button's hue in HSL, its perceived contrast against text may change drastically.

Enter OKLCH

OKLCH (Lightness, Chroma, Hue) is a perceptually uniform color space. It is built on the OKLab model.

• L (Lightness): Matches exactly how bright a human perceives a color.
• C (Chroma): Measures the intensity or "purity" of the color.
• H (Hue): The angle of the color on the wheel.

In OKLCH, a Lightness of 70% always looks like a Lightness of 70%, regardless of the hue. This allows designers to build algorithmic color systems that are accessible by default.