7.2. Color in CSS

Elements that can be displayed in colors defined through style rules are:

• backgrounds

• borders

• text

• links

• outlines

I've listed that last one for the sake of completeness. Outlines are not widely supported in any significant percentage of the browsers available today, so we won't spend time discussing them here. Refer to the outline property in Appendix B, if you're curious.

7.2.1. How to Specify Colors

When you specify a color for any CSS property that accepts color values, you have a choice of several methods:

• descriptive color names

• system color names

• RGB decimal values

• RGB hexadecimal values (including a three-character shorthand)

• RGB percentage values

The most human-readable way to specify colors in HTML is to use key words that are reserved to describe those colors. Although there are only 16 "official" descriptive color names that are supported in HTML and CSS^[1], virtually all modern browsers support a range of 140 color names first suggested by Netscape in the early days of the Web.

^[1] Although the HTML and CSS specifications define 16 standard color names, the Web Content Accessibility Guidelines 1.0 published by the W3C recommend always using numerical values, not names, for colors.

These 140 colors, along with their RGB equivalents, can be found in Appendix D. The 16 "official" descriptive color names are:

• black

• white

• aqua

• blue

• fuchsia

• gray

• green

• lime

• maroon

• navy

• olive

• purple

• red

• silver

• teal

• yellow

Whether you use the other 124 named colors or not is strictly up to you. Given that they are not officially supported in any W3C documentation, there is a potential element of risk that some future browser may not support them. Precisely how these colors render on some browsers and operating systems is not easily determined other than by personal, detailed testing. Frankly, I don't see much of a risk here and I use these names a great deal because their names are sufficiently descriptive that I get some idea what I'm likely to see, even before I view my page in a Web browser.

In addition to the descriptive color names, there is also a set of 28 system color names . These names, such as AppWorkspace, correspond to different parts of the graphical user interface (GUI) presented by the operating system. The actual color associated with each of these names is therefore operating system specific, and potentially subject to user preferences. Using these color names, you can create Web interfaces that match the user's operating system GUI. A complete list of system color names is presented in Appendix D.

Colors on computer monitors are rendered by combining three basic colors—red, green, and blue—in various intensities. There are two fundamental ways you can define other colors using these basic three:

• you can use the rgb function, and supply a set of three comma-separated values defining the mix of the three basic colors, or

