Colour Converter
Hex, RGB and HSL for a colour, with its complementary and the contrast against black and white.
Results
What this tool does
The same colour has three names depending on who is asking: a designer writes hex, a stylesheet accepts all three, and anyone trying to make a colour lighter or more muted needs HSL, because that is the only one of the three where those are single numbers you can turn. Paste a colour in any of the usual forms — with or without the hash, three digits or six, or as three numbers — and it comes back in all of them, together with the relative luminance that decides whether text on top of it should be black or white.
Formula
converts between hexadecimal, RGB and HSL, and works out the WCAG luminance
Variables
| Symbol | Meaning | Unit |
|---|---|---|
color | Colour | — |
HX | Hexadecimal | — |
RG | RGB | — |
HS | HSL | — |
CP | Complementary colour | — |
ON | Readable text colour | — |
CW | Contrast against white | — |
CB | Contrast against black | — |
LU | Scene luminance | — |
Worked example
- Colour#d1490b
- Hexadecimal#d1490b
- RGBrgb(209, 73, 11)
- HSLhsl(19, 90%, 43%)
- Complementary colour#2eb6f4
- Readable text colour#000000
- Contrast against white4.50
- Contrast against black4.67
- Scene luminance0.1834
Limitations
- The calculation runs entirely in your browser. The values you type are never sent to a server.
- The default values are typical reference figures, not measurements of your situation. Replace them with your own data whenever you have it.
Frequently asked questions
What contrast ratio do I need?
The WCAG accessibility guidelines ask for at least 4.5 to 1 between ordinary text and its background, and 3 to 1 for large text — roughly 24 px, or 19 px bold — and for the edges of buttons and form fields. The two figures here are the ratio against white and against black, so the larger of them tells you which way round the text should go.