Today I Learned

TIL: OKLCH Color Space for Better Design Tokens

Discovered why OKLCH produces more perceptually uniform color palettes than HSL or RGB.

· 3 min read
color css design-tokens

The Problem with HSL

When I tried to create a gray scale using HSL, the steps between colors didn’t look uniform. Gray 50 looked too dark compared to gray 40.

/* HSL - not perceptually uniform */
--gray-40: hsl(0 0% 40%);
--gray-50: hsl(0 0% 50%);
--gray-60: hsl(0 0% 60%);

Enter OKLCH

OKLCH (OK Lightness, Chroma, Hue) is a perceptually uniform color space. This means equal numerical changes produce equal visual changes.

/* OKLCH - perceptually uniform */
--gray-40: oklch(0.40 0 0);
--gray-50: oklch(0.50 0 0);
--gray-60: oklch(0.60 0 0);

Why It Matters

When building design systems, perceptual uniformity means your color scales will look consistent and predictable. The steps between colors feel natural to the human eye.

Browser Support

OKLCH has excellent browser support in 2024:

  • Chrome 111+
  • Firefox 113+
  • Safari 15.4+

For older browsers, you can provide an RGB fallback:

.element {
  background: rgb(82, 102, 255); /* fallback */
  background: oklch(0.52 0.20 255);
}

Resources