LCH to HEX Converter
Convert a CIE LCH color (Lightness, Chroma, Hue) to a HEX code, with live RGB preview and CSS output.
0 = black, 100 = white
0 = grey, higher = vivid
0–360° hue angle
CSS Output
lch(53 105 40)rgb(255, 0, 0)How LCH to HEX conversion works
CIE LCH is a cylindrical representation of the CIE Lab color space, describing any color as Lightness (0–100), Chroma (colorfulness, roughly 0–150+), and Hue (a 0–360° angle). It is perceptually uniform, which makes it a favorite among designers for building color scales where equal numeric steps look like equal visual steps. To convert to HEX, this tool first turns LCH back into Lab coordinates (a = C × cos(H), b = C × sin(H)), then maps Lab to CIE XYZ using the D65 reference white, then converts XYZ to linear sRGB with the standard sRGB matrix, and finally gamma-encodes each channel to produce the familiar HEX code. Because LCH can describe colors outside the sRGB gamut that monitors can display, out-of-range values are clamped to the closest displayable color and flagged above. LCH is supported natively in modern CSS via the lch() function (Chrome 111+, Firefox 113+, Safari 15+).
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Producing a hex fallback for a colour authored in LCH.
- Converting a perceptually defined colour for a design tool.
- Checking whether an LCH colour is inside the sRGB gamut.
- Building an evenly spaced palette and exporting it as hex.
- Comparing an LCH value against an existing hex palette.
Frequently Asked Questions
- What are the three LCH components?
- Lightness from 0 to 100, Chroma as distance from grey with no fixed upper bound, and Hue as an angle in degrees. It is LAB expressed in polar coordinates, which is what makes it usable — hue becomes a single number to rotate rather than two axes to solve.
- Why does chroma have no maximum?
- Because it is a real distance in colour space, and how far you can go before leaving a displayable gamut depends on the hue and lightness. Yellow reaches much higher chroma than blue at the same lightness, which is why a fixed maximum would be wrong for most colours.
- What happens to an out-of-gamut LCH colour?
- It is clipped to the sRGB boundary, so several distinct LCH values can produce the same hex. That is the conversion being honest — the colour is describable and not displayable, and gamut mapping is the step that decides how gracefully it fails.
- How is LCH different from HSL?
- Its lightness is perceptual. Two HSL colours at 50% lightness can look wildly different in brightness — yellow against blue is the standard demonstration — while two LCH colours at L 50 genuinely look equally light. That is what makes LCH usable for building colour ramps.
- Is this the same as OKLCH?
- Same idea, better maths. OKLCH uses the Oklab space, which fixed known non-uniformities in CIELAB around blue and purple where hue shifted visibly as lightness changed. For new work OKLCH is the better default and CSS supports both.
Common errors and gotchas
- Assuming every LCH colour has a hex equivalent, when the space is larger than sRGB and must be clipped.
- Ignoring the illuminant, which changes what an LCH triple means.
- Reading LCH lightness as HSL's, which are defined differently.
- Confusing CIE LCH with OKLCH, which are different spaces with similar names.
- Round-tripping through 8-bit hex, which discards the precision LCH was chosen for.