When I help people with web pages, I encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the things that most people have a hard time grasping is what HTML Color Codes mean and how they work.
HTML Color Codes are 6 characters wide and look like “#80FF12″. This is really made up of 3 2-digit hex numbers that represent Red, Green, and Blue. I probably just lost a good portion of the readers, didn’t I? Let me back up and explain some things about hex values and color.
How to describe a color using numbers? There are a lot of ways to specify a particular color, but one of the ways that’s used with computers is to specify the values of Red, Green, and Blue to mix together to achieve the desired color. As we vary the amounts of Red, Green, and Blue we can create most any color you desire.
Why does this relate to computers? Computer displays, TVs, LCDs, and other “projected light” display devices use pixels to display what you see on the screen. The color value for those pixels is specified in a RGB (Red, Green, and Blue) value. For example, if your PC monitor is set to 1024 x 768 resolution, then there are 768 lines (going across your screen from top to bottom) on your screen, each line has 1024 pixels or little dots in it. Each of those pixels or little dots is actually made up of three smaller dots or light sources: a red one, a green one, and a blue one.
Ink is different. Printers that you use with your computer generally specify color as a four (or more) color “reflective” ink value made up of Yellow, Magenta, Cyan, and Black which is abbreviated as YMCK. Your computer uses formulas to convert the RGB values to CMYK values so that you can print what you see on your screen accurately.
How does the computer represent an RGB color value? As 3 separate values (one for Red, one for Green, and one for Blue) and each one ranges between 0 and 255. If you count the 0 as a value, that’s a total of 256 possible values. When you put the Red, Green, and Blue values together to represent a color, you get a possibility of 16.7 million colors (256 x 256 x 256). That’s a lot of colors and most people consider this to be “true” color because it can represent most photographs and images.
OK then, what is a Hex value? I’m glad you asked! Your computer stores information as single ones and zeros. Each of these tiny single values is called a “bit”. We then combine 8 of these “bits” to make a “byte”. So a byte is 8 bits. If you recall from high school math, you can count in various “bases”. We normally use base 10 or “decimal”, which uses 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 to represent a number. Likewise, if we use the ones and zeros I just mentioned, we’re talking about just two possible values for each digit, 0 or 1, and this is called base 2 or “binary”. However, in computers, we also use base 16, or hexadecimal (hex for short) because it packs more values into a single space. Hex uses the following digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. To represent the number 128 in decimal or base 10 takes 3 digits (128), in binary it takes 8 digits (10000000), and in hex or base 16 it takes just 2 digits (80). So by using hex values we save storage space and gain efficiency.
OK, my head hurts now, how does this relate to HTML color codes? HTML colors codes are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.
000000 is black (0′s for all three colors)
FFFFFF is white (255′s for all three colors)
FF0000 is all RED (255 for Red, 0 green, 0 blue)
00FF00 is all GREEN (0 Red, 255 green, 0 blue)
0000FF is all Blue (0 red, 0 green, 255 blue)
FFFF00 is Yellow (255 red, 255 green, and 0 blue)
808080 is a gray (128 red, 128 green, and 125 blue)
Generally, in HTML, you also put a “#” in front of the color code, but this is not necessary when you specify all 6 digits. If you make profiles for mySpace.com, leave off the “#” too because they filter them and it won’t display the color correctly if you use the “#”.
You can use the calculator that comes with Microsoft Windows to convert between Decimal and Hex values. Open the calculator and select View and then Scientific. Once you do this, you’ll see more buttons and controls on the calculator. Clíck “Dec” and the key in a number. Now clíck “Hex” and it’ll convert the number to hex. To convert from Hex to Dec, clíck on “Hex”, key in the number, and then clíck “Dec”. Sometimes you’ll get a color specification in Decimal, for example (128, 30, 80) and you can use this method to convert it to hex (80, 1E, 50) which would look like this for your HTML color #801E50.
I hope you understand more about HTML Color Codes and how colors are stored and specified in computers.