Convert any color to and from OKLab — the rectangular form of OKLCH, with L for lightness and a/b axes instead of chroma and hue. OKLab is what CSS interpolates gradients and color-mix() in by default, so these are the numbers your browser actually animates through.
Settings
Generated locally in your browser — your settings and results never leave this page.
The rectangular workhorse
OKLab is OKLCH with the polar coordinates unwrapped: instead of chroma-and-hue, two signed axes — a (green↔red) and b (blue↔yellow) around the same perceptual L. Machines prefer it this way: interpolation, averaging and distance are linear operations, and OKLab is where CSS runs them — gradients and color-mix() default to this space.
Reading and writing oklab() values
White is oklab(1 0 0), black oklab(0 0 0), and the gray ramp runs between with both axes at zero. sRGB colors keep |a| and |b| under ~0.4. A quick worked read: oklab(0.63 −0.05 −0.14) — mid lightness, slightly green-of-neutral, strongly blue → an azure. The converter does the precise version of that read in both directions.
polar ↔ rectangular C = √(a² + b²) a = C·cos(H) H = atan2(b, a) b = C·sin(H)
When to pick which coordinates
Editing by hand: OKLCH (rotate hue, dial chroma — intuitive). Computing: OKLab (lerp two colors, average a palette, measure distance — the math behaves). They are the same space; conversion is trigonometry, not color change. This page accepts any notation and emits the rectangular form alongside all others.
OKLab and CIELAB in one sentence each
CIELAB: the 1976 measurement standard, D50-referenced, with known hue bends in blue. OKLab: the 2020 redesign tuned on modern datasets, hue-linear enough for gradients, adopted wholesale by CSS. Interchange with instruments in Lab; generate and interpolate in OKLab.
Reference values, computed live
Rectangular coordinates become legible beside known colors. Seven named colors in OKLab form with their hex equivalents:
| Color | OKLab | HEX |
|---|---|---|
| gold | oklab(0.887 -0.017 0.181) | #ffd700 |
| teal | oklab(0.543 -0.09 -0.024) | #008080 |
| slateblue | oklab(0.544 0.046 -0.165) | #6a5acd |
| sienna | oklab(0.526 0.082 0.081) | #a0522d |
| yellowgreen | oklab(0.785 -0.11 0.147) | #9acd32 |
| dodgerblue | oklab(0.652 -0.055 -0.182) | #1e90ff |
| firebrick | oklab(0.497 0.16 0.081) | #b22222 |
Check the signs against the color wheel in your head: a positive means red-of-neutral, negative green-of-neutral; b positive yellow-side, negative blue-side. The magnitudes stay small — sRGB never pushes |a| or |b| far past 0.3 — which is why a value like 0.8 in either axis is an immediate red flag for out-of-gamut input.
How to use the OKLab Color Converter
- Enter any color – hex, rgb(), a name, or an oklab() value to decode.
- The result updates live as you type – no convert button needed.
- Copy the oklab() form, or the full format list.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
What is OKLab and how does it relate to OKLCH?
The same color space in two coordinate systems: OKLab is rectangular (L, a, b axes), OKLCH its polar reading (L, chroma, hue). Convert between them with C = √(a²+b²), H = atan2(b,a) – no color changes, only the description.
Why does CSS default to OKLab for gradients and color-mix()?
Because straight lines through OKLab look right: no gray dead zone mid-gradient, no lightness dip. When you write color-mix(in oklab, …) or a default CSS gradient interpolation in newer specs, these are the numbers being averaged.
What do the a and b axes mean in OKLab?
Same intuition as Lab but rescaled: a runs green→red, b runs blue→yellow, both roughly ±0.4 at sRGB extremes (versus ±128-ish in Lab). Zero on both axes is the neutral gray ramp.
When do I want rectangular OKLab over polar OKLCH?
For math: interpolation, averaging several colors, distance measures – linear operations behave in rectangular coordinates. For humans editing a color, polar OKLCH (twist hue, dial chroma) is friendlier. Same space, pick the coordinates per task.
How accurate is this implementation?
It uses the reference matrices from Björn Ottosson's definition, matches the CSS Color 4 spec example for red to four decimals, and round-trips a color grid exactly in automated tests.
Is OKLab a replacement for CIELAB everywhere?
For design-tool math, effectively yes. For instrument interchange, tolerance contracts and print standards, Lab remains the lingua franca – decades of QC infrastructure speak it. Know both; convert freely.
What is a quick sanity check for oklab() values?
Neutral grays must have a ≈ 0 and b ≈ 0; white is oklab(1 0 0), black oklab(0 0 0). If a "gray" shows a=0.05, something upstream tinted it.
