Color to LCH

What is the LCH color space?

CIE LCH (also written LCH or L*C*h°) is the cylindrical form of the CIE LAB color space. It keeps the same Lightness (L) as LAB, but instead of the rectangular a* and b* axes it uses Chroma (C) and Hue (H). Chroma is the distance from the neutral gray axis — how vivid a color is — and Hue is the angle around that axis, expressed in degrees from 0° to 360°.

Because LCH is just LAB rewritten in polar coordinates, it covers exactly the same gamut. The advantage is readability: two colors with the same C and different H share the same vibrancy, and two colors with the same L look equally bright. That makes LCH the most intuitive perceptual space for designers building palettes.

How RGB is converted to LCH

LCH is produced by first converting RGB to LAB, then converting the rectangular a*, b* pair into polar C and H. The full pipeline is:

R' = ((R/255 + 0.055) / 1.055)2.4 (linear RGB)
X = 0.4124·R' + 0.3576·G' + 0.1805·B' (XYZ, D65)
L = 116·f(Y/Yn) − 16, a = 500·(f(X/Xn) − f(Y/Yn)), b = 200·(f(Y/Yn) − f(Z/Zn))
C = √(a² + b²)
H = atan2(b, a) × 180 / π (normalized to 0–360)

where f(t) is the cube-root LAB function and (X_n, Y_n, Z_n) is the D65 reference white. This tool performs every step live as you pick a color.

When to use LCH

LCH is the right choice whenever you need perceptual control over hue and chroma:

• Color palettes. Fix L and C, vary H to generate harmonious perceptually-uniform swatches.
• Brand systems. Define brand colors by hue angle and let chroma control vibrancy.
• Accessibility. Match lightness L across different hues so text stays legible.
• Design tools. Figma, Sketch and modern CSS lch() use this exact space.
• Gamut checks. High C with extreme H reveals out-of-sRGB colors.

For everyday web styling, HEX and RGB are still most convenient because every browser accepts them. LCH shines for design systems where hue rotation must preserve perceived brightness.

LCH vs LAB, RGB and HEX

LCH and LAB describe the exact same colors — LCH is LAB in polar form. RGB and HEX describe colors a screen can emit; LCH describes how a human would perceive a color under a defined light source, independent of any device. That makes LCH wider than sRGB: it contains colors no monitor can show.

The practical difference between LCH and LAB is human readability. In LAB, "more red" means a larger a*, but you cannot tell the hue without both a* and b*. In LCH, hue is a single angle — 0° is reddish, 90° yellowish, 180° greenish, 270° bluish — so designers can reason about color direction directly. Chroma also gives a single number for "how colorful", which is easier than mentally combining a* and b*.

How to convert a color to LCH

Converting a color to LCH with this tool takes a second and runs entirely in your browser. No upload, no sign-up, no install. Follow these steps:

1. Pick a color. Use the color picker, or type red, green and blue values (0–255) into the RGB inputs.
2. Read the result. The L, C, H values and the full lch() string update live.
3. Copy LCH. Click "Copy LCH" to copy the value, then paste it into your design tool or CSS.

Every step runs locally in JavaScript, so your color choice never leaves your browser. This makes the tool completely private and instant.