Flowfiles ← Color Converter

OKLCH Color Converter

Convert OKLCH to HEX, RGB, HSL — paste oklch() and get all formats instantly

Paste an OKLCH color value and get the equivalent HEX code, RGB triplet, and HSL value instantly. Useful when working with modern design systems like Tailwind v4, shadcn/ui, or Radix Colors that expose colors in OKLCH, and you need to paste the hex into an older tool.

Need bidirectional HEX ↔ RGB ↔ HSL ↔ OKLCH conversion?

Open the full Color Converter →
Enter an OKLCH color to preview
OKLCH Input
Invalid OKLCH — L: 0–1, C: 0–0.4, H: 0–360
HEX
RGB
HSL

Where does OKLCH come from?

OKLCH was introduced by Björn Ottosson in 2020 as an improvement over the CIE LCH color space, optimized for sRGB. It was adopted into the CSS Color Level 4 specification and became available natively in CSS via the oklch() function. Tools like Tailwind CSS v4, shadcn/ui, and Radix Colors now use OKLCH as their primary color representation, so the need to convert OKLCH to hex or RGB for legacy tools has grown significantly.

Frequently Asked Questions

What values should OKLCH have?

L ranges from 0 (black) to 1 (white). C (chroma) for sRGB colors is typically 0–0.37; higher values represent P3 or wider-gamut colors. H is 0–360 degrees like HSL's hue. Example: oklch(0.7 0.15 200).

What happens with wide-gamut OKLCH colors?

OKLCH can represent colors outside sRGB (P3, Rec. 2020). When converted to HEX or RGB (both sRGB), out-of-gamut values are clamped to 0–255 per channel. The resulting color will be the nearest sRGB approximation.

How does Tailwind v4 use OKLCH?

Tailwind CSS v4 redesigned its default palette using OKLCH to ensure perceptually consistent brightness across all hues. Each shade (50–950) has the same L value regardless of hue, unlike v3 where yellows appeared brighter than blues at the same numeric shade.

Is OKLCH conversion reversible?

Yes, for sRGB colors. HEX → RGB → OKLCH → RGB → HEX should produce the same result within floating-point precision.

Related tools