How hexadecimal notation works for CSS colors

Hexadecimal notation are colors that start with a "#". For example, #ff0000 is red and #ff00ff is pink. But how do I know which colors they are? Read on to find out.

How hecadecimal works

Each color starts with a #. Then there are three pairs of numbers, where each pair is the red, green and blue component of a color.

Visually, that looks like this:

	red	green	blue
#	00	00	00

These numbers are in hexadecimal (16 steps), so they don't count from 0 to 9 like we do, but from 0 to F. To make up for the missing numbers after 9, they go to "A", "B" all the way to "F". It doesn't matter if you use lower case or uppercase.

Because there's a pair of numbers it means there are 255 steps, from 00, to 02, 03, all the way to FF.

How does that make colors?

The color #ff0000 has as much red as possible (ff), no green (00) and no blue (also 00). In other words, it's fully red.

The color #ffff00 is likewise as much red as possible, as much green as possible and no blue. Red and green together make yellow.

Lastly, #ffffff is all red, all green and all blue or in other words, full white (and #000000 is full black).

When all the colors are the same it means not one color is more visible than the other, making the result grey. #111111, #666666 and #9a9a9a are all shades of grey. Likewise, when the numbers are close together, they are desaturated (closer to gray)

In hexadecimal notation, 88 is the middle point . Anything above that is light, anything below it is dark.

Color notation variations

In CSS there are three variations on the hexadecimal notation.

You can add a fourth pair of numbers, which correspond to the Alpha of a color, the transparency. So #ff000088 would be fully red at half transparency.

There is also the short notation, which has just three numbers. In it #f00 is the same as #ff0000. The single numbers are automatically expanded by browsers.

Likewise this three number notation can also get a fourth number that encodes the transparency. #f008 is fully red at half transparency.

"Reading" a color

When I read a color, I find it most useful to ignore each second number in a pair since it doesn't have a drastic effect.

So for example the color#e5e7b1 would be:

• E for red, which is not fully red (that would be F) but very close to it.
• Same for green which also has an E
• The blue component is a B, so it has a bit less blue.

The result of this is then a light yellow.

And fo another color, #123456:

• 12 for red, so basically no red
• 34 for green, so a little bit of green
• 45 for blue, so a bit more of blue

All are way below 88 though, so this would be a dark, somewhat desaturated (since the colors are close to each other) blue.

This was adapted from an explanation I gave to someone not able to see colors but that still wanted to understand how they worked. I hope this is useful to other people as well!