Hour 9. Working with Colors

All the sample pages shown in this book thus far have used a standard white background and black text. That’s not a requirement, although some variation of dark text on a light background is the most common color combination you’ll find online. After a brief overview of some best practices in color selection, you’ll learn when you can use colors, how to pick colors, and how to specify colors when creating various elements of your web site.

Best Practices for Choosing Colors

I can’t tell you exactly which colors to use in your web site, but I can help you understand the considerations you should make when selecting those colors on your own. The colors you use can greatly influence your visitors; if you are running an e-commerce site, you will want to use colors that entice your users to view your catalog and eventually purchase something. To that end, you want to make sure colors are used judiciously and with respect. You might wonder how “respect” enters into the mix when talking about colors, but remember the World Wide Web is an international community and interpretations differ; for instance, pink is a very popular color in Japan, but very unpopular in Eastern European countries. Similarly, green is “the color of money” in the United States, but the vast majority of other countries have multi-colored paper bills such that “the color of money” isn’t a single color at all and thus the metaphor would be of no value to them.

Besides using colors that are culturally sensitive, other best practices include:

• Use a natural palette of colors. This doesn’t mean you should use earth tones, but instead refers to using colors that one would naturally see on a casual stroll around town—avoid ultrabright colors that can cause eye strain.

• Use a small color palette. You don’t need to use 15 different colors to achieve your goals. In fact, if your page includes text and images in 15 different colors, you might reevaluate the message you’re attempting to send. Focus on three or four main colors with a few complimentary colors, at the most.

• Consider your demographics. You are likely not able to control your demographics and thus have to find a middle ground that accommodates everyone. The colors enjoyed by younger people are not necessarily those appreciated by older people, just as there are color biases between men and women and people from different geographic regions and cultures.

With just these few tips in mind, it might seem as if your color options are limited. Not so—it simply means you should think about the decisions you’re making before you make them. A search for “color theory” in the search engine of your choice should give you more food for thought, as will the use of the color wheel.

The color wheel is a chart that shows the organization of colors in a circular manner. The method of display is an attempt to help you visualize the relationships between primary, secondary, and complementary colors. Color schemes are developed from working with the color wheel; understanding color schemes can help you determine the color palette to use consistently throughout your web site. For example, knowing something about color relationships will hopefully allow you to avoid using orange text on a light blue background, or bright blue text on a brown background.

Some common color schemes in web design are:

• Analogous—Colors that are adjacent to each other on the color wheel, such as yellow and green. One color is the dominant color and its analogous friend is used to enrich the display.

• Complementary—Colors that are opposite from each other on the color wheel, such as a warm color (red) and a cool color (green).

• Triadic—Three colors that are equally spaced around the color wheel. The triadic scheme provides balance while still allowing rich color use.

There are entire books and courses devoted to understanding color theory, so continuing the discussion in this book would indeed be a tangent. However, if you intend to work in web design and development, you will be served well by a solid understanding of the basics of color theory. Spend some time reading about it—an online search will provide a wealth of information.

Additionally, spend some hands-on time with the color wheel. The Color Scheme Generator at http://colorschemedesigner.com/ allows you to start with a base color and produce monochromatic, complementary, triadic, tetradic, analogic, and accented analogic color schemes.

Understanding Web Colors

Specifying a background color other than white for a web page is easier than you probably realize. For example, to specify blue as the background color for a page, put style="background-color:blue" inside the <body> tag or in the style sheet rule for the body element. Of course, you can use many colors other than blue. In fact, there are 16 colors listed in the W3C standards: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Obviously there are many more colors displayed on the Web than just those 16. In fact, there are 140 color names that you can use with assurance that all browsers will display these colors similarly. Here’s a partial list of the 140 descriptive color names: azure, bisque, cornflowerblue, darksalmon, firebrick, honeydew, lemonchiffon, papayawhip, peachpuff, saddlebrown, thistle, tomato, wheat, and whitesmoke.

But names are subjective—for instance, if you look at the color chart of 140 cross-browser color names, you will not be able to distinguish between fuchsia and magenta. You will then realize that the associated hexadecimal color values for those two terms, fuchsia and magenta, are exactly the same: #FF00FF. You’ll learn about hexadecimal color values in the next section, but for now, know that if you want to be standards-compliant and use more than the 16 color names the W3C standards dictate, you should use the hexadecimal color codes whenever possible.

