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.
What perceptually uniform actually means
Most color spaces — RGB, HSL, HSV — are not perceptually uniform. If you shift the hue in HSL by a fixed 30 degrees, the visual change is large in some regions of the hue wheel (around blue) and barely perceptible in others (around yellow). If you step lightness in HSL by 10%, the perceived change is inconsistent.
Perceptual uniformity means that equal numerical steps correspond to equal visual steps. Oklab was
designed specifically for this property: a step of 0.01 in L looks like the same amount of
lightness change regardless of the starting color, and a step of 0.01 in the a or b axis
looks like the same amount of color shift. This makes Oklab the most accurate space for:
- Gradients that look visually smooth across their full range
- Lightness adjustments that do not distort hue perception
- Color distance calculations where you want the number to reflect what the eye sees
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).
oklab() vs oklch() in CSS
Both describe the same color space, just in different coordinate systems:
oklab() uses Cartesian coordinates: L (lightness from 0 to 1), a (green-to-red axis),
and b (blue-to-yellow axis). It is useful for programmatic color mixing and interpolation.
oklch() uses polar coordinates: L (lightness), C (chroma, distance from gray), and
H (hue angle in degrees). It is much easier to author by hand because each component maps to
an intuitive concept — you can increase chroma to make a color more vivid, or rotate hue to
shift the color around the wheel, without needing to understand what a and b mean.
Both are supported in modern browsers via the CSS Color Level 4 specification. For gradient
authoring, oklch() is the more readable choice; for computation, oklab() is easier to work
with mathematically.
When to use Oklab instead of HSL
HSL gradients often pass through dark, muddy midpoints. A gradient from blue to yellow in HSL will typically look gray or brown in the middle because HSL passes through desaturated hues on the way around the wheel. The same gradient interpolated in Oklab or oklch stays vivid all the way through, because the interpolation follows perceptual distance rather than numeric distance in a non-uniform space.
In CSS, you can request Oklab interpolation directly:
background: linear-gradient(in oklab, oklch(65% 0.18 240), oklch(85% 0.17 90));Worked example
The sRGB blue #3b82f6 converts to roughly oklab(61.9% -0.026 -0.171) and oklch(61.9% 0.173 261°). Because the a and b axes are unbounded, in-gamut sRGB colors usually keep them between about -0.4 and 0.4. For hand-editing, oklch is friendlier: nudge the hue number to rotate around the color wheel without touching lightness.