Skip to content

Convert OKLCH to HEX

Converting Lightness, Chroma, Hue (perceptual) (OKLCH) to hexadecimal (HEX) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact OKLCH → HEX method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).

From

To

—

—

—

Live preview

How to convert OKLCH to HEX

Take this real example — the color firebrick(#c2410c):

oklch(0.553 0.174 38.4) → #c2410c

  1. Convert the OKLCH color to RGB using the OKLCH → RGB method.
  2. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format.
  3. Convert RGB to HEX with the RGB → HEX method to finish.

OKLCH → RGB → HEX (RGB is the numeric bridge)

OKLCH to HEX conversion table

OKLCH to HEX — quick reference
Common colors converted from OKLCH to HEX
ColorOKLCHHEX
Whiteoklch(1 0 90)#ffffff
Blackoklch(0 0 0)#000000
Redoklch(0.628 0.258 29.23)#ff0000
Limeoklch(0.866 0.295 142.5)#00ff00
Blueoklch(0.452 0.313 264.05)#0000ff
VersatilBox accentoklch(0.553 0.174 38.4)#c2410c
Tailwind blue-500oklch(0.623 0.188 259.81)#3b82f6
Tailwind emerald-500oklch(0.696 0.149 162.48)#10b981

About these formats

OKLCH (Lightness, Chroma, Hue (perceptual)). OKLCH is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.

HEX (hexadecimal). HEX is the web's native notation: a # followed by two digits per channel in base 16 (00–FF). Compact, unambiguous and supported everywhere, from CSS to design tools.

Frequently asked questions

How do I convert OKLCH to HEX?

Convert the OKLCH color to RGB using the OKLCH → RGB method. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format. Convert RGB to HEX with the RGB → HEX method to finish. The converter above does it instantly, including the reverse direction.

What is OKLCH?

OKLCH — Lightness, Chroma, Hue (perceptual) — is the modern perceptual space from CSS Color 4: L for lightness, C for chroma (intensity) and H for hue, designed so that equal numeric steps look like equal steps to your eye.

What is HEX used for?

HEX (hexadecimal) is the web's native notation: a # followed by two digits per channel in base 16 (00–FF). Compact, unambiguous and supported everywhere, from CSS to design tools.

Is the OKLCH → HEX conversion exact?

Yes, within display precision. OKLCH values are typically stored to 3 decimals, and on very saturated colors that can shift a channel by 1–3 units of 255 after a round trip — invisible in practice, and exactly how browsers and conversion tools round.

Why does the HEX value look different in other tools?

Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.