Springtime: Using color to evoke emotion

Boér Attila, Designer

www.csszengarden.com/083

AFTER A COLD WINTER filled with monotones, Boér Attila woke to the first clear, sunny day of spring and found the colors to be uplifting, energetic, and joyous. This shift from winter to spring inspired aspects of Attila's visual design, especially the color choices.

That color induces a variety of human emotions has long been established. This is why we do things like define red as being a hot color. We relate red to a flame, or red-hot peppers. We then allow those ideas to influence the way we use color in designfor example, using earth tones like browns and tans in package design for natural products.

In Springtime the monotonous colors of winter meet the emerging colors of spring, resulting in a color palette that is neither cold nor hot, but rather expresses warmth and harmony, creating a soothing, positive feeling for the viewer.

The Influence of Color

As a designer seeking to offer a message to your audience, you'll find that an understanding of the psychological effects, cultural influence, and gender bias of color is as important as the more technical concerns.

Sending a Clear Message

While the way your content is written, laid out, and enhanced with imagery will undoubtedly provide an overt means of how the goals of a site is expressed, the use of color is a significant piece of visual communication. The experienced designer knows to use colors that are appropriate for the message and the audience. Color can be as persuasive to the human eye as imagery and text, and perhaps even more so at times.

Note

Certainly, using the reverse of expected colors can create conflict, making for an interesting approach to design, which can lead to excellent results. However, being daring in that way requires even more planning and testing to ensure that the chosen colors are doing their job. The point here is to show the natural correlation between colors and human response.

If your assignment is to create a site for a death metal rock band, the use of bright colors such as yellow and pink on a white background would be counterproductive to the message. Death metal is synonymous with darkness, and while bright colors can certainly be used within the design, the clearest message about the band is communicated through use of dark, heavy colors typically associated with that genre of music.

Conversely, if you're creating a site for a classical quartet, a very dark site won't convey the sense of sophistication and the lighter sound of that genre. Choosing colors that are in accordance with the subject matter and message of your site is crucial for a design to be effective.

Color and the Human Psyche

The influence of color on human emotion is an area of great fascination. It is a complex relationship involving numerous factors.

If someone cannot see, the point is obviously moot. For those with partial color perception, the experience simply cannot be the same as for a person with full color perception. Approximately 1 in 12 North Americans suffers from the most widespread form of color blindness (dichromacy, the inability to distinguish two colors from one another, most commonly red and green). For that reason, it's important to keep your audience demographic in mind when choosing your colors.

The hue of a color can change its significance, too. A bright green evokes a certain emotion, whereas khaki green produces different results. Similarly, adding texture to color can alter its perception. TABLE 1 lists common colors and their general psychological associations.

Table 1. Psychological Associations with Common Colors

Color	Associations
Red	Power, energy, love, passion, aggression, danger
Blue	Trust, conservative, secure, clean, sorrowful, order
Green	Nature, earth, health, jealousy, renewal
Orange	Fun, happiness
Yellow	Optimism, hope, philosophy, cowardice
Violet	Royalty, mystery, religion
Brown	Reliability, comfort, endurance, earth
Gray/silver	Intellect, futurism, modesty, sadness, decay, elegance
Black	Power, sexuality, sophistication, mystery, fear, unhappiness, death
White	Purity, cleanliness, precision, innocence, sterility, death

