HEX to OKLCH Converter — Modern CSS Color

Why OKLCH fixes the lightness problem in HSL

If you've built a design system in HSL, you've probably noticed an odd problem: two colours with the same stated lightness don't look equally light. hsl(60, 100%, 50%) (yellow) appears dramatically brighter than hsl(240, 100%, 50%) (blue), even though both claim 50% lightness. This isn't a bug—it's HSL's fundamental flaw. The L in HSL is a simple midpoint between the largest and smallest RGB channel, and it does not account for the fact that human vision is far more sensitive to green than to blue.

OKLCH solves this through perceptual uniformity. Its L component is calibrated to human vision, so two colours with L=0.5 genuinely look equally light regardless of hue. This means you can hold lightness constant across an entire colour ramp and get a gradient that actually appears even, not lumpy. For design systems and accessibility work where consistent visual weight matters, this is the difference between a palette you have to hand-tune and one that just works.

Understanding OKLCH's three components

OKLCH has three independent values:

• L (Lightness): 0 to 1, calibrated to perceptual uniformity. A change of 0.1 in L looks like the same brightness shift regardless of hue.
• C (Chroma): The intensity of the colour. Unlike HSL's saturation, chroma is not a percentage of some maximum—it is an absolute distance, and the largest value a given hue can reach differs by hue. A vivid green reaches roughly 0.29 while a vivid blue tops out lower, which is itself a truthful statement about the sRGB gamut rather than a quirk of the notation.
• H (Hue): The colour angle in degrees, 0–360, the same idea as HSL's hue but positioned on a perceptually even wheel, so a 10° step means a similar-sized shift everywhere on it.

Pure green #00FF00, for example, converts to oklch(0.8664 0.2948 142.5)—high lightness and very high chroma, which matches how startlingly bright that green looks on screen.

How exact is the conversion?

Going the other way is close to lossless, because a HEX code is by definition already inside sRGB and so can never fall outside the gamut on the way out. The only loss is decimal rounding: this tool reports L and C to four decimal places and hue to two. Sweeping 140,608 evenly spaced colours through HEX → OKLCH → HEX, only 129 came back different at all, and every one of those differed by exactly 1 out of 255 in a single channel. #3B82F6 converts to oklch(0.6231 0.188 259.81) and returns as #3B82F6, unchanged. In practice you can treat this conversion as reversible.

The gamut caveat runs the other way

The lossiness people warn about with OKLCH applies when you author an OKLCH value by hand rather than derive one from a HEX code. Chroma has no built-in ceiling, so it is easy to write oklch(0.7 0.4 150)—a green more saturated than sRGB can produce. This tool converts such values by clamping each RGB channel into range independently. That is the simple approach, not a true gamut mapping: clamping channels separately can shift the resulting hue and lightness away from what you asked for, whereas proper gamut mapping reduces chroma while holding L and H steady. If you are authoring wide-gamut colours for Display P3, check the result rather than assuming the clamp preserved your intent.

Browser support and practical use

OKLCH is supported natively in CSS by every browser released since mid-2023—Safari from 15.4, Chrome from 111, Firefox from 113. If you still support older versions, declare a fallback first and let the newer value override it: background-color: #FF6B6B; background-color: oklch(0.7116 0.1812 22.84); A browser that does not understand the second declaration discards it and keeps the HEX. Use the colour picker to sweep a hue while watching L stay fixed—seeing perceptual uniformity hold across the wheel is the fastest way to understand why it matters.

OKLCH is worth the trouble because equal lightness values look equally light, which is exactly the property a contrast check depends on. Verify a pair with the contrast checker.