DEV Community

loading...
Cover image for How hexadecimal notation works for CSS colors

How hexadecimal notation works for CSS colors

kilianvalkhof profile image Kilian Valkhof ・2 min read

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!

Discussion (0)

pic
Editor guide