How to read a hex colour code
A hex colour code looks like a serial number and is actually a very short piece of arithmetic. #1a2b3c is not a name or an index into a table — it is three numbers written in base 16, and the whole notation takes about two minutes to learn properly. After that you can glance at a code and know roughly what colour it is.
Three bytes, two digits each
The six digits after the hash are three pairs. The first pair is red, the second green, the third blue, and each pair is one byte: a whole number from 0 to 255, where 0 is none of that channel and 255 is as much as the format can express.
Two digits per channel is not an arbitrary choice. One hexadecimal digit holds exactly four bits, so two of them hold eight bits, which is one byte. Three bytes gives 256 × 256 × 256 = 16777216 distinct codes, which is where the phrase "millions of colours" comes from.
Base 16, and the letters
Base 16 needs sixteen digits and the decimal system only supplies ten, so the letters a to f stand in for the values 10 to 15. Case does not matter: #4ADE80 and #4ade80 are the same colour.
To read a pair, multiply the first digit by 16 and add the second. That is it. Take #1a2b3c:
- Red is
1a:1 × 16 + 10 = 26. - Green is
2b:2 × 16 + 11 = 43. - Blue is
3c:3 × 16 + 12 = 60.
So #1a2b3c is rgb(26, 43, 60) — all three channels low, blue highest, which makes it a dark slate blue. Try it on the code you probably know best: #4ade80 is 4 × 16 + 10 = 74, 13 × 16 + 14 = 222, and 8 × 16 + 0 = 128, so rgb(74, 222, 128). Green far ahead of the other two, blue in the middle: a mint green.
Reading them without doing the arithmetic
Most of the time you do not need the exact value, only the shape. The first digit of each pair carries almost all of the information, because it is worth sixteen times the second. So scan the three odd-numbered digits and compare them.
Equal pairs mean a grey: #333333, #888888, #cccccc are dark, mid and light grey, and any code of the form where all three pairs match has no colour in it at all. A pair beginning with f is nearly maxed; a pair beginning with 0 or 1 is nearly off. #e0f2fe has three high pairs with blue highest, so it is a very pale blue. #7f1d1d has a mid red and two very low pairs, so it is a dark brick.
The three-digit shorthand
CSS also accepts a three-digit form, and it expands in a way that catches people out. #abc means #aabbcc — each digit is duplicated, not padded with a zero. It does not mean #0a0b0c.
The reason is range. Duplicating a digit d produces the byte d × 16 + d, which is d × 17. So a becomes 10 × 17 = 170, b becomes 187, c becomes 204, and #abc is rgb(170, 187, 204). The multiplier of 17 is exactly what maps the shorthand's sixteen values onto the full 0-255 scale: 0 × 17 = 0 and 15 × 17 = 255, both ends landing precisely.
Zero-padding would map the same sixteen digits onto 0 to 15 instead, so #fff would come out as rgb(15, 15, 15) — a colour indistinguishable from black. Since #fff is white in every stylesheet ever written, the duplication rule is the only one that could be correct.
The shorthand can only express colours where both digits of every pair match, which is 4096 of the 16.7 million. #4ade80 has no short form.
What the converter accepts
The free Hex to RGB converter takes a six-digit code, with or without the leading hash, and returns the CSS rgb() value. Anything that is not exactly six hex digits gets a warning rather than a wrong colour, and that is deliberate — a converter that guessed at malformed input would be worse than one that refused.
Two things it does not do. It will not expand the three-digit shorthand for you, so type out all six digits or apply the duplication rule yourself. And it does not accept the eight-digit #RRGGBBAA form that carries an alpha channel; strip the last two digits and convert the colour, then handle the transparency separately.