Color Converter
Pick a colour or type a HEX, RGB or HSL value to get all three formats, plus the WCAG contrast ratio against white and black text.
Preview
| HEX | ||
|---|---|---|
| RGB | ||
| HSL | ||
| Contrast with white text | ||
| Contrast with black text | ||
Runs in your browser. What you enter here is not sent to our server.
The three formats
- HEX such as
#2456E6: red, green and blue as two hexadecimal digits each. Compact and the most common format in design tools. - RGB such as
rgb(36, 86, 230): the same three channels as numbers from 0 to 255. - HSL such as
hsl(225, 79%, 52%): hue, saturation and lightness. Easier for creating lighter or darker versions of a colour.
About the contrast check
The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 for normal text at level AAA. The table shows how your colour performs as a background for white and for black text.
Questions about the Color Converter
Why do HSL values sometimes differ by one from another tool?
HSL values are rounded to whole numbers, and tools round slightly differently. The colours are visually identical.
Does it support transparency?
Not yet. Alpha values in rgba() or hsla() input are ignored and the solid colour is converted.