There are, in fact, 16 million colors made possible with hexadecimal color codes. However, most modern computer displays can display “only” 16,384. But 16,384 is still a lot more than 140, or 16.

You should be aware that not all computer monitors display colors in the same hues. What might appear as a beautiful light blue background color on your monitor might be more of a purple hue on another user’s monitor. Neutral, earth-tone colors (such as medium gray, tan, and ivory) can produce even more unpredictable results on many computer monitors. These colors might even seem to change color on one monitor depending on lighting conditions in the room or the time of day.

In addition to changing the background of your pages to a color other than white, you can change the color of text links, including various properties of links (such as the color for when a user hovers over a link versus when the user clicks a link—as you learned in the previous hours). You can also set the background color of container elements (such as paragraphs, divs, blockquotes, and table cells) and you can use colors to specify the borders around those elements. You’ll see some examples of colors and container elements later in this hour.

There are plenty of very bad websites, some created by earnest people with no trace of irony whatsoever. However, “The World’s Worst Website” shown in Figure 9.1 was purposefully created to show some of the more egregious sins of web site design, especially with its use of colors. A screenshot does not do it justice—visit and experience the site for yourself at http://www.angelfire.com/super/badwebs/main.htm.

Figure 9.1 A partial screenshot of “The World’s Worst Website.”

If you search for bad web site examples in your search engine, you will find many sites that collect examples of bad design and explain just why such a site should be in a Hall of Shame rather than a Hall of Fame. Many sites are considered “bad” because of their visual displays, and that display begins with color selection. Therefore, understanding colors, as well as the nuances of their specification and use, is a crucial step to creating a good web site.

Using Hexadecimal Values for Colors

To remain standards-compliant, as well as to retain precise control over the colors in your web site, you can reference colors by their hexadecimal value. The hexadecimal value of a color is an indication of how much red, green, and blue light should be mixed into each color. It works a little bit like Play-Doh—just mix in the amounts of red, blue, and green you want to get the appropriate color.

The hexadecimal color format is #rrggbb, in which rr, gg, and bb are two-digit hexadecimal values for the red (rr), green (gg), and blue (bb) components of the color. If you’re not familiar with hexadecimal numbers, don’t sweat it. Just remember that FF is the maximum and 00 is the minimum. Use one of the following codes for each component:

• FF means full brightness.

• CC means 80 percent brightness.

• 99 means 60 percent brightness.

• 66 means 40 percent brightness.

• 33 means 20 percent brightness.

• 00 means none of this color component.

For example, bright red is #FF0000, dark green is #003300, bluish-purple is #660099, and medium-gray is #999999. To make a page with a red background and dark green text, the HTML code would look like the following:

Although only six examples of two-digit hexadecimal values are shown here, there are actually 225 combinations of two-digit hexadecimal values—0 through 9 and A through F, paired up. For example, F0 is a possible hex value (decimal value 240), 62 is a possible hex value (decimal value 98), and so on.

As previously discussed, the rr, gg, and bb in the #rrggbb hexadecimal color code format stand for the red, green, and blue components of the color. Each of those components has a decimal value ranging from 0 (no color) to 255 (full color).

