How to use the Color Code Converter
- Click Pick a color to choose a color, or paste a HEX, RGB or HSL value into the Enter a color code box.
- The table shows the HEX, RGB, HSL, HSV and CMYK values. Click Copy next to any of them to copy it.
- Under text contrast, see whether white text or black text is easier to read on that color.
- In the palette below, click a lighter tint or darker shade of the same color to select it.
How to convert HEX to RGB
A HEX code #RRGGBB writes the red, green and blue values as two hexadecimal digits each (00 to FF, which is 0 to 255 in decimal). Split the code into pairs and convert each pair to decimal to get RGB.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
To go from RGB to HEX, convert each value into two hex digits and join them. 37 → 25, 99 → 63 and 235 → EB, so rgb(37, 99, 235) is #2563EB. A 3-digit HEX code such as #F80 is shorthand: write each digit twice to get #FF8800. If you want to check the hexadecimal math yourself, try the number base converter.
How are HSL, HSV and CMYK different?
| Format | What it describes | Where it's mostly used |
|---|---|---|
| RGB / HEX | Strength of the three primary colors of light (0–255) | Websites, screen design |
| HSL | Hue (0–360°), saturation, lightness | CSS, when you want to adjust only lightness |
| HSV (HSB) | Hue, saturation, value (brightness) | Color pickers in graphics apps such as Photoshop |
| CMYK | Proportions of four ink colors |
The CMYK values here are approximations calculated from RGB with a standard formula. Real printed color depends on the paper and the printer's color profile, so for important print jobs, check the color specifications your print shop uses.
The 4.5:1 contrast rule and choosing a text color
The Web Content Accessibility Guidelines (WCAG 2.1) recommend a contrast ratio of at least 4.5:1 (level AA) between normal text and its background. Large text (about 24px and up, or 18.66px and up in bold) needs at least 3:1. A ratio of 7:1 or more meets the stricter AAA level.
Contrast is calculated from the relative luminance L of the two colors: (lighter L + 0.05) ÷ (darker L + 0.05). White on black gives the maximum ratio of 21:1. When you choose colors for a button or banner, pick the text color marked AA in the results above, and most people will find it easy to read.
Many organizations aim for WCAG 2.1 AA, and accessibility rules in several countries refer to it, including the ADA and Section 508 in the US, the Equality Act in the UK, the Accessible Canada Act and the Disability Discrimination Act in Australia.
How to use color codes in CSS
You can paste the converted values straight into CSS. All three of these give the same color:
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
For a semi-transparent color, add the opacity after a slash, as in rgb(37 99 235 / 50%), or add two more digits to the HEX code, as in #2563EB80 (80 is about 50% opacity).
Using tints and shades
The palette builds tints by mixing your color with white and shades by mixing it with black. This gives you a set of related colors for hover states, borders, backgrounds and dark-mode variants that all match your main color.
Click any swatch to make it the current color. All the codes and the contrast check then update for that color.