Making Color Choices

Home / Choosing a Background Color / Physical Effects of Color / Choosing a Color Scheme / Applying Color Decisions to Design / Links

According to Colorcom (http://www.colorcom.com/color.html), "Marketing psychologists state that a lasting impression is made within ninety seconds and that color accounts for 60% of the acceptance or rejection of an object, person, place, or circumstance. Because color impressions are both quick and long lasting, decisions about color are a critical factor in success of any visual experience."

Color choices are complex. They take into consideration emotional responses, how colors interact with each other, special needs of the audience, and how they work in the organization of information. My goal is to make this choice as uncomplicated as possible. There are three major factors in deciding on color; background color, and overall scheme and applying color to the design.

Choosing a Background Color

The background color has the greatest effect on the way the audience reacts to a web site as it occupies the most visual space.

• Generally speaking, regardless of the color that you choose, do not use the full strength of a color as the background. Color gets attention and so a bright background usually fights with the text and images. Pale colors are much better (known as tints).

• Often, cool colors are the best backgrounds because they tend to optically recede. Cool colors include: green, blue, purple, gray, and black. Warm colors, on the other hand, such as red, yellow, orange and white, optically advance and most often are best used as colors for emphasis on links and such. (http://www.bixler.com/gryphon/ACTIVITY/18439014.htm)

• If the site will contain a lot of text, a white background with black text is a good choice because it resembles the printed page. (http://www.webdeveloper.com/categories/design/design_choosing_colors.html)

The following is a list of emotional responses to color compiled from various web sources.* Think about what kind of message you want to send your audience and then use these cues to help decide on a background hue.

red

ylw

gld

org

grn

d.blu

l.blu

purp

pink

brn

blk

wht

friendliness

x

x

calmness

x

x

x

honest

x

anger

x

high visibility

x

x

x

cheerful

x

x

eye irritant

x

x

alarming

x

royalty

x

x

stable

x

x

formality

x

nature

x

springtime

x

optimism

x

x

warm

x

x

x

x

cool

x

x

x

x

relaxation

x

pride

x

ambition

x

passion

x

mature

x

youthful

x

x

x

masculine

x

feminine

x

comforting

x

organic

x

x

x

clean

x

serious

x

heavy

x

neutral

x

unpretentious

x

caution

x

conservative

x

elegant

x

contemporary

x

sensitive

x

soft

x

x

emotional

x

x

fertility

x

sadness

x

Physical Effects of Color

Keep the following issues in mind when choosing a background color especially since someone may spend a long amount of time in front of the viewing screen (these effects are especially important when putting together a long slide show or when redecorating your workspace)

Red: raises blood pressure, stimulates appetite and conversation

Blue: lowers blood pressure, calming, gives sense of security, appetite suppressant

Orange: stimulates appetite

Green: easiest color for the eye to focus on for long periods of time, soothes pain

Bright yellow: an eye irritant

*References:

http://www.lava.net:80/~colorcom/culturematters.html

http://www.lava.net:80/~colorcom/optics.html

http://www.lava.net:80/~colorcom/appmatters.html

http://gandalf.iuk.tu-harburg.de/hypgraph/color/coloremo.htm

http://www.kitchen-emporium.com/colour.html

http://www.wallmagic.com/Color/emotions/html

Choosing a Color Scheme

In order to choose a color scheme it is important to understand how colors are organized. They are organized in a wheel type format. The color wheel, as it is called, is made up of twelve different colors. They are arranged as they appear in the visible light spectrum. Arranging them in a circle makes it easier to follow a recipe for a visually pleasing color scheme. The color wheel being used for this exercise is appropriate only for choosing color schemes not for defining the colors themselves. Those are other topics entirely.

There are three parts of a color wheel. The primary colors (called primary because they are not mixed with any other color), the secondary colors (these colors are made up of 50% of each of the primary colors on either side), and the tertiary colors (these colors fall closer to one primary than the other as they are made up of 75% of one primary color and 25% of the other)

Here are 7 different recipes for color using the color wheel:

Monochromatic:

This uses one color only. Variety is possible by using lights and darks of the same color.

Analogous:

These are three or more colors that lie next to each other on the color wheel.

Complementary:

These offer high contrast as they are colors that lie opposite each other on the wheel. Use these schemes when dramatic emphasis is needed.

Triad:

Three colors that lie equally distant from one another on the color wheel.

Split Complimentary:

This is made up of a primary and the two colors lying on either side (but not including) the color directly opposite on the wheel. This is similar (though slightly more subdued) in its contrast to the pure complementary but allows for three colors instead of two.

Tetrad:

Four colors of equal distance to each other on the wheel. This is a rather playful scheme.

Neutral colors include white, black, gray, and brown. These can be used safely within any scheme though gray and brown may tend to muddy up the look.

Keep in mind the following as you make your decision:

• The older the audience, the less blue colors should be used because we loose sensitivity to the color blue with age. (http://gandalf.iuk.tu-harburg.de/hypgraph/color/coloreff.htm)

• Red and green combinations are risky if color coding is important to the communication. Many men are red/green color blind.

• When creating original graphics limit the colors to the 216 color safe palette. (This is a special palette that uses only colors that can be viewed on both Mac and PC environments. For a copy of this palette and more technical information about using graphics in a web site see: http://www.lynda.com/hex.html )

References:

http://www.kitchen-emporium.com/colour.html

Applying Color Decisions to the Design

When deciding which colors to assign to what elements, keep in mind that consistency is very important. Once you establish a color system, your audience will be upset by a deviation from it.

Generally, there are four different elements of a web site that need a color assigned to them. They include the background, body text, unfollowed links, and visited links. This is the way that I would handle it:

Background

This element we have really already discussed. Stay away from very bright colors because they will fight for your viewer's attention. If you are using a pattern be sure it is light enough so that the body text doesn't get lost in it. As previously stated, white is recommended for sites with a large amount of text. Black on the other hand, shows images very well. If the site intends to show off artwork, this is a good choice.

Body Text

It is crucial that the body text remains legible. Make sure that the color chosen contrasts well enough with the background color or pattern. If the background is very dark, a light color text is necessary and if the background is light a dark color is necessary. Most blues are generally a bad idea for body text because they are a harder color for our eyes to focus on. The exception would be a dark navy.

Unfollowed Links

These links should be a color that stands out against the background and the body text. I would suggest a color that is found in one of the main graphics that you may include in the design. Such a choice would serve to create unity within the site.

Visited Links

While some may disagree, I would choose a darker shade of the color chosen for the unfollowed links. That way, when a site has been visited it will look like the light has turned off on it. That would give a cue that the viewer need not visit that link again.

Important tip!

Keep the page simple. Too much text and graphics and your audience will feel overwhelmed. This is especially true for animated .gifs. They are highly distracting. Using more than four colors also breaks this rule.

Links

For a color glossary, check out:

http://www.hermanmiller.com/research/summaries/experience_color/hmi-1d2z.html

For a list of html color codes, visit:

http://www.infi.net/wwwimages/colorindex.html

For background patterns:

http://RAVEN.UBALT.EDU/FEATURES/DESIRES/BACKGROUNDS/

For a list of fun color facts:

http://www.hermanmiller.com/research/summaries/experience_color/hmi-1d2z.html

Home / Choosing a Background Color / Physical Effects of Color / Choosing a Color Scheme / Applying Color Decisions to Design / Links

This site built on 12/11/97 by Bethany Vogt for COM 499