Converting OKLCH to OKLab
Converting OKLCH to OKLab is the most straightforward conversion in modern color science. OKLCH and OKLab are the exact same color space, just represented using different coordinate systems.
Cylindrical vs. Cartesian Coordinates
OKLCH uses a cylindrical coordinate system. It draws a circle where C (Chroma) is the radius—how far the color is from the neutral gray center—and H (Hue) is the angle around that circle, from 0 to 360 degrees.
OKLab uses a Cartesian coordinate system. You plot a color on a grid using the a axis (green to red) and the b axis (blue to yellow).
The L (Lightness) channel is identical in both formats.
The Conversion Math
Because they share the same underlying space, converting OKLCH to OKLab only requires basic trigonometry. You do not need to pass the color through RGB or XYZ.
- Lightness: Remains unchanged.
- a axis: Calculated using the cosine of the Hue angle multiplied by the Chroma.
- b axis: Calculated using the sine of the Hue angle multiplied by the Chroma.
Converting OKLCH to OKLab in JavaScript
function oklchToOklab(l, c, h) {
// Convert Hue from degrees to radians
let hr = h * (Math.PI / 180);
// Calculate a and b coordinates
let a = c * Math.cos(hr);
let b = c * Math.sin(hr);
return { l, a, b };
}