How to Convert HSL to OKLab
Converting HSL to OKLab moves your color from a legacy, hardware-based model into one of the most advanced perceptual color spaces available in modern CSS. OKLab was specifically engineered to fix the mathematical quirks found in older spaces like HSL and CIELAB.
The Flaws of HSL
HSL is notorious for its inconsistent lightness and terrible gradient interpolation. If you create a CSS gradient between a blue and a white HSL color, the middle of the transition will often look muddy and shift toward purple. This happens because HSL math doesn't understand how human eyes process light transitions.
The OKLab Advantage
OKLab solves this by using a mathematical foundation based on LMS (Long, Medium, Short) cone responses—the actual photoreceptors in the human eye. It uses three axes:
- L: Perceived lightness (from 0 to 1).
- a: The green/red color axis.
- b: The blue/yellow color axis.
Because OKLab perfectly models human vision, gradients and color mixing done in this space are flawless. Hues stay perfectly stable as they transition to white or black, with no muddy purple shifts.
The Conversion Math
To get from HSL to OKLab, the color is first converted to RGB and linearized (removing the sRGB gamma curve). This linear light is multiplied by a matrix to convert it into LMS cone space. A non-linear cube-root function is applied to simulate human eye response, and a final matrix multiplication yields the L, a, and b values.