How to Convert HWB to OKLab
Converting HWB to OKLab translates your color from a standard sRGB format into a modern perceptual color space. OKLab was engineered to fix the mathematical quirks found in older spaces like CIELAB, making it an excellent choice for color mixing and image processing.
The Limits of HWB
HWB is useful for quickly generating tints and shades, but it struggles with interpolation. If you create a CSS gradient between a blue and a white HWB color, the middle of the transition will often look muddy and shift toward purple. This happens because HWB relies on RGB math, which doesn't accurately model 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 models human vision accurately, gradients and color mixing done in this space are smooth. Hues stay stable as they transition to white or black, avoiding the muddy purple shifts common in older formats.
The Conversion Math
To get from HWB 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.