Colour Converter

A colour is one thing written four ways. HEX is what a design tool hands you, RGB is what a canvas API wants, HSL is what you reach for when you need the same hue a bit lighter, and OKLCH is what you use when a whole palette has to look evenly spaced rather than merely be evenly spaced.

Type into any of the four boxes and the other three follow. Every box accepts every notation, so pasting an OKLCH value into the HEX field works and the tool tells you which format it decided you had typed.

Underneath is the number most colour pickers leave out: the contrast ratio against black and against white, with a straight pass or fail at each WCAG threshold. It is the difference between choosing a colour and knowing you can put text on it.

OKLCH gives a colour three numbers: perceptual lightness from 0 to 1, chroma (how colourful it is), and hue in degrees. The point of the space is that equal numeric steps look like equal steps. HSL does not manage that — hsl(60 100% 50%) is a blinding yellow and hsl(240 100% 50%) is a dark blue, despite both claiming fifty per cent lightness.

That is why generated palettes built in HSL lurch about in brightness, and why the same palette built in OKLCH looks even. If you are producing a scale — a hundred through nine hundred, say — set the lightness values in OKLCH and vary nothing else.

OKLCH can also name colours sRGB cannot show, which is deliberate: it is a device-independent space, and modern displays cover more than sRGB. When a value here falls outside sRGB it is clipped to the nearest colour a normal screen can produce, and the tool says so rather than quietly showing you something else.

HEX, RGB and HSL are three spellings of the same numbers, and converting between them is arithmetic that loses nothing beyond rounding to eight bits. OKLCH is a real transformation: undo the sRGB transfer function to get linear light, multiply into a cone-response space, take the cube root of each channel, multiply again into OKLab, then read off chroma and hue as polar coordinates. Going back reverses all five steps.

Values are kept as floating point right through and only rounded when a string is produced, because rounding to eight bits between steps is what makes a converter drift a unit on every round trip. All 16,777,216 sRGB colours were run through OKLCH and back, and through HSL and back: every one returns to the exact byte it started from.

The number of decimal places on the OKLCH output was chosen by measurement rather than looks. Three on the lightness percentage, five on the chroma and three on the hue return every sampled colour to the byte it started from; the tidier-looking two, four and two lose a unit on about one colour in a thousand.

The ratio compares the relative luminance of two colours and runs from 1:1, identical, to 21:1, black against white. WCAG asks for 4.5:1 for body text and 3:1 for large text — 18pt, or 14pt bold — and for interface components such as a button border or a form outline. AAA raises those to 7:1 and 4.5:1.

Showing the ratio against both black and white answers the question people actually have, which is not "is this colour accessible" but "which text colour can I put on it". A mid-tone often fails against both, and that is worth knowing before it becomes a button.

The luminance formula used is the one written into WCAG 2, including its slightly odd 0.03928 threshold. It differs from the current sRGB specification in the fourth decimal place; matching the guideline matters more than being right about it, because an auditing tool will report the guideline's number.

Alpha is carried through every notation but ignored in the contrast figures. A translucent colour has no contrast ratio of its own — it depends entirely on what is behind it — so a number there would be fiction.

HEX for anything a designer will read back to you, because it is the notation every tool shows. RGB when a value comes from or goes to code that works in channels — a canvas, an image buffer, a chart library.

HSL when you are adjusting a colour by hand and want to keep the hue while changing the lightness. OKLCH when the relationship between several colours matters: palettes, hover states derived from a base, or anywhere a set of colours has to feel consistent. Browser support for oklch() has been universal since 2023.