Colour converter
Convert a colour between HEX, RGB and HSL, pick it, and check its WCAG contrast with white or black text. Free.
- Free
- No sign-up
- No file uploaded
- Windows, Mac, Android, iPhone
Loading the tool…
About this tool
Switch a colour between CSS formats (HEX, RGB, HSL, transparency included) and instantly check whether white or black text stays readable on it, against the WCAG accessibility thresholds (AA and AAA).
How to use
- Paste a colour or pick it.
- Copy the format you need.
- Check the text contrast.
Common problems and fixes
“Unrecognised format”
Write the colour as in CSS: #3b82f6, rgb(59, 130, 246) or hsl(217 91% 60%).
The colour looks different in my design app
Design apps sometimes use a colour profile other than sRGB, the web's.
The contrast is insufficient
Darken or lighten the colour (lower the lightness in HSL) until you reach 4.5:1.
Frequently asked questions
What is level AA?
A contrast of at least 4.5:1 for normal text, required by the WCAG accessibility guidelines. AAA requires 7:1.
What do 8-digit HEX codes mean?
The last two digits are the opacity: #3b82f680 is the same colour at 50%.
Why use HSL?
Hue, saturation and lightness are intuitive: you lighten a colour by changing a single number.
Does the picker read the screen?
No, it opens your system's colour picker.
Related searches
Still stuck?
Ask on the forum: the category, the tool, your device sheet and the test result will be filled in for you.