Communicate with Color

First impressions are lasting impressions, and Web designers have only a
fleeting moment to engage a visitor. According to the Institute for
Color Research, "all human beings make a subconscious
judgment about a person, environment, or item within 90 seconds
of initial viewing, and that between 62% and 90% of that
assessment is based on color alone." [www.ccicolor.com/research.html]

The importance of color selection and coordination as it applies to Web
design is often overlooked. "Your colors are part of your message. And
depending on which message you wish to convey, the colors you
choose can either support, emphasize, or contradict your message"
emphasized Michael Fortin, Ph.D. [www.costlessweb.com/specol3.htm]
Being knowledgeable about some basic color considerations in the
planning stages expedites site design, engages the Web audience,
and minimizes costly mistakes. Using your knowledge of color
considerations promotes better relations with clients, too.

So what's involved in effectively using color in Website design? Factors
include the influence of individual color perception, color mix, gender
preferences, emotional responses to color and how culture can affect
those responses. Colors convey specific meanings, but the precise
interpretation is influenced by the viewer's perception and identity.
There are innate perceptional differences among us. Ask a
group of people to think of blue, and each will imagine a different
shade and hue. Knowing that individual color perceptions
exist and compensating for them speeds client site
approval and overall satisfaction.

Understanding some principles of color theory simplifies design
decisions. The primary colors (those that can't be produced by mixing)
are red, yellow and blue. The secondary colors (a mix of the primaries)
are orange, green and purple. Tertiary colors, a mix of primary
and secondary colors, are yellow-orange, red-orange,
yellow-green, blue-green, blue-purple, and red-purple. Complimentary
colors lie opposite on the color wheel; colors clash when hues vary.
The impact of a particular color varies based the colors adjoining it.
Overlooking this color principle can mean unexpected,
unattractive or illegible site results. See how three adjoining colors
can be perceived as four at Color Matters.
[www.colormatters.com/colortheory.html]

There are numerous tools available to help time-strapped Web designers
quickly make sound color coordination decisions. Those with a
well-developed sense of color coordination will appreciate the
instant gratification of Color Serve Java by Brian Hall.
[http://www-students.biola.edu/~brian/csapplet.html]
Use this color wheel to pick colors for backgrounds, text, links,
vlinks, and alinks. Have the general colors in mind, but want
to view some options? Check out Lynda Weinman's charts,
carefully organized by color (hue) or value (organized by light,
middle and dark values). [www.lynda.com/hex.html]

Even designers who are not naturally adept at color coordination can
produce pleasing and effective color schemes using the Webmaster's Color
Planning Laboratory at Visibone. [www.visibone.com/colorlab/] This
interactive graphic (available as a tastefully done poster) displays
the 216 colors universally supported by Web browsers, arranged
symmetrically by hues: red, orange, yellow, spring, green, teal,
cyan, azure, blue, violet, magenta, and pink.

Each color chip is embossed with the hexadecimal code used in HTML and
the decimal color code used in many graphics tools. "Clashing colors are
of very similar but not quite identical hue. On the poster, only color
chips with the exact same hue are touching. Colors like that do not
clash. There are 61 groups of them. So if you're trying to use shades
of the same hue together, you may want to make sure they're in
the same group," suggests Visibone's Bob Stein.

For the broad generalizations about color to be useful, they must be
considered in the context of a site's message and its target market
demographics. Imagine a toy site done in deep, dark colors definitely
not the right approach. Each gender's color preferences and
perceptions vary, adding to the mix of color considerations. Men
prefer color with stronger hue and saturation (bright colors); women
tend to prefer tints to shades (soft colors). Women have a clear
preference for cool colors, Natalia Khouw noted.
[www.colormatters.com/khouw.html] Men are generally more tolerant
of black, white and gray than women. One in ten men is color blind, but
less than 1% of women are. You can test how color-blind visitors will
view your color scheme by converting it to grayscale or black and white.
For the color-blind, What Color is a tool for identifying RGB value as
well as the color name. [http://www.hikarun.com/e/]

Applying color principles fosters desired audience response. Warm colors
tend to "move toward you" while cool colors tend to "move away from
you." So a designer can use warm colors for emphasis and cool colors to
minimize emphasis. Brighter colors attract our eyes first, and if
overused, can cause visual confusion. Overusing a bright color as an
accent reduces its effectiveness.

Emotional responses influence color considerations, and differences in
color value and intensity can evoke very different emotional reactions.
Light red is associated with cheerfulness, but bright or dark red can
induce irritability. Light yellow-green is associated with freshness
and youth, but the darker shade olive is associated with drabness
and decay. Light sky blue is associated with tranquility, but the
deeper value indigo is associated with depression.

Basically, in North American mainstream culture, the following meanings
are signaled by color:

--  Red : urgency, passion, heat, love, blood, excitement, strength, sex,
passion, speed, danger
-- Yellow: warmth, sunshine, cheer, happiness, cowardice, brightness
-- Blue: truth, dignity, power, coolness, melancholy, heaviness, trust,
reliability, belonging, coolness
-- Orange: playfulness, warmth, vibrant
-- Green: nature, health, cheerfulness, environment, money, vegetation,
nature, fresh, cool, growth, abundance
-- Purple: wealth, royalty, sophistication, intelligence, royal,
spirituality, dignity
-- Pink: soft, sweet, nurture, security
-- Black: sophistication, elegant, seductive, mystery, death, rebellion,
strength, evil
-- White: purity, cleanliness, lightness, emptiness, pure, virginal,
clean, youthful, mild
-- Gold: prestige, expensive
-- Silver: prestige, cold, scientific

Notice how a particular color may have both a positive and negative
connotation? This emphasizes the importance of careful color selection
and coordination.

Different cultures interpret colors differently, and a savvy Web
designer can avoid disappointing results and costly re-works by some
upfront cultural research. "White is the color of death in Chinese
culture, but purple represents death in Brazil. Yellow is sacred
to the Chinese, but signified sadness in Greece and jealousy
in France. In North America, green is typically associated with
jealousy. People from tropical countries respond most favorably
to warm colors, people from northern climate prefer the cooler
colors" according to Keysteps.

Imagine the negative first impressions made by selecting a culturally
offensive site color scheme. That's only one example of why it's time
well-spent considering how color choices support a site's message,
its target audience preferences and demographics.

About the Author:

Maura "Chip" Yost's interest in computers began when she received a
Commodore 64 for Christmas, which at the time she considered the
electronic equivalent of a lump of coal. She worked for over 11 years
as an employment specialist and workshop presenter, and holds an
advanced degree in training.

You can reach Maura at: john@dataplusnet.com.