Blog · Color Science

OKLab Color Space

Complete guide to OKLab and OKLCH — the modern CSS color spaces designed for perceptually uniform design work.

Published November 15, 2026 · 7 min read

What Is OKLab?

OKLab is a perceptually uniform color space introduced by Björn Ottosson in 2020. It was designed to solve specific problems with CIELAB — particularly the "blue-purple problem" where CIELAB produces uneven perceptual steps in the blue region of color space — while remaining computationally simpler.

Since 2020, OKLab has been adopted by major design tools (Figma, Tailwind CSS, P3 color profiles) and is now directly supported in CSS as the oklab() and oklch() color functions.

The Structure of OKLab

OKLab has three dimensions:

L (Lightness): from 0 (black) to 1 (white)
a (Green-Red axis): negative values are greener, positive are redder
b (Blue-Yellow axis): negative values are bluer, positive are yellower

This structure is the same as CIELAB, but the underlying transformation from sRGB to OKLab produces more even perceptual steps.

The Structure of OKLCH

OKLCH is the cylindrical (hue-based) form of OKLab. It represents color in three dimensions:

L (Lightness): from 0 (black) to 1 (white)
C (Chroma): saturation-like, from 0 (gray) to about 0.4 (vivid)
H (Hue): angle from 0° to 360°

OKLCH is more intuitive for design work than OKLab. When a designer says "make it lighter," that maps directly to L. When they say "make it more vivid," that maps to C. When they say "shift the color," that maps to H.

CSS Support

Modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+) support OKLab and OKLCH directly:

/* OKLab notation */
color: oklab(0.6 0.15 0.1);

/* OKLCH notation (more intuitive) */
color: oklch(60% 0.15 240);

/* With alpha */
color: oklch(60% 0.15 240 / 0.5);

The oklch(60% 0.15 240) above corresponds roughly to a mid-blue similar to OmniColor's primary #155EEF.

Why OKLab Solves Gradient Problems

The most visible benefit of OKLab is smoother gradient interpolation. A gradient from blue to yellow in RGB produces a muddy gray midpoint:

/* RGB interpolation: muddy gray midpoint */
background: linear-gradient(#155EEF, #FFD60A);

/* OKLab interpolation: smooth, vivid transitions */
background: linear-gradient(in oklab, #155EEF, #FFD60A);

The OKLab version produces vibrant intermediate colors because equal numerical steps in OKLab correspond to equal perceived steps.

Why OKLCH Solves Palette Problems

Design systems typically use "50-900 scales" where each step is a consistent lightness increment. In HSL, this fails because HSL lightness is not perceptual — HSL hue 60° (yellow) looks far brighter than HSL hue 240° (blue) at the same L=50%.

In OKLCH, equal L steps produce equal perceived brightness — so a blue scale and a yellow scale of the same "500" value look equally bright, which is what designers expect.

This is why tools like Tailwind CSS and Radix Colors have moved to OKLCH for their newer color systems.

Converting Between OKLab and sRGB

The sRGB to OKLab conversion pipeline:

sRGB gamma decoding (linearization)
Apply a 3x3 matrix to get LMS cone response
Non-linear compression (cube root)
Apply another 3x3 matrix to get OKLab

The OKLab to sRGB conversion reverses this pipeline. Both directions are computationally simple — a few dozen arithmetic operations — and run in microseconds in any language.

Chroma in OKLCH

Chroma in OKLCH is measured differently from saturation in HSL. Chroma is an absolute measure of colorfulness, ranging from 0 (pure gray) to about 0.4 (maximum vividness for the sRGB gamut).

Because chroma has an absolute maximum per hue, OKLCH can express colors that fall outside the sRGB gamut (which is why CSS now supports color-gamut: p3 for wide-gamut displays).

Practical Examples

Brand color

--brand: oklch(60% 0.22 250); /* vivid blue */

Hover state (darker)

--brand-hover: oklch(50% 0.22 250); /* same hue and chroma, lower L */

Light background

--bg: oklch(97% 0.02 250); /* very light tint */

Text color

--text: oklch(20% 0.01 250); /* near-black, subtle hue */

OKLab vs CIELAB

Feature	CIELAB	OKLab
Year introduced	1976	2020
Uniformity in blues	Poor	Good
CSS support	No	Yes (oklab, oklch)
Computation	Complex (XYZ step)	Simpler (direct)
Delta E standard	Yes	Newer metric

Browser Support

As of November 2026:

Chrome: supported since Chrome 111 (March 2023)
Firefox: supported since Firefox 113 (May 2023)
Safari: supported since Safari 15.4 (March 2022)
Edge: supported since Edge 111

For older browsers, provide RGB or HEX fallbacks — CSS cascade handles this automatically when you list multiple color values.