So, white (or #FFFFFF) translates to a red value of 255, a green value of 255, and a blue value of 255. Similarly, black (#000000) translates to a red value of 0, a green value of 0, and a blue value of 0. True red is #FF0000 (all red, no green, and no blue), true green is #00FF00 (no red, all green, no blue), and true blue is #0000FF (no red, no green, and all blue). All other hexadecimal notations translate to some variation of the 255 possible values for each of the three colors. The cross-browser compatible color name CornflowerBlue is associated with the hexadecimal notation #6495ED—a red value of 40, a green value of 149, and a blue value of 237 (almost all of the available blue values).

When picking colors, either through a graphics program or by finding something online that you like, you might see the color notion in hexadecimal or decimal. If you type hexadecimal color converter in your search engine, you will find numerous options to help you convert color values into something you can use in your style sheets.

Using CSS to Set Background, Text, and Border Colors

When using CSS, there are three instances in which color values can be used: when specifying the background color, the text color, or the border color of elements. Previous hours contained examples of specifying colors without going in great detail about color notion or color theory. For example, in Hour 8, you learned about using colors for various link states. In Hour 7, one of the quiz questions asked how to fill table cells with colors.

Figure 9.2 shows an example of color usage that could very easily go into a web design Hall of Shame. I can’t imagine ever using these combinations of colors and styles in a serious web site, but it serves here as an example of how color style could be applied to various elements.

Figure 9.2 Background, text, and border colors can all be set using CSS.

Listing 9.1 shows the XHTML and CSS styles used to produce Figure 9.2.

Listing 9.1 Using Styles to Produce Background, Text, and Border Colors

Looking at the styles used in Listing 9.1, you should be able to figure out almost everything except some of the border styles. In CSS, borders can’t be designated as a color without also having a width and type; in the first example shown in Listing 9.1, the border width is 1px and the border type is solid. In the second example shown in Listing 9.2, the border width is 2px and the border type is dashed. In the fourth example shown in Listing 9.2, the border width is 4px and the border type is dotted.

When picking colors for your web site, remember that a little bit goes a long way—if you really like a bright and spectacular color, use it as an accent color and not throughout the primary design elements. For readability, remember that light backgrounds with dark text are much easier to read than dark backgrounds with light text.

Finally, consider the not-insignificant portion of your audience that might be color blind. For accessibility, you might consider using the Colorblind Web Page Filter tool at http://colorfilter.wickline.org/ to see what your site will look like to a person with color blindness.

Summary

In this hour, you learned a few best practices for thinking about color use, and how to use the color wheel to help you find colors that will complement your text. Additionally, you learned about hexadecimal notion for colors—that all colors are expressed in notations related to the amount of red, green, and blue in them—and how hexadecimal notation allows you to apply nuanced colors to your elements. More importantly, you learned about the three color-related style properties that can be used to apply color to container backgrounds, borders, and text using CSS.

Table 9.1 summarizes these style properties.

Table 9.1 Style Properties Covered in Hour 9

Q&A

Q Don’t web browsers let people choose their own background and text colors?

A Yes, web browsers allow users to override the colors that you, as a web page author, specify. Some might see your white-on-blue page as green-on-white or their own favorite colors instead, but very few people actually use this option. The colors specified in the <body> tag will usually be seen.

Q I’ve heard that there are 231 “browser-safe colors” that I can use on web pages and that I shouldn’t use any other colors. Is that true?

A Here’s the real story: There are 231 colors that will appear less “fuzzy” to users who operate their computers in a 256-color (8-bit) video mode. Some web page authors try to stick to those colors. However, true-color or high-color computer displays are all but standard these days, and they show all colors with equal clarity. So if your graphics program can provide color values to you in hexadecimal format, feel free to plug that value straight into your style sheet to display custom color schemes.

Workshop

The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows.

Quiz

1. How would you give a web page a black background and make all text bright green? Would you want to?

2. When selecting a color scheme for your web site, which of the following types of color relationships would give you more color options: analogous, complementary, or triadic?

3. If you specify background-color #FFFFFF for the body element in your style sheet, then use background-color #FF0000 for the first <div> that you use on your page, will the background of that <div> be red or white?

Answers

1. Put the following at the beginning of the web page or use a style rule for the body element:

2. Triadic. It refers to three colors evenly spaced around the color wheel.

3. The background of your <div> will be red, because the background-color specification of a container element will override the specification in the <body> tag or body entry in the style sheet.

Exercises

• Select a base color that you like—perhaps a lovely blue or an earthy tone—and use the Color Scheme Generator at http://colorschemedesigner.com/ to come up with a set of colors that you can use in a web site. I recommend the tetrad or accented analogic scheme types.

• Once you have a set of colors—or a few options for sets of colors—create a basic HTML page with a <h1> element, a paragraph of text, and perhaps some list items. Use the color-related styles you’ve learned about in this hour to change the background color of the page, and the text of the various block-level elements, in order to see how these sets of colors might work together. See how they interact and determine which colors are best used for containers and which are best used for plain text, header text, and link text.