HEX Color Codes Explained

How to read a HEX code

A HEX code is a # followed by six hexadecimal digits, written #RRGGBB. Each pair of digits sets the strength of one light channel on a scale from 00 (none) to FF (full). Here is royal blue, #4169E1, split into its three channels:

So #4169E1 is the same color as rgb(65, 105, 225): a little red, some green and a lot of blue, which is why it looks blue. You can see it on its own page: Royal Blue.

Hexadecimal in a minute

Hexadecimal counts in sixteens instead of tens. After the digits 0 to 9 it uses the letters A to F for the values 10 to 15. Two hex digits can therefore hold 16 × 16 = 256 different values, from 0 to 255, which is exactly the range of one color channel. Three channels give 256 × 256 × 256 = 16,777,216 possible colors.

• 00 is 0: the channel is off.
• 80 is 128: about half strength.
• FF is 255: the channel is fully on.

In each pair, the first digit counts sixteens and the second counts ones. E1 is 14 × 16 + 1 = 225, because E stands for 14.

Common HEX codes

Mixing the three channels at full strength or zero gives the basic colors. Equal channels always give a gray.

Shorthand and transparency

Three-digit shorthand. When each pair is two identical digits, CSS lets you write one digit per channel: #F80 means #FF8800. A color such as #4169E1 has no shorthand because its pairs are not doubled digits. Many teams skip shorthand so that every color in a style sheet is written the same way.

Transparency. Add two more digits at the end to set alpha (opacity): #RRGGBBAA. #4169E180 is royal blue at about 50% opacity, because 80 is 128 out of 255, or 50.2%. A four-digit form, #RGBA, also exists. Current major browsers support both.

Letter case does not matter: #4169e1 and #4169E1 are the same color. This site shows codes in capital letters.

Converting by hand

To turn a decimal channel value into hex, divide it by 16. The whole number is the first digit and the remainder is the second. Using the channels of royal blue:

1. 65 ÷ 16 = 4 remainder 1, so red is 41.
2. 105 ÷ 16 = 6 remainder 9, so green is 69.
3. 225 ÷ 16 = 14 remainder 1, and 14 is the letter E, so blue is E1.

Put the pairs together and you get #4169E1. To go the other way, multiply the first digit by 16 and add the second. Or skip the arithmetic: the HEX to RGB converter and the RGB to HEX converter work in both directions.

HEX, RGB or HSL?

All three describe the same colors, so the choice is about convenience. HEX is short and easy to copy, which is why it is common in design hand-offs and style sheets. RGB is easier to read when you want to see how much of each channel there is. HSL is the easiest to adjust by hand, because lightness and saturation are separate numbers. Use the format your team prefers and convert when you need to; the color converter shows all of them at once.

Common mistakes

• Leaving out the #. In CSS, 4169E1 on its own is not a valid color value.
• Wrong length. Valid lengths are 3, 4, 6 and 8 digits. A 5- or 7-digit code is invalid.
• Letters beyond F. HEX only uses 0 to 9 and A to F, so #4169G1 is not valid. A common slip is typing the letter O instead of the number 0.
• Judging closeness by looking at the digits. The first digit of each pair matters most. #4169E1 and #4169E2 are practically identical, but #4169E1 and #9169E1 are clearly different.