Skip to content

Convert HEX to OKLCH

Converting hexadecimal (HEX) to Lightness, Chroma, Hue (perceptual) (OKLCH) 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 HEX → OKLCH 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 HEX to OKLCH

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

#c2410c → oklch(0.553 0.174 38.4)

  1. Convert the HEX color to RGB using the HEX → 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 OKLCH with the RGB → OKLCH method to finish.

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

HEX to OKLCH conversion table

HEX to OKLCH — quick reference
Common colors converted from HEX to OKLCH
ColorHEXOKLCH
White#ffffffoklch(1 0 90)
Black#000000oklch(0 0 0)
Red#ff0000oklch(0.628 0.258 29.23)
Lime#00ff00oklch(0.866 0.295 142.5)
Blue#0000ffoklch(0.452 0.313 264.05)
VersatilBox accent#c2410coklch(0.553 0.174 38.4)
Tailwind blue-500#3b82f6oklch(0.623 0.188 259.81)
Tailwind emerald-500#10b981oklch(0.696 0.149 162.48)

About these formats

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.

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.

Frequently asked questions

How do I convert HEX to OKLCH?

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

What is HEX?

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.

What is OKLCH used for?

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.

Is the HEX → OKLCH 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 OKLCH 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.