Color Psychology in Creative Design

It’s worth repeating that the single most important thing you can do to build appeal, mood, and ambiance for your site is to select an appropriate color scheme. There really are no awful colors—any color can look attractive when placed with appropriate color companions. Even though web colors are mixed differently than traditional media, that doesn’t mean that you need to learn all new theories to make color work on the web; the old theories about pleasing color schemes still hold true.

Sometimes the color scheme is a given: we can’t imagine IBM allowing any color other than blue to dominate its web site, or Coca-Cola using anything other than red, or FedEx using anything other than purple and orange, or IKEA using anything other than yellow… Well, you get the idea. Many organizations have long-established color schemes from which you simply cannot deviate. In this case, creating the color scheme for the site can be as straightforward as choosing colors from the logo, followed by choosing a few additional tints or shades of those colors for variety.

When you are allowed to choose your own colors, you first need to consider the audience and purpose of the site. A site for children might employ primary colors or some other design of fully-saturated brights. A rock group site might use a funky combination of neon colors, or a dark and murky scheme, depending upon the mood the band wants to project. A more staid and stable color scheme, like monochromatic blue, is appropriate for a corporate site.

Colors evoke particular associations and emotions in our minds. Here is a summary of some of those associations: —Don’t forget this is for the Western world, you’ll understand, keep reading.—

Yellow

Cheerful, sunny, upbeat, happy, luminous, intense.

Orange

Energetic, cheerful, glowing, vital, upbeat, playful, happy, comedic, festive, loud, popular with children. It carries many of the same qualities of its components of yellow and red. Orange lost popularity for many years because of its association with the period of the late 1960s and early 1970s but is now making a comeback.

When lightened to peach or coral: soft, upscale, nurturing, healthy. When darkened to deep rust: sensual, earthy, spicy, warm, ethnic.

Red

Attention-demanding, energetic, exciting, courageous, hot, aggressive, dynamic, fiery, intense, passionate, sexy, bloody, warning, angry, prideful. The most attention-gathering color.

When deepened to shades and tones: rich, lush, elegant, refined.

When lightened to hot pink: shocking, energetic, youthful, trendy, vibrant, faddish.

When lightened to paler pink: romantic, tender, feminine, sweet, sentimental, soft, delicate.

Purple

Rich, elegant, creative, spiritual, confident, eccentric, sensual, daring, futuristic.

When deepened to a darker purple: regal, majestic.

When lightened to lavender: soft, sweet, genteel, nostalgic, delicate.

When grayed to a tone: sophisticated, subtle.

Blue

Tranquil, calm, peaceful, meditative, restful, reliable, traditional, clean, fresh, cool, icy, alluding to sky and water, divine, cold, sad.

When deepened to darker blues: powerful, authoritarian, credible.

When lightened to pale blues: soft, serene.

When tinged with green (like teal): rich, unique, upscale, appealing to both genders.

When tinged with purple (periwinkle): warm, trendy, energetic.

Green

Natural, fresh, clean, healthy, hopeful, youthful, abundant, rebirth, spring, soothing, cool, clean, woodsy.

When deepened to darker greens: richness, security, safety, prestige, safe, secure, stately.

When lightened to paler greens: calm, soothing.

Brown

Durable, earthy, rustic, organic, healthy, ethnic, substantial, solid, timeless, reliable, stable, antiquity, permanent, drab, dirty.

When lightened to tans and beige: rock, sand, natural, classic.

White

Pure, clean, chaste, pristine, innocent, bright, clarity, hygienic, healthy, stark, minimalist, cold.

When deepened to off-whites: warm, friendly, calm.

Black

Sophistication, elegance, chic, dramatic, mysterious, powerful, stylized, somber, ominous, foreboding, death, depression, despair, fear.

Fully-saturated hues portray a mood that is vivid, intense, or childlike. Tones and shades usually look sophisticated, while tints are associated with babies or femininity. Colors that can be described by a single, commonly-accepted word are considered less complex and less sophisticated than colors that require uncommon or multiple words for description. Contrast the level of sophistication of easily identified colors like “red” or “orange” or “green” with colors like “mauve,” “salmon,” “celadon,” or “grayish-green with a blue undertone.”

Different cultures have different symbolism and associations for colors, and sometimes it’s important for those of us who tend to be occidentocentric to be reminded of that. The classic example is that while white portrays purity and the celebration of a wedding in Western culture, it’s symbolic of death in some Eastern cultures. Green and yellow have particular connotations in both Islamic and Buddhist cultures. People from Eastern cultures seem to prefer brighter colors in very different schemes than in traditional Western art. And many Russian citizens today might well have negative associations with the color red, symbolic of Communism.

Entire books are devoted to color symbolism around the world; if you are designing a web site for a culture outside of your own, your best bet is to research that particular culture thoroughly. Even then, test the site with people native to the culture before releasing the site to the general public.

After deciding upon the ambiance you want to portray, you need to consider the actual colors that best portray it. Simple schemes are the easiest color combination for beginning designers to use, so, most of the time, you should limit your color scheme to variations of one, two, or at most three colors. Although we have all seen gorgeous web sites employing many more colors that that, it takes a master’s hand to pull off unifying a large number of colors. More often, pages with myriad colors look disjointed, amateurish, and chaotic. — A web page on which every element is a different color also looks chaotic. —

The point is that you shouldn’t fall into the trap that every element on the page needs to be a different color. In fact, the opposite is true; every color you use on the page should usually appear in more than one place on the page. You might use one color extracted from the logo for text links and navigational graphics, another color from the logo for backgrounds, and a third color from the logo for headers, subheads, table backgrounds, and dividing rules. Repetition of color is the surest way to unify a page.

For visual consistency, most sites should also repeat the same colors throughout the entire site. You might think such repetition would be considered boring, but it is really a reassurance to visitors that they are still in the same site as the home page.

That said, sometimes colors might vary from page to page because of a color-coding scheme. For instance, look at the guardian.co.uk. Guardian using different color scheme on their every single category. Even their logo changing too. Television, Radio and TV Coverage pink, Sport green, Money purple, News red…

So, the different colors should be of approximately the same value and saturation, express the same mood, and still appear to be part of a unified, site-wide color scheme. Finally, if the color scheme changes for different pages, it’s even more critical that other characteristics of the site are consistent, such as layout, navigation, and graphics.

Related Resources

Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean by Jen Miller

Info Please – Color Psychology

Wikipedia – Color Symbolism & Psychology

Vandelay – Different Methods For Choosing Color Schemes In Web Design

About.com – How Colors Impact Moods, Feelings, and Behaviors

Free Personality Lüscher Color Test

Logo Critiques – Color Psychology In Logo Design