How to Convert OKLab to OKLCH
Converting OKLab to OKLCH is the most straightforward conversion in modern color science. OKLab and OKLCH are the exact same color space, just represented using different coordinate systems.
Cartesian vs. Cylindrical Coordinates
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).
OKLCH uses a cylindrical coordinate system. Instead of plotting points on a grid, it draws a circle. The C (Chroma) is the radius—how far the color is from the neutral gray center. The H (Hue) is the angle around that circle, from 0 to 360 degrees.
The L (Lightness) channel is identical in both formats.
The Conversion Math
Because they share the same underlying space, converting OKLab to OKLCH only requires basic trigonometry. You do not need to pass the color through RGB or XYZ.
- Lightness: Remains unchanged.
- Chroma: Calculated using the Pythagorean theorem:
√(a² + b²). - Hue: Calculated using the arctangent of the
bandacoordinates:atan2(b, a), converted from radians to degrees.
Converting OKLab to OKLCH in JavaScript
function oklabToOklch(l, a, b) {
// Calculate Chroma
let c = Math.sqrt(a * a + b * b);
// Calculate Hue in degrees
let h = Math.atan2(b, a) * (180 / Math.PI);
if (h < 0) h += 360;
return { l, c, h };
}