How to Convert HEX to LCH
Converting HEX to LCH takes the rigid, machine-centric RGB color model and transforms it into one of the most powerful, human-friendly color spaces available in modern CSS. LCH stands for Lightness, Chroma, and Hue.
Understanding LCH
LCH is actually the exact same color space as CIELAB, just mapped onto a cylinder instead of a rectangular grid. While Lab uses abstract a and b axes for color, LCH uses a much more intuitive approach:
- L (Lightness): Ranges from
0%(pitch black) to100%(pure white). Unlike HSL, this lightness is perceptually accurate. A yellow and a blue with the same LCH Lightness will actually look equally bright to the human eye. - C (Chroma): The amount of color intensity.
0is completely gray. Unlike Saturation in HSL (which stops at 100%), Chroma is theoretically unbounded, though standard screens usually max out around 130. - H (Hue): A 360-degree angle on the color wheel.
Why Use LCH Instead of HEX?
HEX codes (and by extension, RGB and HSL) suffer from perceptual inconsistencies. In HSL, a yellow at 50% lightness is very bright, while a blue at 50% lightness is quite dark. This makes building accessible, high-contrast color palettes a nightmare of trial and error.
Because LCH is perceptually uniform, you can lock the Lightness channel at 60%, sweep the Hue channel across 360 degrees, and every single color you generate will have the exact same perceived brightness and contrast ratio against white text. It's basically a superpower for design systems.
The Conversion Pipeline
To get from HEX to LCH, the color must go on quite a journey. The HEX string is parsed into RGB, which is then linearized (removing gamma correction). The linear RGB is converted into the CIE XYZ color space, which is then transformed into CIELAB. Finally, trigonometry (specifically Math.atan2) is used to convert the a and b coordinates of Lab into the Chroma and Hue angles of LCH.