OKLab

The three axes

L — Lightness

Ranges from 0 (black) to 1 (white). Because OKLab is perceptually uniform, equal steps in L produce equal perceived changes in brightness, regardless of hue.

a — Green–red axis

Negative values lean green, positive values lean red. Ranges roughly from −0.4 to +0.4 in sRGB. The a axis is orthogonal to b — moving along a does not change the perceived hue on the b axis.

b — Blue–yellow axis

Negative values lean blue, positive values lean yellow. Ranges roughly from −0.4 to +0.4 in sRGB. Together with a, it forms the plane of chromatic variation at a given lightness.

OKLab vs OKLCH

OKLab and OKLCH are related by a polar-to-Cartesian transformation. The conversion is:

From OKLab to OKLCH:
  C = √(a² + b²)
  H = atan2(b, a) × 180 / π

From OKLCH to OKLab:
  a = C × cos(H × π / 180)
  b = C × sin(H × π / 180)

The color is identical — only the coordinate system changes. OKLab is preferred when interpolating (gradients, animations) because the Cartesian axes avoid the hue-rotation issues that polar spaces can produce. OKLCH is preferred when reasoning about colors manually because "hue + chroma + lightness" maps to how designers think.

Why OKLab was created

CIE Lab (1976) is the classic perceptually uniform color space, still widely used in color science. But it has two practical problems:

• Complex formulas. CIE Lab involves a cube-root function, several matrix multiplications and a piecewise linear fit for low luminances.
• Blue-region distortion. The perceptual uniformity of CIE Lab breaks down in the blue-purple region, producing hues that appear too similar or too saturated when generated algorithmically.

OKLab addresses both. It is mathematically simpler (two matrix transformations plus a cube root) and handles the blue region much more evenly. This makes it ideal for real-time applications, color pickers, and design systems.

Practical examples

Interpolating two colors

To mix two colors smoothly, convert them to OKLab, linearly interpolate L, a and b, then convert back to sRGB. This produces smoother gradients than interpolating in sRGB or HSL.

Distance between colors

The Euclidean distance between two OKLab colors correlates well with perceived difference. This makes it useful for palette matching, image quantization and finding the closest color in a set.

Adjusting lightness without changing hue

Change only the L axis. The a and b axes stay the same, so the hue and saturation do not shift — a common problem when adjusting lightness in other spaces.

Practical syntax in CSS

/* OKLab syntax */
color: oklab(0.53 -0.10 -0.23);

/* With alpha */
color: oklab(0.53 -0.10 -0.23 / 0.5);

/* Adjusting lightness without changing hue */
color: oklab(0.3 -0.10 -0.23);
color: oklab(0.7 -0.10 -0.23);

When to use OKLab

• Gradient interpolation — smoother transitions than sRGB or HSL.
• Color distance — for finding the nearest color in a set.
• Color mixing — perceptually even mixing between any two colors.
• Image processing — where perceptual uniformity matters for quantization or matching.

Continue reading

Frequently asked questions