Hex to OKLCH converter

What is oklch()?

oklch() is the CSS Color 4 way of writing a colour, and it names one by three numbers a person can reason about: lightness as a percentage, chroma as how colourful it is, and hue as an angle in degrees. oklch(62.8% 0.258 29.2) is the red you know as #ff0000.

It is worth the switch for one reason above the others: the lightness is perceptual. Two colours with the same L look equally bright, which is not remotely true of HSL — hsl(60 100% 50%) is a blinding yellow and hsl(240 100% 50%) is a dark blue, at the same stated lightness. That is why a palette built by stepping L in OKLCH looks even and one built the same way in HSL does not.

The catch is that a hex value is three whole numbers and an oklch() value is three decimals, so writing one down means deciding how many digits to keep. That decision is invisible, unlabelled in every converter we could find, and it is where the colour quietly changes.

How to use it

1. Type or paste into either field. Hex on the left, oklch() on the right; each drives the other. The oklch() field accepts what CSS accepts, including a percentage chroma and the keyword none.
2. Pick how many digits you want. Three settings: what people write by hand, one more digit on each component, and the tidy-looking round numbers. The value updates and so do the numbers underneath it.
3. Read the round-trip row before you copy. It says whether that exact text converts back to the hex you started with, and by how many units out of 255 it misses if not.

How many digits it takes

This is the measurement the page is built on. Taking 1,893,376 sRGB colours — every red, every third green and blue — converting each to oklch(), rounding it the way it would be written, and converting back:

At the precision people write by hand — lightness to one decimal of a percent, chroma to three, hue to one — 77.91 per cent come back exactly, and the worst case is out by 8 on a channel. One more digit on each component takes it to 99.92 per cent, with a worst case of 1. And the tidy-looking version, whole-number percentage and hue with two decimals of chroma, survives 1.66 per cent and can be 43 out on a channel — a visibly different colour.

For comparison, the same round trip through the HSL that every colour tool prints survives 10.58 per cent, which is the figure our hex-to-HSL page publishes. So oklch() at ordinary precision is about seven times more faithful than the notation it replaces, not less — a useful thing to know, because the decimals make it look fussier than it is.

The practical rule that falls out: two decimals on the percentage, four on the chroma and two on the hue is effectively lossless, and it costs three characters.

Honest limits

oklch() can name colours your screen cannot show, which hex cannot. Chroma has no fixed ceiling in the syntax, and most of the values you can write are outside sRGB. When that happens CSS reduces the chroma until the colour fits, holding lightness and hue — it does not clip the red, green and blue channels separately, because clipping visibly rotates the hue. This page does the same thing and tells you when it had to, and how much chroma went.

Everything here is measured against sRGB. A wide-gamut display shows more, and a browser on such a screen will render an oklch() colour this page calls undisplayable perfectly well. There is no way to ask from inside a page which gamut you are looking at with any precision, so the conservative answer is the one shown.

The conversion is the standard Oklab matrices, and it is not exact arithmetic — it is floating point through a cube root and back. Errors land far below one unit in 255, which is why the round-trip figures above are dominated by the rounding you choose rather than by the conversion.

Finally, browser support for oklch() is broad but not universal, and the sensible pattern is still a hex declaration followed by the oklch() one so older browsers take the first and newer ones the second. The hex this page gives you is exactly the fallback to use.

Why is it free?

The conversion runs in your browser, in a few lines of arithmetic. There is no server involved, so there is nothing to bill for and no account to create.

Nothing is uploaded and nothing is stored. Reload the page and it has forgotten your colour.