Color Code Converter
Paste a colour in any form — HEX, RGB, HSL or a CSS name — and get the other formats, a live swatch, and the contrast figures that decide whether text on it can be read.
| Format | Value |
|---|
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, so a figure below 3 means that text cannot be read comfortably by a lot of people.
How to use it
- Type or paste a colour in any form you have it: a hex code, an
rgb(), anhsl(), or a CSS name such astomato. - Read the other formats off the table, and copy the one you need.
- Look at the two contrast figures before you put text on that colour.
Why HSL is worth learning
HEX and RGB say the same thing in different alphabets: how much red,
green and blue to mix. They are exact and completely unhelpful when you
want a slightly darker version of a colour, because there is no way to
look at #3b82f6 and know which of the six digits to nudge.
HSL splits a colour into three things a person can actually reason about. Hue is the position on the colour wheel from 0 to 360 — red at 0, green near 120, blue near 240. Saturation is how strong it is, from grey at 0% to full colour at 100%. Lightness runs from black at 0% through the pure colour at 50% to white at 100%.
That is why a whole palette is easy in HSL: keep the hue, change the lightness, and you have a matching set of shades. Do the same in hex and you are guessing.
About the contrast numbers
The two figures are WCAG contrast ratios, the same measure accessibility audits use. They run from 1:1, meaning invisible, to 21:1 for black on white. They are not a matter of taste: a ratio below 4.5 means a real number of people, including anyone reading on a phone in sunlight, will struggle with normal-sized text on that background.
Frequently asked questions
Which colour format should I use in my CSS?
Any of them - browsers treat them identically. Hex is the shortest and the most widely recognised. HSL is far easier to adjust by hand, because a lighter shade is just a bigger lightness number. If you are building a theme with variations of one colour, HSL will save you real time.
What do the three numbers in HSL mean?
Hue in degrees around the colour wheel from 0 to 360, saturation as a percentage from grey to full colour, and lightness as a percentage from black at 0% through the colour itself at 50% to white at 100%. Change only the lightness and you get a matching darker or lighter shade of the same colour.
Can I paste a colour name like tomato or rebeccapurple?
Yes. This page hands the text to the browser's own colour parser, so every syntax the browser accepts works here - all 148 CSS names, the space-separated modern forms such as rgb(59 130 246), and hex with alpha. If the browser rejects it, so does this page, and it says so instead of showing a wrong colour.
What is the contrast ratio telling me?
How readable text would be on that colour. WCAG AA wants at least 4.5:1 for normal text and 3:1 for large text; AAA wants 7:1. The page shows the ratio against both white and black so you can see which of the two is the readable choice, which is usually the only decision you need.
Why does my hex code sometimes have eight digits?
The last pair is alpha - opacity - as two hex digits, so ff is fully opaque and 80 is about half transparent. It appears here only when the colour you entered actually has transparency. Every modern browser understands eight-digit hex, so you can paste it straight into your stylesheet.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.