OKLCH explained: perceptual colour for designers

OKLCH is a way of writing colour as lightness, chroma and hue, where lightness is measured the way human eyes perceive it. In CSS, oklch(60% 0.2 293) is a violet that looks 60% of the way from black to white, with strong colour, at a hue angle of 293 degrees. The practical win for designers is simple: change the hue and keep L the same, and the new colour looks just as light. HSL cannot promise that, and it is the reason OKLCH has become the default in newer design systems, including Tailwind's colour palette.

Lightness, chroma and hue

Lightness is the star. It comes from OKLab, a colour space published in 2020 that was built to predict perceived lightness, colourfulness and hue more evenly than older models. Chroma replaces saturation: rather than a percentage of some maximum, it is an absolute amount of colour, so a chroma of 0.1 means the same visual intensity whatever the hue. Hue is still an angle, but the angles are spaced so that a 30 degree step looks like a similar change all the way round.

OKLCH vs HSL: the same lightness, side by side

Take six hues and hold lightness and chroma fixed at oklch(65% 0.11 H). The swatches below look like one family, and their contrast against white stays between 3.1:1 and 3.4:1. Do the same in HSL at 50% lightness and contrast against white swings from about 1.07:1 for yellow to 8.6:1 for blue.

That evenness is what makes OKLCH useful for real work. A set of status colours, chart series or category tags can share one L and C and differ only in hue, and none of them shouts louder than the others. If you then need a colour blind safe set, you vary L as well, which is covered in colour blind friendly palettes.

How to write OKLCH in CSS

:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}

Browser support is broad, and you can confirm the detail on caniuse. To explore values visually, oklch.com is a picker that shows which combinations a normal screen can display. To convert an existing brand hex, paste it into that picker or into your browser devtools colour panel, which can display any colour in OKLCH.

Building a scale with OKLCH

To make a tint and shade scale, step lightness evenly and let chroma rise towards the middle and fall towards the ends. Very light and very dark colours physically cannot hold much colour, so if you keep chroma high at the extremes the browser has to clip them. Here is a violet scale built that way.

Because L tracks perceived lightness, you can make rough contrast decisions from the numbers alone. In this scale, white text passes 4.5:1 from L 50 downwards, and black text passes from L 60 upwards. Always confirm with a contrast checker, but you will rarely be surprised. Turning a scale like this into named tokens is covered in design tokens.

Gamut: when a colour does not exist on screen

OKLCH can describe colours no screen can show. Most monitors display sRGB; many recent phones and laptops display the wider Display P3. Push chroma high enough and you leave both. When that happens the browser maps the colour back to the nearest one the display can show, so nothing breaks, but you may not get what you typed.

OKLCH gradients

Gradients are where perceptual colour pays off most visibly. A plain CSS gradient blends in sRGB, which dips into grey between distant hues. Modern CSS lets you choose the space to blend in, and OKLab or OKLCH keeps the middle bright and clean.

OKLab blends in a straight line and suits most two colour gradients. OKLCH rotates hue, which is lovely for sunsets and rainbows but can surprise you. The full technique, including the shorter hue and longer hue keywords, is in CSS gradients in OKLCH, and the theory behind it in gradient interpolation.

Gradiently's Marks are rendered live rather than written as CSS, and each carries its own palette: auto ink picks light or dark type from that palette for every line, so the words read without you checking numbers. If you would rather start from a finished living background than a value in a picker, browse the Market by colour words.