Back to the Web Design Home Page Buy Now - available at
Overview Chapters Examples Resources
Complete Chapters
Chapter 1

Chapter 5

Chapter 9

Chapter 13

Appendix B

Check Out These Other Books!

Chapter 13: Color
Color Detection
Another approach to dealing with the color variability issue is to detect for user capabilities using JavaScript. In 4.x generation browsers and better, the JavaScript Screen object can be used to determine the bit-depth of the user's monitor by accessing the colorDepth property. For example, this short script displays the current color depth in an alert dialog:

<script type="text/javascript">

    if (window.screen)

The dialog box is shown here:

Dialog Box

In view of the color detection capability, you might consider setting screen colors based upon user screen conditions. A style sheet reference based upon the color support could be written:

<script type="text/javascript">

var bitDepth;
if (window.screen)
   bitDepth = window.screen.colorDepth;
   bitDepth = 8;
if (bitDepth > 8)
  document.write('<link rel="stylesheet" href="hicolor.css" media="screen" />');

document.write('<link rel="stylesheet" href="locolor.css" media="screen" />');
<link rel="stylesheet" href="locolor.css"
media="screen" />

It might be a lot of work, but detection is a slight improvement over mere guesswork in achieving accurate color reproduction. Unfortunately, so far, without color reproduction profiles in Web browsers, there are many things that can derail our efforts.

Next: Troublesome Color Reproduction Issues

Overview | Chapters | Examples | Resources | Buy the Book!
Available at Available at