What is the Oklab color space?

Oklab is a perceptually uniform color space published by Björn Ottosson in 2020. Equal numeric steps look like equal visual steps, which makes it ideal for gradients, color mixing, and lightness adjustments. It is supported natively in CSS via the oklab() and oklch() functions.

How is sRGB converted to Oklab?

First each channel is linearized from gamma-encoded sRGB. The linear RGB is multiplied by a matrix into an LMS-like cone response, each component is passed through a cube root, then a second matrix produces the final L, a, and b values.

What is the difference between oklab() and oklch()?

They describe the same space. oklab() uses Cartesian a and b axes, while oklch() uses polar chroma and hue. oklch() is usually easier to author by hand because changing hue or saturation maps to a single intuitive number.

What range do the L, a, and b values use?

L runs from 0 (black) to 1 (white). The a and b axes are unbounded in theory but for in-gamut sRGB colors they typically stay within roughly minus 0.4 to plus 0.4. CSS expresses L as a percentage from 0% to 100%.

Why use Oklab instead of HSL for gradients?

HSL gradients often pass through muddy or overly dark midpoints because HSL lightness is not perceptual. Oklab keeps perceived lightness consistent across the blend, so a gradient from blue to yellow stays vivid instead of dipping to grey.

RGB to Oklab Color Converter

Convert sRGB colors to Oklab

Oklab is a perceptually uniform color space designed for image processing and modern CSS. Unlike RGB or HSL, a fixed step in Oklab corresponds to a roughly equal change in how a color looks, which makes it the right tool for smooth gradients, accessible lightness tweaks, and predictable color interpolation. This converter takes any sRGB or hex color and returns its Oklab coordinates plus copy-ready CSS.

How it works

The conversion runs in three stages. First each sRGB channel is linearized: values at or below 0.04045 are divided by 12.92, and the rest follow ((c + 0.055) / 1.055) ^ 2.4. The resulting linear RGB is multiplied by a 3x3 matrix into a cone-response space (an LMS approximation), and each of those three values is passed through a cube root. A second 3x3 matrix then maps the cube-rooted values into the final L, a, and b coordinates. The polar oklch() form is derived with C = sqrt(a^2 + b^2) and H = atan2(b, a).

Example and tips

The sRGB blue #3b82f6 converts to roughly oklab(61.9% -0.026 -0.171). Because the a and b axes are unbounded, in-gamut sRGB colors usually keep them between about -0.4 and 0.4. When authoring gradients, interpolate in Oklab or oklch rather than sRGB to avoid the dark, desaturated midpoints that plague HSL blends. For hand-editing, oklch is friendlier: nudge the hue number to rotate around the color wheel without touching lightness.