Hex to OKLab Converter
Convert a hex color into OKLab's lightness and a/b axes — the Cartesian, perceptually uniform space used for linear color blending.
How Hex to OKLab Conversion Works
Hex converts to OKLab by first decoding to linear-light RGB (undoing the sRGB gamma curve), then applying the Oklab matrix transform, which produces a lightness value plus two opponent-color axes: a (green-red) and b (blue-yellow). Unlike OKLCH's polar chroma and hue, OKLab's a/b coordinates are Cartesian, which makes it the preferred space for linear operations like blending or interpolating between two colors.
Hex to OKLab Example, Step by Step
#2563EB = oklab(54.6% -0.0267 -0.2135)
#2563EB (hex) = oklab(54.6% -0.0267 -0.2135)
#2563EB -> rgb(37, 99, 235) -> linear RGB Apply Oklab matrix transform: L = 0.546 a = -0.0267 b = -0.2135
| Step | Description | Result |
|---|---|---|
| Convert hex to linear RGB | undo sRGB gamma encoding | linear R, G, B |
| Apply the LMS cone-response matrix | map linear RGB to the LMS space | L, M, S values |
| Apply the Oklab matrix | map LMS to lightness and a/b axes | L=54.6%, a=-0.0267, b=-0.2135 |
A negative b value here means this color leans toward blue on the blue-yellow axis, matching the visibly blue hue of #2563EB.
Common Mistakes With Hex to OKLab
- Confusing OKLab's a/b axes with OKLCH's chroma/hue — they describe the same point in space but aren't interchangeable numbers.
- Assuming a and b are bounded to a fixed range — like chroma in OKLCH, they're open-ended and typically stay within roughly -0.4 to 0.4 for sRGB colors.
- Using OKLab values directly as CSS — browsers expect the oklab() function syntax, not raw comma-separated numbers.
Frequently Asked Questions
What is OKLab?
OKLab is a perceptually uniform color space with three axes: L (lightness), a (green-red axis), and b (blue-yellow axis). It's the Cartesian form that OKLCH's chroma and hue are derived from.
What's the OKLab value of #2563EB?
oklab(54.6% -0.0267 -0.2135) — a negative b value places it toward blue, and a slightly negative a value leans just past neutral toward green.
How is OKLab different from OKLCH?
They describe the same space with different coordinates — OKLCH uses polar chroma and hue (easier to reason about as 'how saturated' and 'what hue'), while OKLab uses Cartesian a and b axes (easier to use in math like linear interpolation between two colors).
Why is OKLab better for blending colors than RGB or HSL?
Linearly interpolating between two RGB or HSL colors often passes through a dull, muddy midpoint. Because OKLab's axes are perceptually uniform, a straight-line blend between two OKLab colors looks like a smooth, natural transition instead.
Is this conversion exact?
Yes — converting the resulting OKLab value back to hex reproduces the original color exactly, aside from floating-point rounding.