Advanced Color Spaces

HSL is easy to understand, but mathematically flawed when it comes to human vision. In HSL, pure blue `hsl(240, 100%, 50%)` and pure yellow `hsl(60, 100%, 50%)` both have 50% lightness. But to your eye, the yellow is incredibly bright and the blue is very dark.

This means you can't programmatically swap hues in HSL and guarantee the text on top will remain readable. HSL lightness does not equal perceived luminance.

OKLCH (Lightness, Chroma, Hue) is a modern color space designed to be perceptually uniform. If you lock the Lightness channel in OKLCH and sweep through the hues, every single color will appear exactly as bright to the human eye as the last.

This makes OKLCH the holy grail for design systems. You can programmatically generate a button's background and text colors, swap the theme from red to blue, and guarantee the contrast ratio will remain identical.