OKLCH to HEX Converter

How an OKLCH value becomes a HEX code

This converter runs the perceptual pipeline in reverse. Your input’s polar coordinates are unfolded into rectangular OKLab, projected through the inverse cone-response matrices into linear-light RGB, gamma-encoded to sRGB and quantized to the familiar two-digits-per-channel form. Try the sample oklch(52% 0.14 262): it lands cleanly on #3a65b8, alias rgb(58, 101, 184) — a restrained mid-blue that fits comfortably inside sRGB, so the code you get is exactly the color you asked for.

Why convert back at all? Because HEX remains the lingua franca of tooling: design handoffs, SVG exports, email templates, terminal themes and countless config files still expect six hexadecimal digits. A modern workflow reasons about color in OKLCH, then ships HEX wherever compatibility demands it.

When the color you typed does not exist in sRGB

OKLCH can name colors far beyond what a standard screen shows — that device-independence is the format’s whole promise — while HEX is locked to the sRGB gamut. Ask for oklch(65% 0.3 262) and the raw math yields a blue channel of 1.258, well past the 0-to-1 range an sRGB pixel can reproduce. Something has to give, and how a converter gives matters.

This tool follows the CSS Color 4 gamut-mapping algorithm instead of naive clamping: lightness and hue stay pinned while chroma is walked down by binary search until the color fits, and a straight channel clip is accepted only once its error drops below the just-noticeable-difference threshold (ΔE-OK 0.02). For the example above that produces #4c89ff — effective chroma about 0.19, still at 65% lightness and hue 262° — and a warning appears saying so. The HEX, RGB and HSL rows show the mapped color, while the Lab, LCH, OKLab and OKLCH rows keep your exact out-of-gamut numbers, because those spaces can represent them. This mirrors what the CSS specification prescribes for browsers rendering such colors on sRGB displays, so the flagged result is a faithful preview of real-world output.

Chroma is not a percentage — and its ceiling moves

A common stumble when writing OKLCH by hand is treating C like HSL saturation and typing 80% expecting “quite colorful”. Chroma is an absolute distance from the gray axis: 0 is perfectly neutral, everyday interface colors live between 0.03 and 0.2, and nothing inside sRGB exceeds about 0.32. CSS does permit a percentage here, but defines 100% as C = 0.4 — more chroma than sRGB can show at any lightness.

The ceiling also shifts dramatically with hue and lightness. At 50% lightness, sRGB accommodates chroma up to roughly 0.28 near violet-blue (hue 264°) yet only about 0.085 near cyan (hue 195°); magenta peaks around 0.32, but only at about 70% lightness. If you want one number to remember: chroma at or below 0.08 stays displayable for every hue at lightness between 50% and 70%, which is why so many OKLCH design systems park their muted and pastel tiers in exactly that zone.

Where the sRGB primaries sit in OKLCH

The six most saturated displayable colors show how tightly maximum chroma is coupled to lightness:

Request any of these hues with a higher chroma than the table shows and the converter pulls the value back to the nearest displayable color and flags the adjustment — it will never silently invent light your screen cannot emit.

Input syntax the parser understands

• Lightness both ways — 52% and 0.52 are equivalent; 0 maps to black, 1 to white.
• Hue units — bare numbers mean degrees, and deg, rad, grad and turn suffixes are all accepted.
• Negative angles wrap — oklch(52% 0.14 -98) is the same input as hue 262.
• Alpha after a slash — oklch(52% 0.14 262 / 40%) yields the 8-digit code #3a65b866.
• The none keyword — treated as 0, matching CSS; oklch(52% none 262) is a pure gray at 52% lightness.
• Lenient separators — commas between components are tolerated here, even though the CSS grammar itself wants plain spaces.

Going the other way — turning existing brand hex codes into perceptual coordinates — is the job of the HEX to OKLCH converter, and once a palette is settled, the Color Contrast Checker verifies your text pairings. All math on this page executes 100% inside your browser: colors never touch the network, and the tool stays usable offline.