LCH to HEX Converter

Convert LCH colors back to HEX for browser fallbacks, design files, and color token export.

Use lch(lightness chroma hue) or comma-separated values such as 58.36, 64.79, 270.79.

HEX Result
#1E90FF
Related Converters: HEX to LCH OKLCH to HEX HWB to HEX

Input Format

LCH

LCH color

LCH uses lightness from 0 to 100, chroma intensity, and a hue angle in degrees.

HEX

HEX color code

HEX output is useful for tools and environments that still expect sRGB colors.

Conversion Logic

The converter maps polar LCH back to Lab, converts Lab to XYZ, then maps XYZ into clamped sRGB channels before writing HEX.

a = C * cos(H) b = C * sin(H) HEX = sRGB(XYZ(Lab(L, a, b)))

Common Examples

LCH HEX Preview
lch(100% 0 0) #FFFFFF
lch(0% 0 0) #000000
lch(54.29% 106.85 40.86) #FF0000
lch(58.36% 64.79 270.79) #1E90FF

When This Conversion Helps

CSS handoff

Convert copied design values into a CSS color syntax that fits the browser feature you are using.

Design systems

Compare the same color across formats before adding tokens, variables, or documentation examples.

Color audits

Translate stored brand colors into perceptual formats when reviewing lightness, contrast, or palette balance.

Common Input Mistakes

  • Use lightness between 0 and 100.
  • Very high chroma values can fall outside sRGB and will be clamped in HEX output.
  • Hue is an angle, not a percent. Use degrees or a plain numeric angle.

FAQ

Can I use this LCH to HEX converter for CSS? v

Yes. The result is formatted for practical CSS and design handoff. Check browser support when using newer color spaces such as LCH or OKLCH directly in production CSS.

Why does the converted value sometimes look rounded? v

Some color spaces use decimal channels. The tool rounds output to readable precision while keeping the preview tied to the converted RGB color.

Does conversion change the color? v

The goal is to preserve the same sRGB color as closely as possible. Out-of-gamut perceptual values are clamped when converted back to HEX or RGB.

Using This Tool Reliably

Input and output checks

Paste the color value in the format shown by the input label, then compare the preview against the copied result before using it in CSS, a design token, or a brand document.

Conversion logic

The browser calculates the result from the displayed channel values, rounds only for readable output, and keeps the visual preview tied to the same computed color.

Example workflow

Start with a known value such as #1E90FF, review the generated formats, copy the result, then test important text and UI states in the contrast checker when readability matters.

Common mistakes

Watch for missing # characters, RGB channels outside 0-255, percentages entered as plain numbers, alpha values copied into solid-color fields, and colors reused for text without checking contrast.

Related Color Tools

Open the next tool for this color task.