Colour converter: HEX, RGB and HSL
Type a colour in HEX, RGB or HSL, or pick one, and get every format ready to copy, plus contrast checks for text.
Loading tool…
How do HEX, RGB and HSL relate?
They describe the same colour in different ways. RGB gives the amount of red, green and blue from 0 to 255. HEX writes those same three numbers in hexadecimal, so #FF8000 is rgb(255, 128, 0). HSL describes the hue (0–360°), saturation and lightness, which makes it easy to create lighter or darker versions of a colour.
The contrast ratio shows whether text in this colour is readable on white or black backgrounds. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.
How it works
Enter a colour
Type HEX, RGB or HSL, use a colour name, or pick one.
See every format
HEX, RGB and HSL update together.
Copy the code
CSS-ready values in one click.
Guide
- HEX, RGB and HSL colour codes explained
How HEX, RGB and HSL colour codes relate, how to convert between them, and what WCAG contrast ratios mean for readable text.
Questions
How do I convert HEX to RGB?
Type the HEX code, such as #1E90FF, and the RGB value appears straight away: rgb(30, 144, 255).
Does it support transparency?
Yes. 8-digit HEX (#RRGGBBAA), rgba() and hsla() keep the alpha value.
What does the contrast ratio mean?
How readable text in this colour is against white or black. 4.5:1 or more passes WCAG AA for normal text.