Skip to the tool
DevToolBench

Colour Converter

Six notations, CSS names and WCAG contrast at once.

HEX, name, rgb(), hsl(), hwb(), oklch(), oklab()

Everything runs in your browser. Nothing you type is sent to a server.

Found a bug in this tool? Report it.

Share this tool

Every notation of the same colour

Type a value in any CSS notation and this colour converter — a "color converter" if you arrived by the American spelling, which is the one the specification itself uses — shows you the same colour in all six. Hex with three, four, six or eight digits; rgb(); hsl(); hwb(); oklch(); oklab(); and any of the 148 CSS colour names. The old comma syntax and the modern space syntax both parse, because a value copied out of a stylesheet written in 2016 is still a value.

Alongside the conversions you get two things that usually need a second tool. The WCAG contrast ratio against pure black and pure white, which is the fastest way to know whether a brand colour can carry body text at all. And the nearest CSS colour name, measured perceptually rather than by subtracting one triplet of bytes from another.

What HSL gets wrong

HSL was a good idea in 1978 and its lightness axis has been misleading people ever since. Take hsl(60 100% 50%) and hsl(240 100% 50%): both claim fifty per cent lightness, one is a yellow you can barely read black text on, the other is a blue so dark that white text sits comfortably over it. The number is a position between black and white in a cylinder built on top of RGB, not a measurement of how bright the colour looks.

That is why palettes built in HSL need hand-tuning. Rotate the hue while holding saturation and lightness fixed and you do not get a family of colours of equal weight — you get yellows that glare and blues that disappear.

Why OKLCH is the one worth learning

OKLab, published by Björn Ottosson in 2020, is a colour space fitted so that Euclidean distance inside it matches perceived difference. OKLCH is the same space in polar form, with lightness, chroma and hue as the three numbers. Its lightness really is perceptual, so a scale from oklch(20% 0.05 250) to oklch(90% 0.05 250) steps evenly to the eye, and holding lightness while rotating hue gives you accent colours that all sit at the same visual weight.

It also addresses colours outside sRGB. Display P3 covers roughly a quarter more of the visible gamut than sRGB, and OKLCH can name those colours; sRGB hex cannot. This page clips anything outside sRGB to the nearest displayable colour and tells you it has done so, because the alternative — quietly handing back a different colour — is how a brand palette drifts.

The perceptual distance is also what powers the nearest-name lookup here. Comparing colours by the distance between their bytes answers a question about storage; comparing them in OKLab answers the question you actually asked, which is which name looks closest.

Alpha, and the eight-digit hex

Every notation on this page carries alpha, and each writes it differently: a fourth number after a slash in the functional forms, two extra hex digits in the hex form. #ff000080 is red at exactly half opacity, and #f008 is the same value written short. Alpha is not a property of the colour, it is an instruction about compositing — which is why the contrast figures here are computed on the opaque colour. Contrast against a translucent colour depends on what is behind it.

Converting numbers rather than colours? The number base converter handles the hex-to-decimal side of the same problem, and the case converter is the one for renaming the tokens once the palette is settled.

Frequently asked questions

Why is the tool spelled colour and the search term spelled color?

The CSS keyword and every function name in the specification use the American spelling, so `color` is what you type in a stylesheet and what almost everybody searches for. The page is written in British English because the rest of this site is. Both spellings mean the same tool, and neither changes a single value it produces.

What makes OKLCH better than HSL for picking a palette?

OKLCH is perceptually uniform, which means equal steps in its lightness axis look like equal steps to a person. HSL is not, so two colours with the same declared lightness can differ enormously in how bright they appear. If you build a scale by holding lightness constant and rotating the hue, OKLCH gives you a set that reads as one family and HSL does not.

Why did my oklch() value come back as a different colour?

Because the colour you asked for is outside the sRGB gamut and the preview clipped it to the nearest colour a standard screen can display. OKLCH can address colours that no sRGB monitor can show, including much of Display P3. When that happens the tool says so rather than quietly returning something else.

What do the last two digits of an eight-digit hex value mean?

They are the alpha channel as a byte, from 00 for fully transparent to ff for fully opaque. A four-digit value is the same idea with each digit doubled, so #f00c expands to #ff0000cc. Support is universal in current browsers, but the eight-digit form is still worth avoiding in any file an older build tool will parse.

Is the contrast figure enough to pass an accessibility audit?

It is the WCAG 2 ratio, computed the way the specification defines it, and it is the number an auditor will quote. It is not the whole audit. The ratio says nothing about font weight, about text over a photograph, or about whether a colour is the only thing distinguishing two states — and WCAG 3 is expected to replace the formula entirely with a model that accounts for how the eye handles light text on dark backgrounds.

Related tools

Updated