How to Convert HSL to OKLCH
Converting HSL to OKLCH is the ultimate upgrade for your CSS colors. You are taking a flawed, 1970s-era color model and translating it into the most powerful, developer-friendly color space available on the modern web.
Why OKLCH is the New Standard
Both HSL and OKLCH use a cylindrical model (Lightness, a color intensity channel, and a Hue angle). However, OKLCH is vastly superior for three main reasons:
- Perceptual Accuracy: In HSL, lightness is an illusion. A 50% lightness yellow is much brighter than a 50% lightness blue. In OKLCH, lightness is absolute. If two colors have an OKLCH lightness of
0.65, they will look equally bright to the human eye, making accessible design incredibly easy. - Flawless Gradients: HSL gradients often suffer from muddy, grayish dead zones or unexpected color shifts (like blue turning purple as it fades to white). OKLCH gradients are perfectly smooth and hue-stable.
- Wide Gamut Support: HSL is permanently locked to the sRGB color space. OKLCH can describe any color the human eye can see, allowing you to use the ultra-vibrant colors available on modern P3 displays.
The Conversion Pipeline
To convert HSL to OKLCH, the color must pass through a complex mathematical pipeline. The HSL values are converted to RGB, linearized, and transformed into the OKLab color space using LMS cone response matrices. Finally, the a and b coordinates of OKLab are converted into Chroma and Hue using trigonometry, resulting in the final OKLCH values.