HEX RGB HSL Color Converter
The color converter translates any color between HEX, RGB and HSL as you type. Edit one format and the others update at once, pick a color with the picker, copy ready-to-use CSS values and see whether black or white text reads better on it, with WCAG contrast ratios.
The three formats
| Format | Example | How it works |
|---|---|---|
| HEX | #1A5A6F | Red, green and blue as two hexadecimal digits each |
| RGB | rgb(26, 90, 111) | Red, green and blue from 0 to 255 |
| HSL | hsl(195, 62%, 27%) | Hue angle on the color wheel, saturation and lightness |
HSL is handy for building palettes: keep the hue and change the lightness to get tints and shades of the same color.
Contrast and accessibility
WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text (AA). 7 to 1 meets the stricter AAA level. The tool shows the ratio of your color against white and black text so you can pick the more readable one.
Questions people ask
How do I convert HEX to RGB by hand?
Split the code into pairs and convert each from base 16 to decimal. #1A5A6F gives 1A=26, 5A=90 and 6F=111.
Why do my colors look different on another screen?
Displays differ in calibration and color profile, so the same numbers can look slightly different.
What is a good lightness for text?
Dark text on a light background works best below about 25% lightness, and the reverse above about 75%.