Developer Tools
Colour Converter (HEX, RGB, HSL)
Convert a colour between HEX, RGB and HSL, see it as a swatch, and check its contrast as text on white and black.
- Free
- No sign-up
- Runs in your browser
A hex code (#1a73e8), rgb(26, 115, 232) or hsl(214, 82%, 51%).
Your colour is read in this page and is never sent anywhere.
- HEX
#1a73e8- RGB
rgb(26, 115, 232)- HSL
hsl(214, 82%, 51%)
As text colour (WCAG contrast)
| On | Ratio | AA text | AA large | AAA text |
|---|---|---|---|---|
| white | 4.51:1 | Pass | Pass | Fail |
| black | 4.66:1 | Pass | Pass | Fail |
How to use Colour Converter (HEX, RGB, HSL)
How to use this tool:
- Type a colour as a hex code (#1a73e8), rgb(26, 115, 232) or hsl(214, 82%, 51%), or use the colour picker.
- Read the colour as HEX, RGB and HSL and press a Copy button to copy one.
- Look at the contrast table to see whether the colour passes WCAG for text on white and on black.
Details. Hex codes may have 3, 4, 6 or 8 digits, with or without the #. The comma form and the modern space-and-slash form of rgb() and hsl() both work, and a transparency value is kept. Results are rounded to whole numbers.
Contrast. The ratio follows the WCAG 2.2 formula. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 for normal text.
Examples
#1a73e8
rgb(26, 115, 232) and hsl(214, 82%, 51%).
hsl(0, 100%, 50%)
Pure red: #ff0000 and rgb(255, 0, 0).
#767676 on white
A contrast ratio of about 4.54:1, the lightest plain grey that passes AA for normal text.
Frequently asked questions
Are HEX, RGB and HSL different colours?
No. They are three ways of writing the same colour, so converting between them loses nothing apart from rounding in HSL.
What do the 4 and 8 digit hex codes mean?
The extra digits are transparency. 00 is fully transparent and ff is fully opaque.
What contrast do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1.
Why does the contrast ignore transparency?
A partly transparent colour depends on what is behind it, so the table treats the colour as solid.
Guides about Colour Converter (HEX, RGB, HSL)
Related tools
Base64 Encoder and Decoder
Encode text to Base64 or decode Base64 back to text, including the URL-safe form and non-English characters.
aGVsbG8=UtilitiesUnit Converter
Convert length, weight, temperature, area, volume and speed between metric, imperial and Indian units.
Every unitUtilitiesPassword Generator
Make a strong random password of 8 to 64 characters in your browser, with nothing stored or sent.
Strong passwords