How to Convert HEX to OKLCH
Converting HEX to OKLCH is the ultimate upgrade for web colors. OKLCH takes the flawless perceptual math of OKLab and wraps it in a developer-friendly, cylindrical format. It is widely considered the best color space available in modern CSS.
Understanding OKLCH
OKLCH stands for Lightness, Chroma, and Hue. It operates similarly to HSL, but without the perceptual flaws.
- L (Lightness): Ranges from
0(black) to1(white). It is strictly tied to human perception. If two colors have an OKLCH lightness of0.65, they will look equally bright to the human eye, regardless of their hue. - C (Chroma): The purity or intensity of the color.
0is gray. Unlike HSL, Chroma isn't capped at an arbitrary 100%. It scales based on what the monitor can actually display. - H (Hue): The angle on the color wheel, from
0to360.
Why OKLCH is Replacing HEX
HEX codes are tied to the sRGB color space, which was standardized in the 1990s. Modern monitors, phones, and TVs can display millions of vibrant colors (like Display P3) that simply cannot be written as a HEX code. OKLCH is gamut-independent, meaning it can describe any color the human eye can see, unlocking the full potential of modern screens.
Furthermore, OKLCH makes building accessible design systems trivial. Because the Lightness channel is perfectly accurate, you can programmatically generate color palettes that are guaranteed to pass WCAG contrast requirements without having to manually check every single color combination.
The Conversion Process
To convert HEX to OKLCH, the color is first parsed into 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 basic trigonometry, resulting in the final OKLCH values.