|
|
|||
|
|
|
|
|
|
||||
        
|
 |
Chapter 13: Color
Browser-Safe Color
What are the browser safe colors, and why is it important to use them? The first step in answering this question is to ask another question: What controls the colors that can be displayed on a computer? These colors are controlled by the computer's video card and limited by the capacities of the monitor being used. The range of colors can vary anywhere from 256 colors and below on the low end all the way up to millions (and "true color") on the high end. Some older systems may even support only 16 colors. In order to be completely safe for all systems, Web design must concentrate on the lowest common denominator, but how can we predict what that is going to be? We can't, really. Many of the newer systems available today are more than likely to have all the colors needed to display all of your images, but we must play it safe and assure that those who have only 256-color capability will not have a terrible experience.So how do we figure what those 256 colors are? The 256 colors supported by a PC are not the same as those supported by a Macintosh; most of them are the same, but 40 are actually different. That leaves 216 colors that will be guaranteed to be "safe" and display correctly, regardless of the platform or video card. What happens if you use a color that is not one of the 216 Web-safe colors? Quite often, nothing; if a user's computer can display more colors, then it will not have any problems rendering the color you chose, as long as the color is in that computer's palette, but what happens if they do have only 256? In these cases, their computer will try to re-create the color by using a technique called dithering. Dithering is a process through which the computer attempts to re-create the desired color by using those it has available. It will do this by using two or more colors in a dithered (speckled or dotted) pattern to try to match the color it doesn't have, as shown in Figure 13-2. You can see a better example of this in our dithering demo at http://www.webdesignref.com/examples/dither.htm. Dithered images can look terrible and reflect poorly on the designer. By paying attention to the Web safe palette, it is possible to avoid most instances of dithering.
So how do we use the browser-safe colors? Well, it is pretty easy to make simple hex colors. Given the normal hex color triplet, you have RRGGBB, where RR, GG, and BB represent the hex values for red, green, and blue. Safe colors are those where RR, GG, and BB are only the values 00, 33, 66, 99, CC, or FF. Thus #FF00CC is a safe color, while #FFF5EE is not. You might wonder why these values? They represent exact 20% increments in saturation that give us a wide range of colors. So converting from hex, we see decimal values of 0, 51, 102, 153, 204, and 255 as the allowed values for rgb (R,G,B) measurements. The percentages for the safe values are 0%, 20%, 40%, 60%, 80%, and 100% respectively. Table 13-5 summarizes these basics rules, which you should commit to memory if you plan on producing Web graphics frequently.
If you use colors outside the safety range in an 8-bit viewing environment, you should see dithering or color shift. To ensure that colors reproduce correctly, particularly in GIF images, you will want to use a graphics program like Adobe PhotoShop or Macromedia Fireworks and make sure the palette used is "Web-safe" or that you "snap" to the safety palette once you save out. Given how quickly computer technology is advancing and how few people probably use 8-bit displays, does any of this matter? As we discussed earlier, the majority of newer systems today will have a much greater color capacity than 256. So what do you design for? Or, to put it differently, why should you limit your designs to the lowest common denominator? It's very hard to say. If you have a specific target audience and you know what they have, such as an internal company intranet, then you can definitely design for that audience's capability. Since the majority of the time you don't know what your users are going to have, you are either going to have to assume some minimum platform or detect for user capabilities. However, if you end up assuming a base platform, remember that some users might not see colors properly—since it is possible to do exciting, high-quality design within the boundaries of Web-safe color palettes, why take the risk at all? We will examine next a few approaches for breaking the browser safety barrier. However, be sure to read the section entitled "Color Shifting and the Reality of the Web Palette" to gain a proper perspective on this issue. Another interesting trend that seems to encourage the use of the browser-safe palette regardless of monitor support is download time. With GIF images, color reduction is the easiest way to reduce file size, so even though most Web users can see more than 256 colors, many sites continue to design around very restrictive color palettes.
Next: Hybrid Colors
|
||||||||||||||||||||||||||
 Overview | Chapters | Examples | Resources | Buy the Book! |