• you can supply a hexadecimal value as a six-character string, which, in some cases, can be abbreviated to three characters. These strings are preceded by the pound sign or hash symbol (#) whether you use three or six characters.

For example, if you wanted to specify the color blue for a particular element in a CSS style rule, you could do it any of the following ways:

color: blue;
color: rgb(0, 0, 255);
color: rgb(0%, 0%, 100%);
color: #0000ff;
color: #00f;

You can use only the three-character hexadecimal approach when the six-character version consists of three matching pairs (i.e. #abc is equivalent to #aabbcc).

You've probably figured out that the decimal and hexadecimal values in the above represent the presence of no red, no green, and maximum amount of blue. Black is represented by the value #000000 (or, in shorthand, #000) and white is represented by the value #ffffff (or, again in shorthand, #fff). If you prefer the rgb function , black is rgb(0,0,0) and white is rgb(255,255,255) or rgb(100%,100%,100%).

Sometimes, by looking at a color value—or perhaps more easily, looking at two color values next to one another—you can figure out how to modify it to achieve a different effect. For example, if you've defined a color as #ff7f50 and you look at it and decide it needs to be a bit more blue, you can just increase the value of the last two digits to, say, #ff7f70.

This nearly infinite^[2] control over the precise combination of red, green, and blue is the reason Web designers with artistic backgrounds tend to favor the hexadecimal approach. Those who, like me, are color-challenged, however, find the 140 names perfectly adequate, thank you very much!

^[2] Actually, "nearly infinite" is a bit of an overstatement. There are over 16.7 million possible combinations of red, green, and blue in CSS, and therefore over 16.7 million possible individual colors.

7.2.2. Color Selection and Combining Colors

Part of the graphical design of a site is the selection of color combinations that work well. If you've ever put a chartreuse background next to an image with a dark blue background and then run screaming for the exit when the page displayed, you have some idea of the difficulty involved.

The selection of colors becomes an important issue primarily in two situations: where you have adjacent objects with colored backgrounds and you want to avoid clashing, and where you have colored text on colored backgrounds and you want to ensure readability.

There are some basic artistic principles involved in selecting colors that complement one another.

Everything starts with the color wheel. There are literally hundreds of places on the Web where color wheels are discussed, but the clearest and most concise I have found is by the makers of a program called Color Wheel Pro, in their article called Color Theory Basics.

Essentially, you start with a color wheel that includes the range of colors from which you want to choose. Colors that are adjacent to one another on the color wheel are said to be "harmonious" colors that look good together. Choosing two or three adjacent colors on a color wheel, and applying those colors to large areas, such as backgrounds and menus, can produce very pleasing aesthetic effects.

For greater vibrancy, you will want to select colors that are opposite one another on the color wheel.

To find great color combinations for Web design, move an equilateral triangle around the middle of a color wheel, and use the combinations of colors that lie at the triangle's corners.

Some graphics programs and Web design tools include palettes and other interfaces to allow you to select colors without knowing their rgb or hexadecimal codes. These aids make it much easier to experiment with color combinations, and determine what works and what doesn't. They also have ways of making sure you stay within the bounds of what are called "Web-safe colors," a palette of 216 colors that will render nearly identically across platforms and browsers.

Putting colored text on colored backgrounds can be problematic. Trial and error can be incredibly time-consuming, but often the specific effect you want won't be achievable without some effort. However, there is some help available on the Web, and one of the best places I know of is a site called ColorCombo. Check out http://www.colorcombo.com/bgtxt.html, a sample of which is shown in Figure 7-2. As you roll the mouse over the colored squares in the right rectangle, the background color of the page changes. You can see instantly what different text colors will look like against the background.

And, while we're on the subject of picking your own colors, keep in mind the special needs of people who may be red-green color-blind. While this condition affects a fairly small percentage of the population, it is easy to design your site so that it doesn't rely on red and green to distinguish important information.

Discovering new color combinations that may defy conventional wisdom, but work well together regardless, is one of the most interesting areas of creative exploration in Web design. So, don't limit yourself to the accepted combinations that everyone uses.

7.2.3. Setting body Color

A lot of the time, you will not define a color property for the body tag, either inline or in a style sheet rule. The default browser definition creates black text on a white or gray background (white on newer browsers, gray on older ones). For many layouts, that's fine.

But, if the need arises to define a different color combination, then you can define the text color for all the text that appears on a page, using a style sheet entry like this:

body {
  color: red;
}

I don't recommend you use this approach exactly as shown above, even when you wish to declare all the fonts on a page (or site) to be a specific color. Why? Because there's a fundamental rule in CSS, from which you should never deviate: if you set a foreground color, always set a background color, and vice versa. You never know if the user has set a specific background color, against which your carefully chosen text color will look like mud. Or worse yet, the user may have defined a background color that matches your foreground color and will see only what appears to be a blank page.

So if you decide to define a foreground color using the color property, combine it with a background-color definition as in this example:

body{
  color: white;
  background-color: maroon;
}

Note, too, that if you set a color property for the body element, it applies to all elements nested inside that tag (including headings, paragraphs and lists, among other things), unless you override it (or the user's preferences trump you).

7.2.4. Transparency, Color, and User Overrides

You can ensure that the background color of any HTML element is identical to that of the body of the page. To do this, we define its background-color as transparent:

#transbox {
  color: white;
  background-color: transparent;
}

In fact, the background-color property is transparent by default; it is not inherited from the parent element. This ensures that an image background assigned to an element will display continuously through child elements, rather than being displayed again in alignment with each child.

So why would you explicitly declare a background color of transparent? The most common use for this approach occurs when you have defined a background-color property for a particular type of HTML element (such as divs), but you have one or more specific types of div tags for which you wish to display transparent backgrounds.

This issue of "default" background color gets sticky when users muck about with their settings. For example, if a user defines a local style sheet, settings in that style sheet—including background colors—may override yours.^[3]

^[3] On IE5 for the Macintosh, for example, local style sheet settings declared by the user override your page settings. But, on IE6 for Windows, this happens only if the user defines a local style sheet and tells the browser to override the designer's settings. Netscape Navigator, on the other hand, doesn't allow the user to define a style sheet, but the Windows version does pay attention to the settings in a predefined style sheet named ua.css, which is editable. It appears that on the Macintosh, Netscape Navigator has no equivalent file.

Fortunately, very few users change their browsers' default settings, so your page settings will usually win out, with browser defaults taking over where you don't specify anything. For example, the default background color for the body of a page is white or gray. If, however, you define the background color of the body to be transparent, then all bets are off. As the W3C puts it in its CSS specification, in such cases, "the rendering is undefined."