HTML 4_01 Weekend Crash Course - G. Perry

Color Strategies: Codes and Safe Colors

Although there might be someone somewhere using a monochrome monitor to browse the Web, you can ignore this lonely user and assume that your Web page users are going to be seeing your pages in glowing colors. In addition, you can assume that your users will view your Web pages in more than 200 rich colors. 200 or more colors ought to be enough to satisfy any Web designer, right?

It turns out that 200 or so colors provide an extremely limited palette (the color collection) of colors from which you can use on your pages. A photograph contains millions of colors, with many colors shading and radiating into other colors and moving to many different hues and tints. You’ll recall from the previous session that JPEG files can contain millions of colors. Such files immediately and considerably downgrade in quality when viewed with little more than 200 total available colors.

Color codes and palettes

The three colors red, green, and blue combine differently to reproduce every color in nature. Actually, the human eye interprets combinations of these colors as other colors. When the human eye sees red and green, a yellow tint forms from that combination. Perhaps you’ve heard the terms RGB inputs or RGB monitors. The RGB simply stands for red, green, and blue and describes inputs or monitors that combine these three colors to produce all other colors that people see on such devices.

Therefore, every color you see on a computer screen is comprised of a combination of red, green, and blue. To see the pure red color, for example, your monitor forms a combination of full red, no green, and no blue. Thought of another way, your monitor uses 100 percent of red, 0 percent of green, and 0 percent of blue to produce the red color. To produce the color cyan (had anyone really heard of the color cyan before the first PC color graphics card used something called cyan as one of its 16 colors?), which

If you code in HTML (for a total of 256 numbers), however, the problem is that you do not have such a palette in a text editor. Even though some text editors now support color palette selections (you can click a color, and the editor automatically places the numeric combination in your code), you must understand colors and how the computer displays them in more detail than you would if you programmed with something other than HTML. The bottom line is that you often must specify colors in your Web page using the numeric color codes.

Browser-safe colors

If you multiply 256 times 256 times 256 (with each 256 representing one of three-number color codes), you get a large product — 16,777,216 combinations to be exact. Although nature contains an infinite amount of colors in the analog color spectrum, 16 million colors is an ample supply of colors for your site. Nevertheless, a problem exists with a vast number of your users’ systems in that they use 8-bit color cards and, consequently, even though they can display more than 16 million colors, they can display only 256 of those colors at any one time. Therefore, your Web sites should contain no more than 256 colors on the page

at one time.

To make matters worse, Windows-based computers suffer further because Windows reserves 20 colors for its own use. That leaves only 236 colors that you can be sure will be available to you. Although the Mac doesn’t limit these 20 colors, even Mac browsers that can display 256 colors don’t offer a lot more color options than a PC browser can offer.

Can things get more limited? They can. To be as standard as possible and to utilize the three-number color-coding scheme efficiently, Web browser designers came up with a palette of 216 colors that you, as a Web page creator, can use safely. That is, with these 216 browser-safe colors, sometimes called Web-safe colors, you can be assured that all Web browsers in the world will display these colors properly without relying on distorting trickery that washes out the effect of other colors.

The second column in Table 8-1 lists hexadecimal equivalents for the decimal numbers. A hexadecimal number (also called a hex number) is a number based on the base-16 numbering system as opposed to the usual base-10, or decimal number system, that everybody learns as a child. Hexadecimal numbers range from 0 to F because, after the number 9, the numbering system continues A, B, C, D, E, and F (lowercase equivalents are okay).

The bottom line is that every decimal number has a hex number equivalent that must be used in your HTML code. From Table 8-1, you can see that 204 is the same as the CC hex value. Therefore, if you represent the color code of 204-51-153, you can also specify the number using hex values such as CC-33-99. From the CC, you know that a hex number is being used, but if the numeric value does not include any hex values that use letters, you won’t know if the value is supposed to be hex or decimal. Therefore, a shortcut exists in HTML that lets you specify hex values without any redundancy or confusion to the decimal equivalents.

Begin all hex values with a pound sign (#) and do not use the embedded dashes. Therefore, #CC3399 (or #cc3399) is the same hex value for the color code CC-33-99 (which is the same as 204-51-153 decimal).

What does all this mean? When you choose colors from a graphics program, you will probably be able to point to the color you want or enter decimal values for the red, green, and blue combinations. But when coding HTML, you’ll enter the hexadecimal value to represent your Web page’s colors.

Never use nonbrowser-safe colors. Actually, you can use any color you want from the 16-million color palette, but be warned

that your page may look entirely different from what you expect

Never because of the color substitutions that browsers will surely make. To be safe, stick to the browser-safe colors.

The big 16 colors

If you limit yourself to only 16 colors, and that is truly limiting, HTML has assigned names to the 16 most common colors of the PC platform. (The PC was chosen as a least-common-denominating system.) Although I cannot show you the actual 16 colors on the pages of this book, Table 8-2 lists the HTML names for these 16 colors, along with their hex equivalents.

Even though dithering often goes unnoticed, and clear photos appear on your Web page in spite of it, you need to stick with the browser-safe colors when you control the colors you pick for text, logos, and GIF images. The more dithering that takes place on your Web page, the more grainy the page appears. Even if the user doesn’t notice it, a Web page with dithering shown next to the same nondithered Web page is less appealing. Therefore, when you choose colors for your site, on the items that you create and add to your page, you should use only the 216 browser-safe colors.

Adding Color to Text and Backgrounds

All that theory is worthless if you don’t see the practical use of color codes. Actually, applying the color codes is simple using HTML code. You can color text, backgrounds, and other Web page elements using the hex codes. The only problem is locating the hex value of the color you want, but again, most graphics programs display browser-safe color palettes now with the hex equivalents.

Suppose you want to make the text in your entire Web page the highest intensive, or brightest, green possible. You can add the text= attribute to the <body> tag as follows:

<body text=#00FF00>

As with many attributes, you’ll often see the hex value enclosed within optional quotation marks.

Note

The text= attribute changes all the text on the Web page. To change only specific text, use the color= attribute inside a <font> tag. The following code displays the middle word (which is red) in red:

<p>This text has a <font color=#FF0000>red</font> word inside it.</p>

The <font color=> tag overrides any <body text=> tag in effect.