|
|
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.
 |
|
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.
|
|
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.
|
|