HEX to OKLCH Converter

What the three OKLCH numbers mean

OKLCH describes a color the way people actually perceive it, using three components: L is perceptual lightness from 0% (black) to 100% (white), C is chroma — how far the color sits from neutral gray — and H is the hue angle on a 360° wheel. It is the polar form of the OKLab space published by Björn Ottosson in 2020 and adopted into CSS Color 4, and it fixes the oldest annoyance of classic color models: equal steps in the numbers finally look like equal steps to your eyes.

Feed this converter #3564c4 and you get oklch(52.33% 0.1589 262.61). Read it like a sentence: a color at 52% perceived lightness (a solid mid-tone), with a moderate chroma of 0.159 (clearly colorful, nowhere near neon), at hue 262.6° — squarely in blue territory. Under the hood the tool gamma-decodes the hex value to linear light, passes it through a cone-response stage with a cube-root nonlinearity, lands in OKLab and finally converts those rectangular coordinates into the polar L, C and H.

Hue angles follow a fixed map that quickly becomes second nature: reds cluster near 29°, yellows near 110°, greens near 142°, cyans near 195°, blues near 264° and magentas near 328°. Our example’s 262.6° lands just shy of the pure-blue anchor, which is why its swatch reads as a calm ultramarine rather than a violet.

The HSL lie: why 50% is not 50%

HSL also advertises a lightness channel, but its numbers come from max/min arithmetic on RGB channels, not from human vision. The failure is easy to demonstrate: hsl(60, 100%, 50%) (pure yellow) and hsl(240, 100%, 50%) (pure blue) both claim 50% lightness, yet measured perceptually the yellow sits at OKLCH L = 96.8% — almost white — while the blue sits at 45.2%. Put white text on both and only one passes a contrast check.

OKLCH holds no such surprises. Two colors with L = 52.33% look equally bright whether they are blue, teal or brown, so a palette built by fixing L and rotating H produces swatches that genuinely match in visual weight. Even the neutral axis is calibrated to perception: the 50%-gray code #808080 comes out at oklch(59.99% 0 0), because human vision resolves dark tones more finely than light ones — a fact HSL cannot express at all.

CSS Color 4 syntax and browser support

In a stylesheet the notation is oklch(L C H): lightness as a percentage or a 0–1 number, chroma as a plain number, hue in degrees. The specification’s favorite example is pure red — oklch(62.8% 0.2577 29.23) is exactly #ff0000. Transparency goes after a slash, as in oklch(52.33% 0.1589 262.61 / 60%).

Support is no longer a gamble: Safari shipped oklch() in 15.4 (March 2022), Chrome and Edge followed in 111 (March 2023), and Firefox in 113 (May 2023) — every major browser released since mid-2023 understands it. For legacy traffic, declare a hex fallback on the line above the oklch declaration; old engines drop the value they cannot parse and keep the hex, new ones apply the later declaration.

Familiar HEX codes, translated

A few anchor points help calibrate your intuition for the scale:

Notice that the chroma column never gets anywhere near 1: within the sRGB gamut the most saturated colors top out around 0.32.

What OKLCH unlocks in practice

• Accessible color ramps — step L in fixed increments (90%, 80%, 70% …) while holding C and H constant, and every tint in the ramp keeps a predictable contrast relationship to text and background.
• Hue rotation without brightness jumps — generate categorical chart colors by rotating H at constant L and C; no hue suddenly glows and none turns muddy.
• Saner dark modes — shift L alone and a color keeps its identity instead of drifting toward gray or changing apparent hue.
• Cleaner gradients — interpolating in OKLCH avoids the desaturated dead zone that plagues the midpoint of RGB gradients between distant hues.
• Design tokens that scale — store “brand hue 262.6” once and derive hover, border and background variants mathematically instead of eyeballing new hex values.

One reassuring property of this direction: every HEX code has exact OKLCH coordinates, so converting hex to OKLCH can never trigger gamut problems — those only appear on the return trip, when a high-chroma OKLCH value may not fit into sRGB. For that reverse step use the OKLCH to HEX converter, and when colleagues send colors in mixed notations, the universal Color Converter accepts them all. The math here runs 100% in your browser: no server ever sees your colors, and the page keeps working offline.