OKLCH to HEX Converter

About the OKLCH to HEX Converter

What is OKLCH to HEX conversion?

OKLCH is the perceptual color format modern CSS and Tailwind v4 speak — Lightness, Chroma, and Hue numbers that map to how colors actually look. But plenty of places still want a classic six-digit HEX code: older browsers, email clients, design handoffs, brand guidelines, and most graphics software. This converter takes an oklch() value and gives you the matching #RRGGBB, plus RGB, HSL, LCH, LAB, HWB and CMYK.

Drag the L, C and H sliders — each one renders a live gradient of exactly what it will do — or type the numbers straight from your stylesheet. Because OKLCH can describe colors beyond what screens display, anything outside the sRGB range is clipped to the nearest displayable color, which is the same thing browsers do. It all runs locally in your browser.

How to Use This Tool

1. Set your OKLCH values. Drag the Lightness, Chroma and Hue sliders or type exact numbers from an oklch() declaration.
2. Read the HEX code. It sits at the top of the results and updates live, with the big preview showing the exact color.
3. Grab other formats. RGB, HSL, LCH, LAB and more are listed with one-click copy buttons.
4. Explore. Click any shade, tint or harmony swatch to load it, or copy a shareable link to the exact color.

Common Use Cases

• Fallbacks for older browsers: Ship a HEX fallback alongside an oklch() declaration for anything pre-2023.
• Reading Tailwind v4 colors: Turn the framework's oklch palette values into HEX for design tools that don't speak OKLCH yet.
• Email and docs: Email clients and most office software still want HEX.
• Handoffs: Send a developer's oklch() token to a designer as a plain #RRGGBB.
• Sanity-checking: See instantly what an oklch() value in a code review actually looks like.

Going the other way? Use the HEX to OKLCH converter, get RGB instead, or browse all our free color tools.

Frequently Asked Questions

How do I convert OKLCH to HEX?

Enter the Lightness (0 to 100%), Chroma (0 to about 0.4) and Hue (0 to 360 degrees) with the sliders or number boxes, and the HEX code appears instantly at the top of the results with a live preview.

Why does my OKLCH color clip to a different HEX?

OKLCH can describe colors outside what sRGB screens display, especially at high chroma. When that happens the tool clips to the nearest displayable color, exactly as browsers do when rendering out-of-gamut oklch() values.

Why did my value change slightly after I moved a slider?

OKLCH, LCH and LAB can describe colors that no screen pixel can show. When a slider combination lands outside the sRGB range, the tool clips it to the nearest displayable color, so extreme chroma values may snap back once converted.

What Chroma values are realistic?

For colors that exist in sRGB, chroma tops out around 0.37 for the most saturated hues and much lower for others; most real-world UI colors sit between 0.03 and 0.25. If the preview stops changing as you raise C, you have left the sRGB gamut and clipping has kicked in.

Is this tool free and private?

Completely. The conversion runs entirely in your browser with JavaScript, nothing you enter is uploaded or logged, and the page keeps working offline once loaded.