As you might have noticed, there are some contradictions within associations of individual colors, and dichotomies between different colors like black and white. Red, for example, both inspires passion and expresses danger (perhaps the two really aren't so different?). Again, there are numerous factors connected to these apparent contradictions, and cultural as well as gender differences are responsible for a great deal of the discrepancies.

In the case of Springtime, the hue and intensity of the greens chosen are soft and pleasing, evocative of grass and leaves. The touch of blue in the design also helps extend the expression of nature, (FIGURE 1).

Figure 1. The palette for Springtime, including a range of green, a hint of blue, and white.

Color, Culture, and Gender

Attila is Hungarian. Do an artist's cultural roots and the environment in which he or she lives and works influence their design choices and perception of color? Experts would agree that this is so. Similarly, the gender and culture of a viewer of Springtime may well affect that visitor's experience of the design.

Note

To learn more about color and find numerous research articles, books, and other color resources, visit Professor J. L. Morton's Web site, Colorcom (www.colorcom.com). Another great site for information about color is Causes of Color (http://webexhibits.org/causesofcolor).

Culture and gender extend and complicate the basic responses to and associations with color discussed in the preceding section. TABLE 2 provides some insight into color responses and associations based on culture and gender. As you can quickly surmise, the use of colorespecially in a worldwide forum such as the Webhas to be considered very carefully.

Table 2. Color and Influences of Culture and Gender

Color	Influence
Red	In China, a symbol of profound good luck. When mixed with white, this intensifies. More women choose red over blue.
Blue	The color of immortality in many Eastern countries, blue is the color of holiness for the Jews, and it represents Krishna in Hinduism. It is revered throughout the world and, as a result, is considered to be the most globally safe color. Men prefer blue to red.
Green	Associated with money in the United States but not necessarily in other cultures. Green has strong emotional associations in Ireland, where it represents Irish Catholic nationalists. Women can identify more named hues of green than men.
Orange	In the United States, a tradition in packaging design is to use orange to signify inexpensive items. When designing with orange for business sites, it's important to bear this in mind. Orange has strong emotional connotations for the Irish, as it represents Protestantism. Men prefer orange to yellow.
Yellow	A sacred, imperial color in Asian cultures. Women prefer yellow to orange and associate it with warmth and optimism.
Violet	Associated with mourning in Europe. It is also associated with newage and alternative religions, so it can be considered controversial. Violet is found relatively rarely in nature: a few species of flowers and some saltwater fish.
Brown	A neutral color both culturally and gender-wise.
Black	Mourning and death in most Western cultures and many others, too.
White	Mourning and death in most Asian cultures. Purity and chastity in most of Western society.

Color Palettes for Web Sites

As you build color palettes for your own projects, you'll want to keep these color issues in mind. Along with knowing your message, you'll need a sense of your audience's expectations in order to come up with a range of palettes that suit your needs.

Study the Audience

It's the golden rule of communication: Know your audience. Because the human psyche, one's cultural perceptions, and one's gender all play a role in how color is perceived, it's necessary to understand your audience prior to determining a color scheme. In some cases, color associations are so broad as to be appropriate for all groups. This would include designs with a lot of blue, brown, oras is true for Springtimegreen.

Note

Before launching a design, it's a good idea to create a number of test palettes. You can do this quite easily in Adobe Photoshop (FIGURE 2). Create an empty document and, using the Color Picker, add colors to a strip, seeing how they mix and match. You can then set up a test document to apply your colors using CSS.

Figure 2. Building a color palette in Photoshop.

CSS is helpful in the prototyping phase of the design process: You can create several style sheets relating to each of your test palettes and apply the color to the test document. You can even set this up as part of a usability study, in which you deliver different color schemes to your subjects and then gauge their responses.

Color expert J. L. Morton, whose site is mentioned earlier in this chapter, suggests that designers stick as close to expected relationships as possible. If the site is for children, the use of colors that express joy can be very handy. If you are expressing elegance, black and silver can be an excellent combination in the United States. If you are appealing to men, generally speaking, lots of blue is always good. If you are appealing to women, reds and pinks are likely to be more appropriate than blue. If you're designing a nature site or one celebrating nature, the use of greens, blues, and browns make sense.

Color Options in CSS

Fortunately, CSS offers many options in terms of color values. We can use any of the following:

• Color names. There are now 17 name values available for your use in CSS: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua, and orange. Example:

   color: orange; 

  
  

• RGB values (literal). You can use the literal numeric red, green, and blue values for a colorin this case, a light blue. These can be found in Photoshop (FIGURE 3) or your image-editing program of choice:

  Figure 3. Finding RGB information in Photoshop.

  

  
  

   color: rgb(51,153,204); 

  
  

• RGB values (percentages). Simply blend red, green, and blue percentage values to make the color you wantin this case, violet:

   color: rgb(93%, 51%, 93%); 

  
  

• Hexadecimal values. These are six-digit hexadecimal values, which can be found in Photoshop (FIGURE 4) as well as numerous online references. They are alphanumeric, with each value pair corresponding to an RGB value. The hexadecimal color system has been in use on the Web for a very long time, so most readers will be familiar with it:

  Figure 4. Using Photoshop's Color Picker, which displays hexadecimal values.

  

  
  

   color: #0000FF; 

  
  

• Hexadecimal shorthand values. Shorthand can be used only in cases where each value pair is the same; for example, #FF6699 can be made into shorthand, but #808080 cannot. The blue example above fits this requirement, resulting in the following CSS:

   color: #00F; 

  
  

• System colors. This is a set of keywords, allowed in CSS 2.1, that give the designer the option to use the colors on the visitor's computer. Example:

   color: WindowText; 

  
  

Note

For more information on system color keywords, see www.w3.org/TR/CSS21/ui.html#system-colors. Note that these colors will not be part of the CSS 3.0 color module.

Colorful Conclusions

Whether you are designing for personal or professional reasons, it's best to start by understanding your message and the audience to whom it is directed. With that information in hand, you are far more likely to make color choices that serve to enhance your message.

Springtime is an excellent example of color design that is completely appropriate for the goals it is meant to achieve: express the transition from winter to spring, bring a touch of calm optimism to the visitor, and ensure that those emotions are expressed to a global audience, which the CSS Zen Garden most assuredly has.

Note

Many people continue to design using the "Web-safe" palette. However, since the majority of computers available today support millions of colors out of the box, following that convention is no longer necessary unless you are designing for a specific demographic. Readers familiar with the Web-safe palette will notice that the colors used in Springtime are well outside the 256 colors it specifies.