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:
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:
… And you can tweak colors by adjusting one or more of their RGB values:
.. And you can create grays by setting all the colors to the same number:
… 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|
|Hexadecimal: 0 to 255|
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
- Learn to count to 15 in hex: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
- Don’t wuss out and stop at 99 in your color codes. You’ll never get bright colors this way.
- FF is the maximum number in hex. You’ll need this for pure colors including white, red, blue and green.
- If you’re stuck trying to figure which of two numbers is higher (eg 6E and B3), just look at the first digit (answer: B3 is higher).
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!