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.
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:
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
03, all the way to
#ff0000 has as much red as possible (
ff), no green (
00) and no blue (also
00). In other words, it's fully red.
#ffff00 is likewise as much red as possible, as much green as possible and no blue. Red and green together make yellow.
#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.
#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.
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.
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:
Efor red, which is not fully red (that would be
F) but very close to it.
- Same for green which also has an
- 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,
12for red, so basically no red
34for green, so a little bit of green
45for 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!