Color is one of the most powerful visual elements that you will have in your design. It can be used to help your design in a variety of ways. Color can accentuate, highlight, and guide the eye to essential points or links; identify recurring themes or be used to differentiate between elements; and trigger feelings and associations.
People respond immediately to color, and the scheme you choose will set the mood for the tutorial. Color will elicit some sort of response even before users begin to read the content. You want to ensure that the colors you select will draw them into the learning experience.
Color Symbolism
Because colors mean different things to various populations, it is important to con- sider your target audiences before you decide on the color palette for your tutorial. You should be cognizant of the different meanings of colors between cultures and of the various psychological responses that colors bring out. Figure 5.17 lists common color meanings and perceptions around the world.
Our response to color is strongly influenced by our cultural background. For example, the color green in the United States indicates both go(safe) at traffic lights and environmental awareness, but in some tropical countries is associated with dan- ger. In Western cultures black is associated with death and mourning, but in Eastern cultures white is. In the United States white is associated with purity, but in India red is. Understanding these differences will ensure that your tutorial doesn’t send the wrong message to diverse audiences on the basis of its color.
Color also evokes emotional responses (see figure 5.17). We are all familiar with the concept that red connotes warmth and that blue connotes cold. Red, orange, and yellow hues can induce excitement, aggressiveness, and stimulation. Blues and greens can suggest security and peace.
FIGURE 5.16
Effective Use of White Space
From University of Washington Libraries, Seattle. Available: http://www.lib.washington.edu/uwill/
research101/index.html.
FIGURE 5.17
Color Meanings and Perceptions
COLOR PSYCHOLOGICAL RESPONSE NOTES OF INTEREST
Red Power, energy, warmth, passions, Changes meaning in the presence of love, aggression, danger, other colors: with green, it becomes excitement, desire, speed, a symbol of Christmas; when
strength combined with white, it means joy in
many Eastern cultures; in China it is a symbol of celebration and luck
Blue Peace, tranquility, calm, Used in the United States by many banks harmony, cold, trust, conservatism, to symbolize trust. It is often considered security, technology, cleanliness, to be the safest global color
order
Green Nature, health, good luck, Doesn’t do well globally: problems jealously, envy, renewal, are associated with green packaging environment, fertility, spring in China and France
Yellow Joy, happiness, imagination, A sacred color to Hindus hazard, illness, optimism,
hope, philosophy, dishonesty, cowardice, betrayal
Purple Spirituality, mystery, royalty, Appears very rarely in nature transformation, cruelty, arrogance,
mourning, wisdom, enlightenment
Orange Vibrancy, flamboyance, energy, Signifies an inexpensive product balance, warmth
Brown Simplicity, earth, reliability, Food packaging in the United States is comfort, endurance often colored brown with success; in
Colombia, brown discourages sales Gray Intelligence, futurism, modesty, The easiest color for the eye to see
sadness, decay, staidness, maturity, conservative
White Purity, cleanliness, precision, Signifies marriage in the United States, but innocence, sterility, death, death in India and other Eastern
youth, simplicity cultures
Black Wealth, formality, evil, anger, Signifies death and mourning in remorse, power, sexuality, many Western cultures; in
sophistication, death, mystery, marketing, conveys elegance, wealth, fear, unhappiness, elegance and sophistication
Combining Colors
The combination of colors you choose can also have an effect on your audience. Some colors complement each other, others contrast. The use of a complementary color scheme may create a mood very different from a contrasting scheme. Deciding on the most effective color scheme is a process that can be a career in itself. However, many resources on the Web can teach you the basics of color theory so that creating an effec- tive color scheme doesn’t become an overwhelming task.
If you are like many people, you last studied color in elementary or high school.
Before you start to work out your color scheme, you should reacquaint yourself with some color basics. One Web site you can visit to read about basic color theory is Worqx (http://www.worqx.com/color/).
There are three primary colors on the color wheel: red, yellow, and blue. When you combine two of the primary colors, your result is a secondary color: violet (a com- bination of red and blue), green (blue and yellow), or orange (red and yellow). A pri- mary color combined with an adjacent secondary color produces an intermediate color: red orange, red violet, blue violet, blue green, yellow green, and yellow orange.
These make up a basic twelve-color wheel (see figure 5.18). To complete the picture, include the neutral shades: white, black, and gray. White reflects all light and black absorbs all light. Gray is an impure white.
With just these twelve hues and the three neutral ones, you have an almost unlim- ited choice of colors. This is possible with variations to the basic group of tint, shade, tone, value, and intensity:
Hueis color with no black, white, or gray added.
Tint is a hue plus white.
Shadeis a hue plus black.
Tone is a hue plus gray or a hue plus a complementary color.
Valueis how light or dark a color appears.
Intensityis how bright or dull it appears.
Figure 5.18 also shows a few proven approaches to take when deciding on a color scheme:
Monochromaticis a scheme that uses one color in combination with some of its tints, tones, and shades.
A complementary color scheme is one that begins by using two colors that are opposite each other on the color wheel and then incorporates tints, shades, and so on, to finalize the colors.
A triadiccolor scheme is made up of three colors that are selected by drawing an equilateral triangle within the color wheel.
An analogousscheme uses two or more colors side by side on the color wheel.
For those who might be challenged when it comes to selecting colors, utilities are available to help choose a harmonious color scheme for a Web site. One is Color Wheel Pro (figure 5.19), which uses examples created in Flash that allow you to pre- view potential color schemes by rotating a color wheel. Once you find a scheme that
FIGURE 5.18
Color Wheel and Color Schemes
Monochromatic Complementary
Triadic Analogous
works for your project, you can export the palette and use it in image editing pro- grams, such as Adobe Photoshop.
Refer to the resources section on color at the end of this book for several good places to start or renew your color education.
In selecting a color scheme, a primary consideration will be the legibility of the text against the background color. Legibility depends on many factors, but color is one of the important aspects, along with font, font size, and word style (which will be dis- cussed shortly). When you are deciding on a color combination to increase readabil- ity, you are safest in going with a high-contrast combination. Black text on white back- ground has high contrast, and red text on blue background has a very low contrast.
Figure 5.20 illustrates (even with the gray scale used here) that the high contrast is more easily read.
Using Colors to Show Similarities and Differences
Color can be a useful tool to help users see relationships among screen elements and to differentiate between tutorial components. For instance, color-coding titles and subtitles can help users see the levels of importance and organization of information.
FIGURE 5.19
Utility to Aid Color Scheme Creation
From Color Wheel Pro. Available: http://www.color-wheel-pro.com.
Navigation systems can also be enhanced with the proper use of color. The key to using color coding effectively is to use these visual clues consistently throughout the site. A cautionary note, however: don’t rely strictly on color for providing visual clues.
You may have users who are color blind or have other visual impairments that make color coding useless to them!
Browser-Safe Colors
In the early years of Web design, the issue of how to ensure colors displayed consis- tently across all types of monitors was a big one. Color capability among monitors var- ied; most only had 8-bit video cards that would display 256 colors. There were obvi- ous display inconsistencies between Macintosh and PCs. (For more discussion on monitor color capabilities, refer to chapter 4.)
To address this problem, a 216-color palette was developed using colors that appeared to display the same across platforms and in all browsers. Why were only 216 used instead of 256? The forty colors that were discarded were those that varied on Macs and PCs. But by restricting the number of colors to 216, designers were able to be certain that colors would not dither. Dithering is the attempt by a computer pro- gram to approximate a color from a mixture of other colors when the required color is not available.
Monitors today typically support millions of colors, so the need to use the browser- safe palette has diminished. If you know your users are using up-to-date computer systems, don’t be as concerned about the issue.
FIGURE 5.20
High and Low Color Contrasts and Legibility
Development of Web pages for other form factors than computers is still in its infancy. However, the technology to support Web access to cell phones and PDAs is moving along and becoming much more mainstream. If providing access to your site on those types of devices is important, then the use of browser-safe colors may remain a concern. Most of these devices today are either 1-bit (black and white) or 8-bit color.
Most graphics software will include the browser-safe palette, along with palettes that allow millions of choices. There are different palettes developed for different pur- poses. The RGB (red, green, blue) palette is the one you will use for choosing Web col- ors. Color values for RGB are stated in numerals by assigning an intensity value to each pixel ranging from 0 (black) to 255 (white) for each of the RGB (red, green, blue) components in a color. For example, the RGB value for black is 0 0 0, white is stated as 255 255 255, and red is 255 0 0.
HTML uses hexadecimal numbers for color coding. Hexadecimal refers to the base-16 number system, which consists of sixteen unique symbols: the numbers 0 to 9 and the letters a to f. You will need to convert your colors from their RGB values to their hexadecimal values. A Google search for “RGB hexadecimal converter” will link you to an assortment of these tools (see, for example, http://page.mi.fu-berlin .de/~boethin/pub/coca/).
Another concept in managing color choices for the Web is that of Web-smart col- ors. The Web-smart colors are those 4,096 colors composed of any three pairs of iden- tical hexadecimal digits (0–9 and a–f), such as #dd1188. To see the difference between browser-safe, Web-smart, and unsafe colors, visit the 4096 Color Wheel (http://www .ficml.org/jemimap/style/color/wheel21.html) (see figure 5.21). As you pass your cur- sor over the wheel, the hexadecimal value is displayed for all three choices. As is the case with browser-safe color palettes, need for Web-smart may be waning. But it is use- ful to be aware of the choices.
How Many Colors?
Although it may be tempting to include many colors, using too many can be distract- ing and overwhelming to users. You’ll do best if you stick to Ben Shneiderman’s guide- lines, “use color conservatively” and “limit the number of colors.”6Many design guides suggest limiting the number of colors to four. Like other visual-design guidelines, this is not set in stone, but is a good basis to work from.
Link Colors
The first hyperlinks were all blue that changed to purple once they had been visited.
As the art of Web design evolved, many Web authors began to tie their link colors in with the overall color scheme of the site. Just a few years ago, some usability experts felt strongly that the only appropriate colors for links are the original blue and purple because these colors are recognized and understood by most Web surfers. There is lit- tle confusion by users on this point. If the link is blue, they haven’t been there yet. If it is purple, they have.
However, this concern has lessened in the past few years. Users are becoming savvier about surfing the Web and know to look for colored, underlined text.
Current usability guidelines for the use of color for links are updated to recommend
that different colors may be used for links but that visited and unvisited links should remain different. “Colors for unvisited links should be more vivid, bright, and satu- rated than that for visited links, which should look ‘used’ (dull and washed out).”7