Color Primer

On the last page, we learned how to change the color of the text and background on a webpage. Unfortunately, each color was denoted by a very weird 6 digit color code. Although there are numerous color tools online (eg. colorpicker.com), you will have to trust me that you can work MUCH faster if you can create and adjust color codes in your head without looking them up every time. So that’s what this page is for.  It will be worth the effort.

Cracking Da Color Code

Each color code is composed of 3 components, the Red, Green and Blue. They arranged like so:

#RRGGBB

In other words, you have a hash mark (#) followed by a 2 digit number for RED, then a 2 digit number for GREEN, then a 2 digit number for BLUE, ALWAYS in the order of RGB. It’s always 6 digits, so insert a leading zero when necessary (eg. 08 instead of 8)

That wasn’t too hard, was it? So, with that knowledge, you’ve probably guessed you can make the 3 primary color codes by setting the other colors to zero:

#990000
#009900
#000099

… And you can tweak colors by adjusting one or more of their RGB values:

#550000
#550055
#550099

.. And you can create grays by setting all the colors to the same number:

#000000
#505050
#999999

… But hold up one minute! Look at the color for #999999! If we set all the colors to the maximum, we should have gotten pure WHITE, shouldn’t we? But the color we got still looks gray. What the heck?

The answer is that 99 ISN’T the maximum. Color values can actually go as high as 255. So pure white would be 255,255,255. But since color codes only let you use two digits, how in the heck can you go past 99? Read on for the solution.

Squeezing 3 into 2 with HexaDecimal

The secret is that color codes don’t use the decimal (base 10) system that we’re used to. They use HEXAdecimal (base 16), which computers can work with much easier. Basically in decimal, we only have 10 digits, so once we count to 9, we carry a 1 and start over. In Hexadecimal, we have 16 digits(!), so we can count to 15 before carrying a 1 and starting over. What are these extra digits? You’ve probably heard of them, they’re A, B, C, D, E and F (aka 10, 11, 12, 13, 14 and 15). Ok, that probably went over your head, so let’s try to picture it.

Decimal: 0 to 255

0123456789
10111213141516171819
20212223242526272829
30313233343536373839
40414243444546474849
50515253545556575859
60616263646566676869
70717273747576777879
80818283848586878889
90919293949596979899
100101102103104105106107108109
110111112113114115116117118119
120121122123124125126127128129
130131132133134135136137138139
140141142143144145146147148149
150151152153154155156157158159
160161162163164165166167168169
170171172173174175176177178179
180181182183184185186187188189
190191192193194195196197198199
200201202203204205206207208209
210211212213214215216217218219
220221222223224225226227228229
230231232233234235236237238239
240241242243244245246247248249
250251252253254255
Hexadecimal: 0 to 255

000102030405060708090A0B0C0D0E0F
101112131415161718191A1B1C1D1E1F
202122232425262728292A2B2C2D2E2F
303132333435363738393A3B3C3D3E3F
404142434445464748494A4B4C4D4E4F
505152535455565758595A5B5C5D5E5F
606162636465666768696A6B6C6D6E6F
707172737475767778797A7B7C7D7E7F
808182838485868788898A8B8C8D8E8F
909192939495969798999A9B9C9D9E9F
A0A1A2A3A4A5A6A7A8A9AAABACADAEAF
B0B1B2B3B4B5B6B7B8B9BABBBCBDBEBF
C0C1C2C3C4C5C6C7C8C9CACBCCCDCECF
D0D1D2D3D4D5D6D7D8D9DADBDCDDDEDF
E0E1E2E3E4E5E6E7E8E9EAEBECEDEEEF
F0F1F2F3F4F5F6F7F8F9FAFBFCFDFEFF

Whew, crazy huh? If you count em up, there are exactly 256 numbers in each system (including zero), so they are equivalent. So the maximum hex number for our color codes is FF (which is 255 in decimal), NOT 99. And if you will notice, FF is exactly 2 digits long :) Ok, your mind may still be blown that there is a whole different counting system out there, so let me boil it down for you.

All you REALLY have to know about Hexadecimal

And with that, you should be able to create and use all 16,777,216 color codes in your head without looking a single one up!  In fact, if you look at the sample CSS file from the last exercise, you should now be able to form a rough guess of what each color is just from the code (eg. hmm, #AA3355 looks reddish) .  Cool!

Prev Page: Intro to CSS
Next Page: Common CSS Properties