Convert colors to and from CIELCH — CIELAB expressed as lightness, chroma and hue, the polar form that makes Lab intuitive to edit. Accepts lch() CSS syntax or any other notation, and converts with the same D50-referenced pipeline browsers use for lch().
Settings
Generated locally in your browser — your settings and results never leave this page.
CIELAB, made editable
LCH re-expresses Lab in the coordinates people think in: keep L*, then chroma (how far from gray) and hue (which direction) instead of raw a*/b*. Nothing changes but usability — and usability changes everything: “same color, 20% less chromatic” is one number in LCH and an algebra exercise in Lab.
Worked example both ways
Dark cyan into polar form, and a hand-specified lch() back to hex:
lab(51.92% -32.26 -9.53) → C = √(a²+b²) = 33.63, H = atan2 = 196.45°
= lch(51.92% 33.63 196.45)
lch(70% 45 300) → a = 45·cos300° = 22.5, b = −38.97
→ a violet, about #b49be9
LCH hue is not HSL hue
Same word, different wheels: LCH hue 0° sits at the +a* axis (a magenta-red), and families land at different angles than HSL’s geometry — porting hue numbers between the systems scrambles colors. Within one system, rotation works as expected; across systems, convert properly (this page exists for that).
Choosing between LCH and OKLCH
Both are polar perceptual spaces in CSS. LCH carries Lab’s pedigree — and Lab’s blue-region hue bend, where constant-hue lines visibly curve. OKLCH fixes the bend and is the better default for generation and interpolation; LCH remains right when upstream data (instruments, standards, print) is already Lab-referenced. Keeping both converters adjacent makes the choice cheap.
Reference values, computed live
Polar coordinates read best beside familiar colors. Seven named colors expressed in LCH, with the hex each converts back to:
| Color | LCH | HEX |
|---|---|---|
| slateblue | lch(44.6% 65.8 296.8) | #6a5acd |
| sienna | lch(44.3% 47.7 49.6) | #a0522d |
| yellowgreen | lch(76.8% 73.5 116.8) | #9acd32 |
| dodgerblue | lch(58.4% 64.8 270.8) | #1e90ff |
| firebrick | lch(39.8% 68.8 34.7) | #b22222 |
| indigo | lch(19.7% 71.8 310.9) | #4b0082 |
| gold | lch(87.5% 86.6 88.1) | #ffd700 |
Scan the C column against your visual memory of these colors: the loud ones carry chroma past 60, the workhorse mid-tones sit in the 40s, and nothing here approaches the ~130 ceiling that saturated magentas reach. Calibrating “how much chroma is a lot” is most of what makes LCH editable by hand.
Instrument data meets stylesheet
A concrete bridge this converter serves weekly: a physical brand book lists the primary as measured LCH (instruments love polar Lab), and the web team needs tokens. Paste the lch() straight in, take the hex and oklch() out, and note the gamut flag — measured colors of printed samples occasionally sit outside sRGB, in which case the mapped value plus the original as a wide-gamut declaration is the faithful translation. The reverse trip matters at reprint time: the web palette’s LCH values, converted here, are what the print vendor’s color matcher wants to see.
How to use the LCH Color Converter
- Enter any color, or an lch() value to decode.
- The result updates live as you type – no convert button needed.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
- Share the exact result: the page URL updates with your input, so the link reproduces it.
Frequently asked questions
What is LCH and when should I use it?
CIELAB in polar form: L* unchanged, C = chroma (distance from gray), H = hue angle. Use it when you want Lab's measurement pedigree with editable knobs – tweaking C or rotating H beats guessing a*/b* pairs. #1e90ff reads lch(58.36% 64.79 270.79).
How do LCH and OKLCH differ in practice?
Same idea, different underlying space. LCH (from CIELAB) bends noticeably in blues – rotating hue at constant C drifts in apparent lightness; OKLCH fixes most of that. Prefer OKLCH for generation, LCH when interfacing with Lab-based tooling.
What chroma values are realistic in LCH?
sRGB colors top out around C 130 (saturated reds/magentas); most UI colors sit between 20 and 80. C 0 is the gray axis. Values near the top edge for a given hue and lightness start leaving the displayable gamut.
Why does CSS have both lab() and lch()?
Author convenience – they denote identical colors. lch() reads naturally when you think "how light, how colorful, which hue"; lab() when you have measured coordinates. Browsers convert internally exactly as this tool does.
Can rotating LCH hue keep a palette equally vivid?
Roughly, within the space's blue-region caveat – and only until the gamut boundary interferes, since maximum chroma varies by hue. The warning system here flags any rotation that left sRGB.
What does hue 0° mean in LCH?
The positive a* direction – a magenta-leaning red (not the same red as HSL's 0°). Angle conventions differ across cylindrical spaces; always note which space a hue number belongs to.
Does this converter handle CSS lch() percentages?
Yes: % on L is direct, % on C scales 100% → 150 per spec. Alpha after a slash also parses and carries through the outputs.
