Colour Converter

What this does

Paste a colour in whatever form you have it — a hex code from a design file, anrgb() string out of a stylesheet, an OKLCH value from a modern palette, or a plain keyword like rebeccapurple — and this converts it into every other format at once. It also shows you the two things people usually go looking for next: how the colour performs against white and black text, and what a full range of shades and tints of it looks like.

Conversions are exact in both directions. Round numbers are used where they land on the same colour — red really is hsl(0 100% 50%) — and extra decimals appear only when they're needed, so a value you copy out and paste back in returns the colour you started with rather than one a shade off.

How to use it

1. Type or paste a colour into the box, or pick one with the swatch beside it.
2. Drag the opacity slider if you need a semi-transparent version.
3. Press Copy next to whichever format you need.

The formats, briefly

HEX is the one everything understands: two hexadecimal digits each for red, green and blue. Eight digits adds opacity on the end. It's compact and universal, and tells you nothing about the colour by looking at it.

RGB is the same three channels written as numbers from 0 to 255. Useful when something needs the values separately — a canvas, a shader, a spreadsheet.

HSL rearranges those channels into hue, saturation and lightness, which is far easier to reason about: you can nudge a hue or knock the saturation back without solving simultaneous equations. Its weakness is that lightness is arithmetic rather than perceptual — yellow at 50% lightness looks much brighter than blue at 50%.

HWB takes the same hue and asks how much white and how much black are mixed into it, which is how paint works and how many people actually think about tints and shades.

OKLCH and OKLab fix HSL's blind spot. They're built on a model of how the eye responds, so equal steps of lightness look equal, and two colours the same distance apart look about equally different. That's why the shade ramp above is generated in OKLCH: doing it in HSL turns the middle of the ramp muddy. Every current browser supports both.

CMYK is here because people ask for it, with a caveat: a real conversion for print depends on the paper, the ink and an ICC profile, none of which a web page has. The numbers shown are the standard arithmetic conversion — fine for a rough idea, not something to send to a press.

Reading the contrast figures

The ratio compares your colour with white and with black, on the WCAG 2 scale that runs from 1 (identical) to 21 (black on white). Body text needs 4.5:1 to pass AA and 7:1 for AAA. Large text — from about 24px, or 18.66px if it's bold — needs 3:1 and 4.5:1 respectively. The ratio works in both directions, so 6.2:1 against white means the same whether the colour is the text or the background.

If you set an opacity below 100%, the ratio is worked out on the colour as it would actually appear over that backdrop, not on the underlying colour. A translucent colour is only as readable as what shows through it.

Is it private?

Yes. Every conversion happens in JavaScript inside this page — nothing is sent anywhere, and the tool keeps working if you go offline after the page has loaded. The colour is kept in the address bar so you can bookmark or share a link to it, and that link, like everything else here, is only ever read by your own browser.

Frequently asked questions

What can I paste in?

Hex in three, four, six or eight digits, with or without the #. Any ofrgb(), rgba(), hsl(), hsla(),hwb(), oklch() and oklab(), in both the modern space-separated syntax and the older comma-separated one. Percentages, decimals, and hues indeg, rad, grad or turn. All 148 CSS colour keywords, plus transparent.

Why did my OKLCH colour change slightly?

OKLCH can describe colours more vivid than an ordinary screen can show. When you enter one, it's brought back into the sRGB range by lowering its chroma while holding the hue and lightness, which is what browsers do too — and a note appears under the swatch to say it happened. Reducing chroma keeps the colour recognisably itself; clipping the channels instead would quietly shift the hue.

What does "closest name" mean?

CSS has 148 named colours, and most colours aren't one of them. When yours isn't, the nearest keyword is shown instead, measured perceptually rather than numerically, so it's the one a person would agree is closest. It's a description, not a substitute — copying it gives you that keyword's colour, not yours.

Can I convert several colours at once?

Not yet. One at a time, and the address bar keeps the current colour, so several tabs works surprisingly well in the meantime.