Understanding Hex Color Codes

In CSS there are two main ways of selecting colors. The first is to simply use the color name, like this:

background-color: blue;

Obviously this is limited. A computer can display millions of different colors, and remembering the names of every single one of them is impossible. And spare a thought for that poor guy whose job it is to come up with the names!

This is why CSS uses hex codes, like this:

background-color: #DDEEFF;

#DDEEFF

#DDEEFF

 

I’m sure you’ve all used hex codes before. You probably use a hex color picker to generate your codes. But it’s likely you have no idea what a hex code means or how it’s generated. Learning this is surprisingly easy and satisfying, and once you’ve got your head around it you’ll be able to write your own hex codes without the need for a color picker.

Hex Codes Represent Red, Green and Blue

A computer screen displays a color by combining red light, green light and blue light. 100% red, 100% green and 100% blue produces white. Zero red, zero green and zero blue produces black. In fact, equal levels of red, green and blue, whatever that level may be, will always produce a shade of gray.

The six digits of a hex code are in fact three two-digit numbers, each representing the level of red, green and blue. So #000100 is zero red, the darkest possible shade of green without being totally black, and zero blue. #010101, because the three values are all equal, is the darkest possible shade of grey, and #020202 is the second darkest. And of course #000000 is black. But what about #FFFFFF for white – what do the letters mean?

Hex Codes Use The Hexadecimal System to Minimize Length

There are 256 possible shades each of red, green and blue (0 through 255). If we wanted to produce white (the brightest levels of all three colors combined), we’d need to write #255255255. That’s nine digits long.

Hex codes use the hexadecimal number system to make it possible for 256 numbers to be represented with only two digits. Instead of counting 0 through 10 like our regular decimal number system, it counts 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F and then 10, followed by 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F and then 20. Make sense?

This means that 256 numbers can be represented using only two digits, instead of the 100 that are possible with our decimal number system (0 through 99). So the highest possible two digit number is not 99 but FF (equal to 255). This is why white is #FFFFFF, pure red is #FF0000, pure green #00FF00 and pure blue #0000FF.

#FFFFFF, #FF0000, #00FF00 and #0000FF

#FFFFFF, #FF0000, #00FF00 and #0000FF

 

Learn more about the hexadecimal system and its relationship with the binary system.

 

Hex Codes Can Be Abbreviated

You may have seen hex codes like #FFF, #000, #0F0 or even #ABC that only use three digits. This is just a shorthand of writing a code which is three pairs of identical digits: #FFFFFF, #000000, #00FF00 or #AABBCC.

#FFF, #000, #0F0 and #ABC

#FFF, #000, #0F0 and #ABC

 

Come Up With Your Own Hex Codes

So now you know how a hex code is generated, it becomes possible to write your own without the need for a color picker. Of course, a color picker is still the easier option for more obscure colors, but for simple combinations like magenta (blue + red, #F0F), cyan (blue + green, #0FF) or any shade of grey (examples are #222, #555 or #CCC), knowing how hex codes work saves me a lot of time and will for you too.

#F0F, #0FF, #555 and #CCC

#F0F, #0FF, #555 and #CCC

Recommended Training – Treehouse

Treehouse

Although this site incorporates a number of different training recommendations, our top recommendation is Treehouse.

Treehouse is an online training service that teaches web design, web development and mobile development through videos, quizzes and interactive coding exercises.

Treehouse’s mission is to bring programming education to those who can’t get it, and is committed to helping its students find jobs. If you’re looking to turn programming into your career, you should consider Treehouse.

Read Code Conquest’s full Treehouse review »