If you have ever copied a color from a design tool into CSS, you have used a HEX code. A HEX color such as #4169E1 is simply a compact way of writing the three channels of an RGB color.
How a HEX code is built
A HEX code starts with # followed by six hexadecimal digits. Hexadecimal is a base-16 number system that uses the digits 0–9 and the letters A–F. The six digits are split into three pairs:
- The first pair is red.
- The second pair is green.
- The third pair is blue.
Each pair ranges from 00 (0, no light) to FF (255, full intensity). So #FF0000 is pure red, #000000 is black and #FFFFFF is white.
Converting HEX to RGB by hand
To convert a pair, multiply the first digit by 16 and add the second digit. For #4169E1:
| Pair | Calculation | Value |
|---|---|---|
| 41 | 4 × 16 + 1 | 65 (red) |
| 69 | 6 × 16 + 9 | 105 (green) |
| E1 | 14 × 16 + 1 | 225 (blue) |
The result is rgb(65, 105, 225), the CSS color Royal Blue. You can check any value instantly with the HEX to RGB converter.
Short HEX codes
When each pair has two identical digits, CSS lets you write a three-digit shorthand: #FFCC00 can be written #FC0. Browsers expand each digit by repeating it.
HEX with transparency
Modern CSS also accepts eight-digit HEX codes, where the last pair is the alpha (opacity). #4169E180 is Royal Blue at about 50% opacity. Many older tools ignore the alpha pair, so check before relying on it.
Why HEX is so popular
- It is short and easy to copy between tools.
- It is supported everywhere: CSS, SVG, design software and most programming libraries.
- It describes exactly the same colors as RGB, so nothing is lost.
The main drawback is that HEX is hard to adjust by eye. To make a color a little lighter, it is easier to switch to HSL — see our guide RGB vs HSL.
Quick checklist
- HEX codes are case-insensitive:
#ff7f50and#FF7F50are the same Coral. - Always include the
#in CSS. - Use the color picker to find a code visually.
