Overview
HTML tags allow you many methods of incorporating color into your web document. You can set the main colors of the page using the <body> tag, you can alter the color of text with the <font> tag and you have control of table's cells and rows' colors as well.
There are two methods of determining color in an HTML tag. One is by placing color value code within the tag and the other is to assign a color name. The use of color names is much easier and will work with most browsers. But the color value code will give you much more control over your color because you are not restricted to a certain few color names.
Either of these methods of incorporating color can be done simply by assigning the value into the "color" attribute of the appropriate HTML tag. <body style="background:silver"> for example, will create a web page with a silver background color.
The standard color names that are readable by most browsers are:
| aqua | gray | navy | silver | ||||
| black | green | olive | teal | ||||
| blue | lime | purple | yellow | ||||
| fuchsia | maroon | red | white |
Many people realized that these colors were rather limiting and so the people behind both both Netscape and Internet Explorer created many more color names to use. These are called the X11 color names. There are far too many of these color names to list here, but a small representative of the list is shown below. Also, there are a total of 100 variants of gray that you can use. The color “gray1” is the darkest and “gray100” is the lightest. The default “gray” shown above is similar to “gray75”.
| aliceblue | beige | chartreuse | darkgoldenrod | dodgerblue | firebrick | ||||||
| gainsboro | honeydew | hotpink | ivory | lawngreen | linen | ||||||
| midnightblue | mintcream | oldlace | orchid | papayawhip | peru | ||||||
| rosybrown | salmon | seashell | slateblue | thistle | whitesmoke |
As you can tell, some of the color names are rather odd. And what exactly is the difference between “honeydew” and “mintcream”? You quickly run into the problem that you have far too many names to reference and keep track of. Also, not all browsers can recognize these X11 colors. Which leads me to…
Color Values
If you want much more control of which color will be displayed, or if you feel you are limited by the choices given to you by the color names, then you will want to use color values to input within your HTML tags. This method is the only way to exactly match, for example, the background to a certain color in an image. The one caveat is that this method is somewhat more difficult to understand than the color name method.
All color values are created within an HTML tag by a six-digit hexadecimal number preceded by a hash (#) symbol. For example: “#FF0000” is the color red. This number is a representation of a color value called RGB which stands for Red-Green-Blue. So the first two digits represents the red color, the second two represents green and the last two, blue.
So what does hexadecimal mean? It is a base-16 numbering system that is commonly used by computers. Hexadecimal uses the normal 0 through 9 digits as well as adding the letters A through F as shown in this table:
| Number | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Hexadecimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
So, to use color values, you will first need to know the RGB value of your color. (If you use a program such as Adobe Photoshop, this is easily determined.) Each of the three colors of an RGB color will run from 0 (no color) to 255 (full color). Thus full red is 255, 0, 0; full green is 0, 255, 0 and full blue is 0, 0, 255. This combination allows for 16 million different variations.
Once you know the RGB value, you will need to convert it to hexadecimal by using this formula: Divide each value by 16 and multiply the remainder by 16 to gain two digits.
For example: Let's say our RGB color is an dull blue () that has an RGB value of 106, 90, 205. To find the hexadecimal equivalent, we just divide each value by 16 and multiply the remainder by 16. Thus 106 divided by 16 is 6.625. and 16 multiplied by 0.625 is 10. So the first (or red) hexadecimal number is "6A". The green number is 90, which divided by 16 results in 5.625. This makes the green hexadecimal number "5A". For the blue number of 205; 16 divided into it results in 12.8125 and 16 times 0.8125 is 13. So the blue hexadecimal equivalent is "CD". So the final equivalent to RGB 106, 90, 205 is 6A5ACD. This number can then be plugged into an HTML attribute like this: <span style="color: #6A5ACD;">This text is a dull blue color</span>
Fortunately, there are a number of tools you can either find online or download to your computer that will convert RGB to hexadecimal colors. Also, many HTML editors such as Macromedia Dreamweaver have these tools already built in.
One Last Thing
Many older and cheap computer monitors can only display a limited number of colors. Any color outside of this range would be displayed very poorly. This problem is complicated by the differences between PCs, Unix/Linux and Macs and how they each display color. To correct this problem, a collection of “Web Safe” colors was devised. These colors are safe to use and will not be altered by the computer’s monitor. The Web Safe palette of colors is shown below.
Web Safe Colors
|
|
|
