3.3. Color on the Web
The Web requires designers to think about color in new ways. In part, it means understanding color in a more technical manner -- the appearance of a page can benefit greatly if a designer knows what's going on "under the hood." The peculiarities of working with color in web design are functions of the following simple principles:
3.3.1. Color on Computer Monitors
Color on monitors is made of light, so traditional systems for specifying color for print (CMYK, Pantone swatches, etc.) do not apply. Monitors differ in the number of colors they can display at a time. On the high end, 24-bit monitors are capable of displaying nearly 17 million colors. 16-bit monitors can display over 65 thousand colors. On the low end, 8-bit monitors are able to display only 256 colors at a time.
188.8.131.52. RGB color
Computer monitors display colors by combining red, green, and blue light. This color system is known as RGB color.
RGB color is a 24-bit system, with eight bits of data devoted to each of three color channels. Eight bits of data can describe 256 colors. With 256 possible colors in each of the three channels, the total possible number of colors is calculated by multiplying 256 256 × 256 for a total of 16,777,216. That's more than enough colors to provide stunning representations of artwork and photography. 24-bit color is often referred to as the true color space.
Although all colors on computer monitors are made up of combinations of red, green, and blue light, there are actually a number of numerical systems for identifying colors, including RGB (red, green, and blue values), Lab (lightness, a channel, and b channel), and HSB (hue, saturation, brightness).
For purposes of web design, colors are referred to by their numerical RGB values, on a scale from 0 to 255. For instance, the RGB values for a particular dark orange color are R:198, G:83, B:52.
Colors from the true color space can be approximated reasonably well on 16-bit monitors (see the sidebar "Color Issues on 16-Bit Displays" later in this chapter). 8-bit monitors make use of a color palette, a set 256 colors, to determine which colors to display at any one time.
For system-level operations, computers use a specific set of 256 colors called the system palette. Macs and PCs use slightly different sets of 256 colors in their system palettes. But specific applications may use their own palettes; for instance, browsers have a built-in palette, known as the web palette, which gets called into use only when the browser is used on an 8-bit monitor.
Gamma refers to the overall brightness of a computer monitor's display. In more technical terms, it is a numerical adjustment for the nonlinear relationship of voltage to light intensity -- but feel free to think of it as brightness. The default gamma setting varies from platform to platform. Images and pages created on a Macintosh generally look a lot darker when viewed on a Windows or Unix/Linux system. Images created on Windows machine generally look washed out when seen on a Mac. The higher the gamma value, the darker the display. Table 3-3 shows the standard gamma settings for the major platforms.
Table 3-3. Common default gamma settings
Because the vast majority of users are viewing the Web from the Windows environment, gamma differences are of particular concern to developers who are designing pages and graphics on a Macintosh. However, if you are designing under Windows and anticipate a large percentage of Mac traffic to your site (such as a site for graphic designers), be sure to test your pages under Macintosh gamma conditions.
Several popular web graphics tools come with utilities for simulating or adjusting gamma levels:
3.3.2. Color in Browsers ( The Web Palette)
An interesting problem arises when colors from the full 24-bit color space need to be displayed on an 8-bit display. Rather than relying on the computer's system palette, browsers reduce and remap colors to their own built-in palette. This is a benefit to web designers because it guarantees that images will look more or less the same on all 8-bit systems. If images were mapped to the various system palettes, they would look quite different on different platforms. (Note that if the browser is running on a 24-bit display, the palette does not come into effect and all colors will be displayed accurately.)
This web palette consists of the 216 colors shared by the Macintosh and Windows system palettes; therefore, colors chosen from the web palette render accurately on Mac or Windows displays. The web palette was optimized for Macs and Windows; Unix machines use a different color model for their system palette, so "web-safe" colors may shift or dither when viewed on Unix systems.
The web palette is also known as the Netscape Palette, Netscape 216, Browser-Safe Palette, Web-Safe Palette, Non-dithering Palette, and the 6 6 × 6 cube. The web palette is displayed at http://www.learningwebdesign.com/webpalette.html.
184.108.40.206. Shifting and dithering
Sometimes colors are simply replaced by, or shift to, the nearest available web palette color. This is common in colors specified in the HTML document, such as background or table colors, although colors can shift in images as well. Color shifting can result in large discrepancies between how a color (as defined by its RGB values) is rendered on a 24-bit display versus an 8-bit display.
Browsers may also approximate a color by dithering, mixing pixels of similar colors available in the palette, resulting in a random dot pattern. This is common in images, although Internet Explorer may dither background colors as well. For photographic images, the effects of dithering usually are not detrimental (and in some cases may be beneficial). However, in areas of flat color (such as in a logo or line-art illustration), the speckle pattern is usually undesirable.
220.127.116.11. The web palette in numbers
An important way to look at the web palette is by its numerical values. The web palette recognizes six shades of red, six shades of green, and six shades of blue, resulting in 216 possible color values (6 6 × 6 = 216). This is sometimes referred to as the 6 6 × 6 color cube. Figure 3-2 shows the cubic nature of this palette.
Figure 3-2. The 6 6 × 6 color cube of the web palette
Table 3-4 shows the decimal, hexadecimal, and percentage values for each of the six component values in the web palette.
Table 3-4. Numerical values for web palette colors
3.3.3. Designing with the Web Palette
While the web palette can lead to unpredictable and undesirable effects such as dithering or color shifting on 8-bit monitors, you can also use it to your advantage. Because you know exactly which colors will render accurately on Macs and Windows machines, you can use these colors exclusively when designing your graphics and HTML pages. It requires a little extra effort and means sacrificing color selection, but the advantage is that you'll be able to predict what the pages will look like for all users. Using web-safe colors in graphics production is discussed in Chapter 22, "Designing Graphics with the Web Palette".
If you choose to add color to the background and text on your web pages, chances are you'll need to do some experimenting with color to get the combinations just right. There are a number of tools and options for selecting web-safe colors and incorporating them into your designs.
18.104.22.168. Web authoring tools
Many WYSIWYG (What You See Is What You Get) web authoring tools (including Macromedia's Dreamweaver, Adobe GoLive, and Microsoft FrontPage), allow you to choose from swatches of web-safe colors when applying color to text and backgrounds. You can see the results of your choices immediately in the application window or when you preview in a browser. These tools automatically generate all the necessary HTML code for you.
22.214.171.124. Photoshop swatches
If you do not have a web authoring application, you can experiment with colors in a Photoshop file by loading the web-safe colors into the Swatches palette (see Chapter 22, "Designing Graphics with the Web Palette" for instructions on creating a web palette CLUT file). Using the eyedropper tool, you can then be sure that the colors you select for backgrounds and text are web-safe. You need to note the RGB values for your final color selections and convert them to their hexadecimal equivalents for insertion into the HTML color attribute tags in your document.
3.3.4. System Colors in Web Pages
If an 8-bit display allows 256 colors, and there are 216 colors in the browser's web palette, you may be wondering what happens to the other 40 colors. Normally, the browser allows colors from the user's system palette to fill in the extra 40 color slots. These extra colors can go a long way in smoothing out colors that can't be recreated accurately using web palette colors alone. This is particularly true for grayscale images, which are difficult to reproduce using only the four web-safe gray tones in the web palette.
There is a bug in Navigator 4.0 on the Macintosh that prevents system colors from seeping in, resulting in inferior image quality on 8-bit monitors. But chances are this problem affects few users, so it's nothing to worry about.
Copyright © 2002 O'Reilly & Associates. All rights reserved.