OKLCH

Definition

OKLCH is a modern color model that lets you work with color based on the brightness your eyes actually perceive. The three letters in its name stand for the three values that make up a color: L is lightness (how bright it is), C is chroma (how vivid or saturated it is), and H is hue (the kind of color, like red or blue). Because it describes a color with three values, its structure feels a lot like the familiar HSL, so it is not hard to pick up. The crucial difference is that the lightness value L is perceptually uniform. That means if two colors share the same L, they look about equally bright to the human eye even when their hues are completely different. In modern browsers you can use it directly with the oklch() function.

Why does it matter?

HSL has one old, nagging problem: even when you set the lightness value identically, yellow looks far brighter than blue. So when you build a color scale in HSL, the numbers may be evenly spaced, but to the eye some colors jump out while others fade away, and the result is hard to predict. Because OKLCH lightness is perceptually uniform, fixing the L value gives you colors that really do look similarly bright even across different hues. That makes a huge difference for work where you need several colors to share a consistent brightness, like the various states of a button, a set of brightness steps, or a dark mode palette. You get far more predictable, orderly results. It is an especially reassuring tool for anyone who wants to handle color by rules rather than by gut feeling.

Common mistakes

• Treating OKLCH as if it were identical to HSL and copying values straight across. The two models use different ranges and different meanings, so dropping HSL numbers into oklch() produces a completely wrong color. Don't let the similar names lull you into it; treat it as a new color model and set your values from scratch.
• Pushing the chroma C too high. The maximum chroma a screen can display varies with hue and lightness, and when you exceed that limit the browser quietly clips the color, so what you get may differ from what you intended.
• Putting OKLCH off entirely just because it feels unfamiliar. Once you learn what the values mean, building color scales actually gets easier, so it's best to try it out on a small palette first and get comfortable.

Practical tips

• When building brightness steps or a dark mode palette, divide the L value at regular intervals. Since lightness is perceptually uniform, adjusting only L in steady increments gives you steps that really are similarly bright across hues, so you end up with a predictable palette.
• Because oklch() is modern CSS syntax, always keep a fallback for older browsers when you use it. Check support with @supports, or declare a traditional color value first, and the layout won't break in environments that don't support it.
• Pick one accent color and derive several state colors by nudging only L and C. If you hold the hue H fixed and adjust just lightness and chroma, you can easily build a coherent set of connected colors, like a button's default, hover, and pressed states.

Related concepts