What is a HEX color code?

A hex colour code is three numbers written in base sixteen, one for each of the red, green and blue lights that make up a pixel. #3498db is red 52, green 152, blue 219, a medium blue. Everything else is detail.

Counting in sixteen

Ordinary numbers use ten digits, 0 to 9. Hexadecimal uses sixteen, so after 9 it continues with the letters a to f. Counting up goes 8, 9, a, b, c, d, e, f, and then rolls over to 10, which in hex means sixteen.

Two hex digits therefore cover 0 to 255, which is exactly the range of one colour channel and exactly what fits in one byte. That is the whole reason the format exists: three bytes of colour data map onto six characters with nothing wasted.

Reading a code by eye

Split the six digits into three pairs (red, green, blue) and a few things become readable immediately:

• All three pairs equal means a neutral grey. #808080 is mid-grey, #e0e0e0 is a light grey.
• Which pair is largest tells you the rough hue. Largest red is reddish; largest green and blue together is cyan.
• The first digit of each pair carries most of the weight. It is worth sixteen times the second, so #3a... and #3f... are similar while #3a... and #8a... are not.
• The overall range tells you the lightness. Codes starting with 0 or 1 are dark; e or f is light.
• The spread between pairs is saturation. Close together is muted; far apart is vivid. #7a8090 is a dull blue-grey; #1080ff is a strong blue.

To estimate a pair as decimal, multiply the first digit by sixteen and add the second. So 34 is 3 × 16 + 4 = 52, and db is 13 × 16 + 11 = 219.

The three-digit shorthand

#39c is a legal colour, and means #3399cc: each digit is doubled. It only works when both digits of every pair already match, so it can express 4,096 colours out of the 16.7 million available. It is convenient for a handful of round values and useless for anything sampled from a photograph.

The alpha byte

A fourth pair sets opacity: 00 is fully transparent, ff is fully opaque, and 80 is about half. #3498db80 is that blue at roughly 50 percent.

There is a four-digit shorthand too: #39c8 expands to #3399cc88. Every current browser supports both, and eight-digit hex is often tidier than switching a whole stylesheet to rgba().

One thing to keep straight: alpha is not part of the colour. It says how much of whatever is behind should show through. Two colours can only be meaningfully compared (for contrast, for example) after alpha has been resolved against a real background.

Case, and the hash

#3498DB and #3498db are identical to every browser and every tool. Choose one and stay consistent; mixed case in a stylesheet makes searching harder for no benefit. The leading hash is required in CSS and in HTML attributes, but most tools accept a code without it and add it back.

Named colours

CSS defines around 148 keywords, such as tomato, rebeccapurple and cornflowerblue, each equal to one specific hex value. They are convenient for sketching, but they are a fixed and rather arbitrary list inherited from early graphics systems, and almost no colour you sample will be one of them.

That is why a tool should never report a keyword as the name of a sampled colour unless it genuinely matches. A closest match is useful information as long as it is labelled as a closest match, with the distance shown.

Why hex survived

Hex is not the most readable notation, and it is not the easiest to edit. It survived because it is short, exact, and impossible to misinterpret. Copy six characters and the colour arrives intact: there are no separators to escape, no percentages to misplace and no ambiguity about ranges. For carrying a colour from one place to another it is still hard to beat.

When you need to change a colour rather than move it, convert to HSL, make the change, and convert back. The converter does the round trip, and the hex picker shows the decimal value of each pair as you type.