HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [71]
A long time ago, browsers couldn’t even agree on what colors they’d display reliably. Web developers responded by working within a predefined palette of colors that worked pretty much the same on every browser. Today’s browsers have no problems showing lots of colors, but the so-called Web-safe color palette is still sometimes used because it’s an easy starting point.
The basic idea of the Web-safe palette (shown in Table 1-3) is this: Each color can have only one of the following values: 00, 33, 66, 99, CC, or FF. 00 is the darkest value for each color, and FF is the brightest. The primary colors are all made of 0s and Fs: #FF0000 is red (all red, no green, no blue). A Web-safe color uses any combination of these values, so #33CC00 is Web-safe, but #112233 is not.
Table 1-3 Web-Safe Color Values
Description
Red
Green
Blue
Very bright
FF
FF
FF
CC
CC
CC
99
99
99
66
66
66
33
33
33
Very dark
00
00
00
To pick a Web-safe value from this chart, determine how much of each color you want. A bright red will have red turned on all the way (FF) with no green (00) and no blue (00), making #FF0000. If you want a darker red, you might turn the red down a little. The next darker Web-safe red is #CC0000. If that isn’t dark enough, you might try #990000. Let’s say you like that, but you want it a little purple. Simply add a notch or two of blue: #990033 or #990066.
If you’re having trouble following this, look at colorTester.html on the CD-ROM. It allows you to pick a Web-safe color by clicking buttons organized like Table 1-3.
The original problem Web-safe colors were designed to alleviate is long resolved, but they’re still popular as a starting point. Web-safe colors give you a dispersed and easily understood subset of colors you can start with. You don’t have to stay there, but it’s a great place to start.
Choosing Your Colors
Figure 1-2 shows the colorTester.html program I added to the Web page and CD-ROM. This page lets you experiment with colors. I refer to it during this discussion.
The colorTester.html page uses techniques that I describe primarily in Book IV, Chapter 5. Feel free to look over the source code to get a preview of JavaScript and Dynamic HTML (DHTML) concepts. By the end of Book IV, you can write this program.
The best way to understand colors is to do some hands-on experimentation. You can use the colorTester.html page to do some quick tests, or you can write and modify your own pages that use color.
Figure 1-2: This program lets you quickly test color combinations.
Starting with Web-safe colors
The colorTester.html program works by letting you quickly enter a Web-safe value. To make red, press the FF button in the red column. The blue and green values have the default value of 00, so the background is red.
The Web-safe colors give you a lot of room to play, and they’re very easy to work with. In fact, they’re so common that you can use a shortcut. Because the Web-safe colors are all repeated, you can write a repeated digit (FF) as a single digit (F). You can specify magenta as either #FF00FF or as #FOF and the browser understands, giving you a headache-inducing magenta.
To make a darker red, change the FF to the next smallest value, making #CC0000. If you want it darker yet, try #990000. Experiment with all the red values and see how easy it is to get several different types of red. If you want a variation of pink, raise the green and blue values together. #FF6666 is a dusty pink color; #FF9999 is a bit brighter; and #FFCCCC is a very white pink.
Modifying your colors
The Web-safe palette is convenient, but it gives you a relatively small number of colors (216, if you’re counting). Two hundred and sixteen crayons in the box are pretty nice, but you might need more. Generally, I start with Web-safe colors and then adjust as I go. If you want a lighter pink than #FFCCCC, you can jump off the Web-safe bandwagon and use #FFEEEE or any other color you wish!
In the colorTester.html program, you can use the top and bottom button in each row to fine-tune