How to use OKLCH in CSS

OKLCH is the most useful colour format CSS has added in years. If you have ever fought with HSL — where bumping the lightness of a blue and a yellow gives wildly different results — OKLCH is the fix. Here is what it is and how to use it today.

What OKLCH actually is

OKLCH stands for OKLightness, Chroma, Hue. It is built on the OKLab colour space, which was designed around how human eyes actually perceive colour. The three values are simple: lightness from 0 (black) to 1 (white), chroma (roughly "how vivid") starting at 0 for grey, and hue as an angle from 0 to 360 degrees.

/* lightness  chroma  hue */
color: oklch(0.65 0.21 33);   /* a vivid red-orange */
color: oklch(0.7 0.16 165);   /* a green */
color: oklch(0.71 0.16 249);  /* a blue */

Why it beats HSL

HSL has a hidden flaw: its "lightness" is not perceptually even. An hsl(60, 100%, 50%) yellow looks far brighter than an hsl(240, 100%, 50%) blue, even though both claim 50% lightness. This makes building consistent palettes frustrating — a set of colours at the "same" lightness will not look balanced.

OKLCH fixes this. Because its lightness is perceptual, two colours with the same L value genuinely look equally light. That single property is why design systems are moving to it: you can generate a whole palette by holding lightness steady and rotating the hue, and it actually looks coherent.

The syntax in detail

Lightness

A number from 0 to 1, or a percentage (0%–100%). oklch(0.5 0.1 250) and oklch(50% 0.1 250) are the same.

Chroma

Starts at 0 (grey) and is effectively open-ended, though most real colours sit between 0 and about 0.37. Push it too high for a given hue and the colour simply clamps to the most vivid your screen can show.

Hue

An angle in degrees, like a colour wheel. Red is around 30, green near 145, blue near 260.

Alpha

Add transparency with a slash: oklch(0.65 0.21 33 / 0.5) is 50% opaque.

Browser support

OKLCH is supported in all current major browsers — Chrome, Edge, Safari and Firefox. For older browsers you can provide a HEX fallback by simply listing it first; the browser uses the last value it understands:

.button {
  background: #f54927;            /* fallback */
  background: oklch(0.65 0.21 33); /* modern */
}

Converting your existing colours

You do not have to rewrite everything by hand. Paste any HEX, RGB or HSL value into the colour converter and it gives you the OKLCH equivalent instantly — or use the colour picker, which shows OKLCH live as you choose a colour.

When to reach for it

Use OKLCH when you are building a design system, generating colour scales programmatically, or any time perceptual consistency matters. For a quick one-off colour, HEX is still perfectly fine. The point of OKLCH is not to replace HEX everywhere — it is to make the relationships between colours predictable.