Quick answer: HEX, RGB and HSL are three ways to write the same color. HEX uses base-16 digits (#2B59FF), RGB gives red, green and blue from 0 to 255 (rgb(43, 89, 255)), and HSL gives hue, saturation and lightness (hsl(227, 100%, 58%)). For readable text, the WCAG guidelines ask for a contrast ratio of at least 4.5:1.
Designers hand over colors as HEX codes, browsers report RGB, and design tools often think in HSL. Moving between the three by hand is slow, so this tool keeps them in sync: change any one and the others update at once.
It also tells you how readable text would be on your color. Contrast ratios for white and black text are shown against the WCAG accessibility guidelines, which helps when choosing button and background colors that everyone can read.
The three formats
- HEX writes the red, green and blue amounts in base 16, for example
#2B59FF. The short form#25Fis the same as#2255FF. - RGB gives red, green and blue as numbers from 0 to 255.
- HSL gives hue (the color angle from 0° to 360°), saturation (how vivid, 0 to 100%) and lightness (0% is black, 100% is white). It makes it easy to create lighter or darker shades of the same color by changing only the lightness.
What the contrast ratio means
The WCAG contrast ratio compares the brightness of two colors, from 1:1 (identical) to 21:1 (black on white). Normal text should reach at least 4.5:1 for level AA, and 7:1 for the stricter AAA level. Large text (about 24 px, or 19 px bold) needs 3:1 for AA.
A worked example
Example. The blue #2B59FF is rgb(43, 89, 255) and hsl(227, 100%, 58%). Against white it has a contrast ratio of 5.28:1, which passes the WCAG AA level (4.5:1) for normal text, so white text on this blue is readable.
Common colors in every format
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Standard CSS color names and their values.
| WCAG 2.2 requirement | Minimum contrast ratio |
|---|---|
| Normal text (AA) | 4.5 : 1 |
| Large text, about 24 px or 19 px bold (AA) | 3 : 1 |
| Normal text (AAA) | 7 : 1 |
| Buttons, icons and form borders (AA) | 3 : 1 |
Black text on a white background has a contrast ratio of 21 : 1, the maximum.
Common mistakes to avoid
- Choosing text and background colors by eye. Two colors that look fine to you can be hard to read for people with low vision, so check the contrast ratio.
- Editing a HEX code by hand to make it lighter. Use HSL and change the lightness instead, which keeps the same hue.
- Expecting colors to match across screens and print. Displays differ in brightness and color range, and printers use different pigments.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from base 16 to a number. #2B59FF is 2B, 59, FF, which is 43, 89 and 255. Or just type the HEX code here and read the RGB values.
What is HSL good for?
HSL is the easiest format for making variations. Keep the hue the same and raise the lightness for a lighter tint, or lower it for a darker shade.
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA. For AAA, aim for 7:1 and 4.5:1 respectively.
Why do colors look different on different screens?
Screens differ in brightness, color accuracy and settings, so the same code can look a little different. The numbers are exact, but what you see depends on the display.
People also search for this as: HEX to RGB, RGB to HEX, HSL to RGB, color code converter, color contrast checker, CSS color converter.
Sources and further reading
- W3C WCAG 2.2: Understanding Contrast (Minimum)
- MDN: CSS color values
- HSL and HSV color models (Wikipedia)
Formulas on this page are checked by automated tests against independent references. See how we test our tools.