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 beF
) 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!
Discussion (0)