Kilian Valkhof

Posted on

# 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.

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.

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!