HTML Color Codes Explained in Plain English.

When I help people with web pages, I always 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 first things that people have a hard time grasping is what HTML Color Codes mean and how to work with them. Learn more about HTML and CSS with my online training course: www.WebSiteTrainingOnline.com.

HTML Color Codes are 6 characters wide and look like this "#80FF12". They are really made up of 3 2-digit hex numbers that represent Red, Green, and Blue. Ok... I just lost a good portion of the crowd didn't I? Let's back up and explain a few things.

How do you describe a color with numbers? One of the ways that's used with computers is to specify the values of Red, Green, and Blue that are mixed together to achieve the desired color. As you vary the amounts of Red, Green, and Blue you can create most any color. How and 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 of three smaller dots or light sources: a red one, a green one, and a blue one.

Ink however works differently. Printers that you use with your computer generally specify color as a four (or more) color "reflective" ink value made up of Cyan, Magenta, Yellow, and Black which is abbreviated as CMYK. Your computer uses various formulas to convert the RGB values to CMYK values so that you print an accurate representation of what you see on your screen.

How does the computer represent a RGB color value? RGB values are stored as 3 separate values (one for Red, one for Green, and one for Blue) between 0 and 255. If you count the 0 as a value, then that's a total of 256 possible values. When you combine 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 accurately and naturally.

As mentioned above, we generally represent HTML color codes in Hex values. What is a Hex value? I'm glad you asked! Your computer stores information as single ones and zeros, also known as "binary". Each of these tiny single values is called a "bit". We then combine 8 of these "bits" together to make a "byte". So therefore 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 the following digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. In computers, we use base 16, or hexadecimal (hex for short) because it packs more values into a single space. Hex uses the following digits: 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 uses just 2 digits (80). So by using hex values in programming, HTML, and other computer related things, we save storage space and gain efficiency. 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.

For example:
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 number sign "#" in front of the color code, but this is not necessary if you specify all 6 digits, it's used as an abbreviation. (Tip: If you ever make a profile for MySpace.com, leave off the "#" too because they filter them and 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. Click "Dec" and the key in a number. Now click "Hex" and it'll convert the number to hex. To convert from Hex to Dec, click on "Hex", key in the number, and then click "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. Learn more about HTML and CSS with my online training course: www.WebSiteTrainingOnline.com.

Fred

Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post. First Name: Last Name: E-Mail Address: E-Mail again: NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.