Colour Converter (HEX/RGB/HSL)
Convert between colour formats with a picker and contrast check.
About Colour Converter (HEX/RGB/HSL)
The same colour can be written as hex, RGB or HSL and all three are identical. HSL earns its keep when you need a lighter or darker variant: you change one number, whereas with hex you are essentially guessing.
How to use Colour Converter (HEX/RGB/HSL)
- 1
Enter a colour in any format or use the colour picker.
- 2
The other formats are computed instantly.
- 3
Check the contrast ratio against white and black for accessibility.
- 4
Copy whichever format you need.
Frequently asked questions
What contrast ratio should I aim for?
WCAG requires at least 4.5:1 for body text and 3:1 for large text. White on black is the maximum possible at 21:1.
When should I use HSL?
When building a colour scale or light and dark themes. Adjusting lightness in HSL is predictable, unlike nudging hex values.
What is an eight-digit hex code?
The last two digits carry alpha transparency. A suffix of 80, for example, is roughly fifty percent transparent.