Convert any colour between HEX, RGB, HSL and CMYK, and check whether text in that colour is readable on your background.
Loading the tool…
Colour formats
| Format | Example | Used in |
|---|---|---|
| HEX | #1F6F5C | CSS, design tools, brand guides |
| RGB | rgb(31, 111, 92) | CSS, screens, code |
| HSL | hsl(166, 56%, 28%) | CSS, easy to make lighter or darker |
| CMYK | cmyk(72%, 0%, 17%, 56%) | Print (ask your printer for the profile) |
You can also type colour names like teal or tomato. Every CSS colour name is recognised.
Contrast rules (WCAG 2.2)
| Use | Minimum ratio |
|---|---|
| Body text (AA) | 4.5:1 |
| Large text: 18pt, or 14pt bold (AA) | 3:1 |
| Buttons, icons, input borders (AA) | 3:1 |
| Body text (AAA) | 7:1 |
Contrast matters for people with low vision and for anyone reading a phone in sunlight. Many public sector websites in the UK must meet WCAG AA.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into pairs and convert each pair from base 16: 1F = 31, 6F = 111, 5C = 92.
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
Why don't CMYK colours match on screen?
Screens mix light (RGB) while printers mix ink (CMYK), so some bright screen colours can’t be printed exactly.
Is anything uploaded?
No, it all runs in your browser.
Sources
Last updated: