Chapter 10. Colors

Printing color is expensive. Hence, in books, color has always been used sparingly. On the Web, however, the use of color is virtually free. Most Web users have color monitors, so displaying color costs nothing, although printing it is still costly. So, there is no reason for Web designers not to incorporate color into their designs.

Of course, color can be overdone. As with all aspects of print, and Web, design whether fonts, space, or images color should be used to achieve a purpose with the design. Color thrown in at random doesn't work well. Remember, too much variety obscures instead of clarifies.

Some combinations of colors are difficult to read, such as red type on a blue background. A background that differs from the foreground text only in color and not in brightness also strains the eye. For some people, dark letters on a light background are easier to read, while for others, the opposite is true. People may also have associations with certain colors that may either help or hinder their understanding the text. For example, red seems to be almost universal in marking something that is important. But, the interpretations of other colors often depend on culture and even on the user's personal experiences. Colors and how we perceive them are both very technical and complex subjects, far beyond the scope of this book. We encourage interested readers to further explore the subject of color, particularly to learn how to effectively combine colors to achieve the desired effects.

The range of colors that can be reproduced by a computer monitor is called its gamut. The gamut depends not only on the color and brightness that a computer monitor can produce, but also on the brightness of the light that reflects off the screen. The effective gamut is reduced as the light in the room gets brighter; the largest gamut is available in a darkened room. Note that color printers work differently from computers, and their gamuts differ from that of computer monitors. Colors often appear one way on the monitor's screen and another when printed by a color printer or by a traditional printing process.

In this chapter, we show you how to use CSS to specify the color of text and borders. This is done with the color property. Also, we describe how to set backgrounds either to a certain color or to an image. This is done with the various background properties. Before we describe the properties, we have to look at the different ways color values can be set in CSS.