What are OKLCH colors?

oklch is a newer color model designed to be perceptually uniform — meaning the way colors look to our eyes matches the math behind them. Unlike older models like rgb or hsl, OKLCH produces predictable results when you adjust lightness, chroma, or hue.

Color models

Most developers are familiar with rgb and hsl. These models are based on how screens emit light, not on how we perceive color. That disconnect means two colors with the same "lightness" value in HSL can look very different to our eyes.

OKLCH solves this. It's built on the OKLab color space — a mathematically rigorous model that maps directly to human color perception. The "OK" stands for an improved version of the original Lab model.

Structure

An OKLCH color is defined by three values:

/* oklch(lightness chroma hue) */
color: oklch(0.7 0.15 280);

/* with alpha */
color: oklch(0.7 0.15 280 / 0.5);

Consistent brightness

The biggest advantage of OKLCH: colors with the same L value actually look equally bright. In HSL, a yellow and a blue at the same lightness look completely different.

Below, every circle has L = 0.7 and C = 0.15, with hue rotating from 0° to 330°. Notice how they all share the same perceived brightness:

Now compare with HSL — same "lightness" value of 50%, but wildly different perceived brightness:

Interactive

Adjust the sliders to explore the OKLCH color space:

Gradients

CSS gradients can interpolate in different color spaces. OKLCH gradients avoid the muddy middle tones that plague sRGB. Compare:

The sRGB gradient goes through a dull gray area. OKLCH maintains vibrant, perceptually smooth transitions — the way our eyes expect color to blend.

/* Specify the color space in CSS gradients */
background: linear-gradient(in srgb, #ff00ff, #00ff00);
background: linear-gradient(in oklch, #ff00ff, #00ff00);

Browser support

OKLCH is supported in all modern browsers — Chrome 111+, Firefox 113+, Safari 15.4+. For older browsers, provide an RGB or HSL fallback:

/* Fallback for older browsers */
color: #7b61ff;
color: oklch(0.6 0.24 290);

The browser ignores the second declaration if it doesn't understand oklch, falling back to the hex value.

More

OKLCH is already used in this site's own design tokens. For a deeper dive and interactive tools, check oklch.com or the MDN docs.