WebRef Update: Featured Article: Communicate with Color

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. [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. [hp.vector.co.jp/authors/VA011243/wcolor_e.htm]

Next: Emotions of colors

This article originally appeared in the February 3, 2000 edition of the WebReference Update Newsletter.

Comments are welcome
Written by Maura "Chip" Yost and