January 2003

By Katherine Nolan

Advertisers have been quick to capitalize on psychological research into the effects of color on our emotions and perceptions. The ads we watch use this knowledge to evoke feelings or memories that make us want the goods on display, but it is not only in advertising that colors are chosen to have a subconscious effect on the viewer.

Research has, for instance, led many employers to use a green color scheme in the workplace, as there is evidence to suggest that this results in less absenteeism through illness. At the University of Iowa, Hawkeye Coach Hayden Fry had the locker room used by visiting teams painted pink, on the basis of research that showed pink surroundings have the effect of reducing aggression!

Whether or not we—or indeed they—are aware of it, visitors to our Web sites, too, will make assumptions about the nature, quality, reliability, and value of our products or services as a result of the colors we use.

The meanings of colors

There are no "good" or "bad" colors. All colors have positive and negative effects depending on context, and evoke responses tempered by the experience of those viewing them. Some of the more common Western cultural responses to colors are outlined in the table below.

Colors and their common connotations in Western culture

None of this is clear-cut. Because colors are capable of so much variation, making absolute statements about meaning is impossible. However, understanding some important concepts about color will help us appreciate how varying a color, and combining it with others, can affect its impact. Let's take a look.

Hue, saturation, and luminosity

Hue determines the basic color—whether it appears green, red, blue, orange, and so forth.

Figure 1: Hue determines basic color.

A color's hue has a strong effect on how it is perceived. A color from the center of the red part of the spectrum will be perceived as more threatening, or perhaps more passionate, than one that is closer to orange; while red with a pinkish hue is a calmer color.

Saturation refers to the amount of grey in a color, and determines how vivid it is.

Figure 2: Saturation refers to the amount of grey in a color.

As a general rule, women tend to prefer less saturated colors, and men more saturated ones.

Luminosity refers to the whiteness or intensity of a color; luminosity for any one color will range from pure white though to black.

Figure 3: Luminosity refers to the whiteness or intensity of a color.

Using the same color at varying degrees of luminance in a site's palette results in a harmonious color scheme. In general, colors with more luminance feel lighter, while those toward the dark end of the scale are more "serious" colors.

With the Microsoft FrontPage 2002 Web site creation and management tool, you can vary each of these color properties independently to better control the psychological impact of your site.

• In the FrontPage 2002 More Colors dialog box, click the Custom button to see the hue, saturation, and luminosity (Hue, Sat, Lum) values of the color you have chosen.
• By using the slider controls or changing the numerical values to manipulate the value of each property individually, you can see the effects on a color immediately.

Creating effective color schemes

Those of us who do not have an art background can find it difficult to combine colors into evocative or meaningful color schemes. One useful tip is to visit sites that display the work of artists, who tend to be particularly good at using colors to create a mood. Examining how artists use color can be very instructive. Looking at artists' sites and thinking about the messages their colors send will also develop your eye for color and your ability to choose effective combinations.

Once you have chosen some basic colors, the way colors are arranged on the FrontPage 2002 Color Palette makes creating harmonious color schemes easier. By following a line of colors either diagonally or horizontally, you can create a palette of colors that work well together and from which you can choose.

Figure 4: Bands of color as they appear in the FrontPage Color Palette.

Take a look at the simple site layout below, shown in three different color combinations, and use the questions to determine your response to each. Obviously, in this case, you have nothing other than color to guide you, so pay attention to your first impressions!

Figures 5, 6, and 7: First impressions are often made based on the color scheme.

• Which sells the most/least expensive goods?
• Which would you be most/least confident buying from?
• If you were looking for, say, financial information, which site would you be most/least likely to choose?
• The woman is telling you a "secret." In each case, what do you think it might be about?

Different people may very well have different responses to each of these questions. Response to color is cultural and is affected by our experience of color in our daily lives. Yellow, for most of us, has generally cheerful overtones, but it may remind a medical audience of jaundice!

People who live in warm climates consistently prefer bright strong colors; those in colder parts of the world prefer cooler, more washed out colors. This can change with context. While thinking about a vacation, for instance, a person living in a cold climate may be attracted by warmer colors than they would be when choosing home furnishings.

Some of the effects of color, however, are universal, or at least widespread. Let's look again at each of the examples above and see how a simple change in color alone can alter the image of a site.

Widening a site's appeal

Some color combinations appeal to one segment of the market pretty much exclusively. For example, the unsaturated palette used in our first example is generally perceived as being a feminine one—suited to a site selling beauty products, but not, perhaps, to one selling men's clothing. A version using similar but more saturated colors results in a look that will be broader in its appeal.

Figure 8: Increasing saturation can widen a palette's appeal.

Projecting a quality image

The combination of strong, highly saturated shades of brown, orange, and yellow in the second example tends to accentuate the negative aspects of each—cheap, brash, pushy. By using less intense colors the balance is tipped to a warmer, friendlier appearance that also projects a more high-quality image.

Figure 9: Reducing saturation can have a warming effect.

Making a site appear friendlier and more approachable

Blues in combination are known to project a businesslike and authoritative feel, so it's no accident that blue, in various hues, is ubiquitous on big business sites. However, used alone, albeit in various shades, blue can appear cold, conservative, and unapproachable. The addition of red and yellow brings warmth and dynamism to this color scheme.

Figure 10: Adding red and yellow add warmth to blue.

Practicalities of color on the Web

The first time you see your site on a computer other than your own can be a bit of a shock. Such is the variation out there of platform, browser, screen type, size, resolution, available colors, and user preference settings that your site will look a little different to just about everyone who views it. This is not a problem, however. The problems arise only if it looks so different to some groups of users that it is rendered non-functional.

Web-safe color

We are often told that it is safest when creating Web sites to stick to the 256 colors in the Web-safe color palette. This may have been true when the majority of users could see no colors other than these, but according to recent W3Schools statistics, only about 3 percent of users are now so restricted. Frankly, they must see a pretty dull Internet! I don't believe that you need to restrict yourself to that palette, but before you publish your site, change your system display settings to view it at various color depths to satisfy yourself that it remains usable.

Low color vision

About 8 percent of men and fewer women have some form of color blindness—most commonly a difficulty in perceiving red and green—and some color combinations can render a site practically unusable by those with color-deficient vision.

If you look at the FrontPage Color Palette as seen by someone with deuteranopia, the most common form of color blindness, you will see how it affects the perception of colors. You can see that choosing a palette entirely from the red/green areas of the palette is going to present problems for some people.

Figure 11: The Color Palette as it appears to people with deuteranopia, a common form of color blindness.

If you would like to see how your site looks to a user with low color vision or color blindness, you can visit Vischeck, a site that simulates color-blind vision for Web designers.

Conclusion

Take a critical look at your site. What messages are the colors sending? A well-chosen color scheme can project a sense of reliability and trustworthiness that reassures users of your Web site about buying from or working with you. A poorly conceived choice of colors may send them scurrying off to your competitors. Maybe it is time to reconsider the colors you've used on your Web site.

Katherine Nolan is the owner of the Ireland-based Web development company, InKK Design.  Reprinted with permission.  Read it online.