Team LiB
Previous Section Next Section

Handling Screen Color Depth Issues

Just as with screen resolutions, there are several different color depths with which your Web page might be viewed. Color resolution is simply the number of colors that can be used to display your page's content. Table 10.1 lists some common color depths.

Table 10.1: Common Color Depths

Bit Depth

Color Depth Name

Number of Colors


1 bit

Black-and-White

2 colors

4 bit

Grayscale

16 colors

8 bit

256 Colors

256 colors

16 bit

High Color

65,536 colors

24 bit

True Color

16,777,216 colors

32 bit

True Color

16,777,216 colors

Luckily, only bit depths of 8-bit or higher are commonly used. This simplifies the problem of creating a universal Web page from six color combinations to only four. The differences between bit depths are drastic. A Web page created and designed under 32-bit conditions may look absolutely terrible under 8-bit conditions. A Web page designed under 8-bit conditions, however, will look exactly the same under 32-bit conditions. The only drawback to designing all of your Web pages for 8-bit platforms is that you'll be missing out on a lot of very wonderful color combinations.

So how do you design a Web page that uses all available colors, but still looks good when viewed with low bit depths? By using the same technique used above with dynamically resizing images, that's how. This time around though, you're not changing the size of the image that's loaded; instead, you're changing the actual image that is loaded. Once again, here is a sample HTML <IMG> tag that uses this technique:

<img src="JavaScript: getImage( ‘image’ );">

That statement, in combination with the following function:

function getImage( image )
{
  return( image + screen.colorDepth + ".jpg" ); 
}

will load an image in the form: image8.jpg or image32.jpg. The image name is followed by the bit depth and the file extension. Using this form will ensure that only an image created for a certain bit depth is displayed.

When you're dealing with HTML element colors, there is no easy shortcut that will work for all color depths. There are, however, 16 colors that work on screens with any color depth. Table 10.2 lists them and their hexadecimal values.

Table 10.2: Color Constants

Color Name

Hexadecimal Value


Aqua

#00FFFF

Black

#000000

Blue

#0000FF

Fuchsia

#FF00FF

Gray

#808080

Green

#008000

Lime

#00FF00

Maroon

#800000

Navy

#000080

Olive

#808000

Purple

#800080

Red

#FF0000

Silver

#C0C0C0

Teal

#008080

White

#FFFFFF

Yellow

#FFFF00

These values are case-insensitive and can be used instead of their hexadecimal literals like this:

<body bgColor="Fuchsia">

Using these color constants ensures that your Web page will look the same no matter what conditions it is being viewed under.


Team LiB
Previous Section Next Section