Skip to content
ZeroServer.tools

OKLCH to HEX Converter

Convert an OKLCH color (Lightness, Chroma, Hue) to a standard HEX color code, entirely in your browser.

L: 0.6 C: 0.15 H: 250°

HEX

#2784d5

RGB

Red
39
Green
132
Blue
213
rgb(39, 132, 213)

CSS Snippets

color: #2784d5;
background-color: #2784d5;
border-color: #2784d5;

How OKLCH to HEX conversion works

OKLCHis a cylindrical form of the OKLab perceptual color space, expressed as Lightness (0–1), Chroma (colorfulness), and Hue (0–360°). Because it's perceptually uniform, OKLCH is increasingly used in modern CSS for defining color scales, gradients, and themes that look consistent across hues. HEX, on the other hand, is the classic sRGB-based format (#rrggbb) supported everywhere.

To convert, this tool first turns OKLCH into OKLab (a = C·cos(H), b = C·sin(H)), then reverses Björn Ottosson's OKLab transform to get linear LMS values, converts those to linear sRGB, and finally gamma-encodes the result to standard sRGB before packing it into a HEX string — all client-side in your browser. Since OKLCH can describe colors outside the sRGB gamut (colors your screen and HEX can't represent), out-of-gamut inputs are clamped to the nearest valid sRGB color.

Need to go the other way? Try OKLCH Color Converter (HEX to OKLCH/OKLab), or convert HEX to other spaces with HEX to RGB and the all-in-one color converter.

Built and maintained by Meet Shah · Last updated

What this tool is used for

  • Producing a hex fallback for a palette authored in OKLCH.
  • Converting a perceptually even scale into concrete values for older browsers.
  • Checking whether an OKLCH colour is inside the sRGB gamut before shipping it.
  • Turning a modern colour token into something a design tool will accept.
  • Comparing an OKLCH value against an existing hex palette.

Frequently Asked Questions

Why can OKLCH produce a colour hex cannot?
Because OKLCH covers the whole visible spectrum while hex is limited to sRGB. Any OKLCH colour outside sRGB must be GAMUT-MAPPED to the nearest representable one, so the conversion is lossy in a way that hex-to-OKLCH never is.
How do I know a colour was clipped?
Round-trip it: convert to hex and back, and compare. A visible difference means the original was out of gamut. Chroma above roughly 0.15-0.25 (depending on hue) is where sRGB starts to run out.
Should I still ship a hex fallback?
Yes, for older browsers, email clients (which are years behind) and any tooling that parses colours itself. The usual pattern is a hex declaration followed by an oklch() one, letting the cascade pick the best supported.
Why does hue not behave like HSL's?
Because OKLCH hue is perceptually uniform. Rotating hue keeps the perceived lightness constant, whereas HSL's yellow at 50% lightness looks far brighter than its blue — which is why HSL palettes need manual correction and OKLCH ones do not.
What are the value ranges?
L is 0-1 (or 0-100%), C starts at 0 with no fixed maximum (sRGB rarely exceeds ~0.37), and H is 0-360 degrees. The open-ended chroma is exactly why out-of-gamut values are easy to write.

Common errors and gotchas

  • Assuming every OKLCH colour has a hex equivalent, when the space is larger than sRGB and must be clipped.
  • Treating a clipped result as a conversion bug rather than a gamut limit.
  • Reading OKLCH lightness as HSL's, which are defined differently.
  • Shipping only the hex and losing the wider-gamut rendering on displays that support it.
  • Round-tripping through 8-bit hex repeatedly, which discards the precision OKLCH was chosen for.

Related Converters tools

Private & free — this tool runs entirely in your browser.

IndieKitShip your Next.js startup in days.affiliate