Skip to content
ZeroServer.tools

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

HEX
#ff0000

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.

Related Converters tools

Private & free — this tool runs entirely in your browser.

IndieKitShip your Next.js startup in days.affiliate