Color and Your Website

We gauge the world around us, in part, through our perception of color. And colors affect us immensely—triggering chemical reactions in our brains that evoke emotional responses, feelings and even memories.

When color is used poorly on websites it can create unease—even a mild jarring effect—in users. For example, red, can be a wonderful brand color, but can quickly become overwhelming when overly applied. If selected too light, the color becomes an outdated baby pink, and if too dark: the color of blood.

When designing a website, the precise color—tone, shade and vibrancy—must be selected carefully, and applied with restraint.

A Rainbow of Possibilities and Pratfalls: The Meanings of Colors

The connotation of colors is culturally unique, which makes color selection that much more fascinating and complex. Did you know that in Western societies, white represents purity, but in Japan white is the traditional color of death?

Here are the most common attributes and negative associations we culturally assign to colors here in the United States, along with some well-known brands that use the color in their logo:

Blue

Positive: Blue is the most likable color; almost nobody hates blue. It is the color of trust and dependability, calm and serenity, and is strongly associated with the sky and sea.

Negative: Nobody hates blue, which might be why it’s also the most popular color in business. Depending on your industry, blue may serve as a poor differentiator for your brand and website.

Brands:

Red

Positive: Red stimulates the senses unlike any other color—activating chemicals in the brain and raising the heart rate. Red is energetic, passionate, invigorating and attention grabbing.

Negative: Red also represents anger, danger and debt.

Brands:

Green

Positive: The color of nature, green represents health and freshness, and is viewed as being soothing, relaxing and representative of the harmonious. Green is the most visible wavelength on the color spectrum and, in terms of popularity, is second only to blue.

Negative: Green also has a dark side associated with illness and jealousy.

Brands:

Yellow

Positive: The color of sunshine, yellow communicates light and warmth, positivity and optimism, and is considered the most cheerful of colors. Yellow is the first color the brain identifies, making it a powerful color for making something “pop.”

Negative: Yellow is an eye irritant. The overuse of yellow (and bright colors in general) quickly causes fatigue. Some studies show that babies will even cry more in a yellow room.

Brands:

Purple

Positive: Since the days of antiquity, purple has been a special color. Long heralded as the color of royalty, it evokes a sense of sophistication and wealth. Purple is the color of enchantment, magic, and is also one of the most adored colors amongst creative personality types.

Negative: Because of purple’s strong association with royalty, the color is sometimes viewed as expensive—too expensive.

Brands:

Fun Fact: Purple is in vogue for 2014. Read more about “Radiant Orchid” and the Color of the Year here.

Pink

Positive: Hot Pinks are viewed as vibrant, fun and vivacious. Dusty pinks appear sentimental, while light pinks are romantic.

Negative: Pink is girly—really truly girly—which can be good, or possibly bad. Pink can make women feel at home, but it can be at the expense of a large portion of the male audience.

Brands:

Orange

Positive: Fun and playful, orange is the color of exuberance. Lighter oranges tend to be used in the upscale market, while more peach-like tones are popular in healthcare and food service.

Negative: Orange can be viewed as overly childlike and gregarious. Orange is seen as a color representing “cheap,” or “low-quality” goods. Orange is also the most disliked color.

Brands:

Brown

Positive: An earthy color, brown embodies durability and stability. Warmer browns like terracotta can convey an upscale look. Brown is also an ideal color for trucking and industrial companies, because it hides dirt well.

Negative: Browns can be viewed as dirty and unkempt.

Brands:

Black

Positive:  Dramatic and sophisticated, black evokes a strong sense of power.

Negative: If not used well, black can look overbearing or boring.

Brands:

Gray

Positive:  Timeless and practical, gray is also paired with just about any other color, which makes it ideal for situations where mixed colors will be used.

Negative: Gray is associated with loss, depression and things that go bump in the night.

Brands:

All colors fall into three distinct categories: warm, cool and neutral. Warm colors like red and yellow are high-energy colors that tend to convey excitement. Cool colors like blue and green tend to convey calm. Browns and blacks are neutrals and are often used in support of more exuberant colors to keep the eye from being overwhelmed.

Total Recall: Color Helps Memory, But Restraint is Key

If a picture is worth a thousand words, a color picture is worth a million. That’s because the extra data color provides helps the human brain process and tag the input, allowing us better recall. Research has shown that color can improve visual comprehension by 73%.

So, color, color, color. Lots of color. Right? Not so fast. Humans only process so much visual input at a time. Too much color can be unpleasantly overwhelming. So apply it in moderation as a tool for emphasis—such as with your logo, an important excerpt of text, or conversion buttons.

Make It Pop: Creating Highlight and Emphasis

Imagine a green ball in a forest. It would quickly become lost in the trees. Now imagine the same ball if it were an obnoxiously bright yellow.

That ball would shine like the sun on a clear day.

The lesson: Incongruent color draws the eye from the area around it.

Color is a powerful tool for separating an item from its surroundings. Our eyes will gravitate to it, find it quickly and easily. Likewise on your website, items that are a different, minority color will stick out.

For example, a bright red button that is on a white background is more likely to be clicked than a red button on a reddish background. The added contrast between the two colors helps the button pop out.

Another example is using a “different” color for a  headline than the body of text. By using color, the title will stand out without needing to be as large.

Do Not Underestimate the Power of Contrast: Legibility in Text

Help I’ve fallen and I can’t read this text.

Ouch. Nothing quite like the eyestrain caused by difficult-to-read text. If only the above sentence had a little more contrast!

Imagery with a low contrast from its surroundings can become muddled and indistinguishable.

On websites with a lot of text, a white background with black text is almost always recommended. This offers high contrast and tends to make text easier to read, thus preventing eye strain.

What’s the Difference: Color Blindness

There are about 11 million people in the United States with some form of color blindness.

Most who are color blind see some color. The combination most effected by color blindness is red-green,which appears as yellow-on-yellow. For many with poor color vision, this makes the typical “green” for good and “red” for bad, like in traffic signals, simply lost in translation.

Safer color combinations when considering color blindness are red-blue and yellow-blue, which retain their differentiation to people with most forms of color blindness.

When working to make content that is equally accessible to those with poor color vision, pay close attention to contrast and web accessibility guidelines.

Target Audience: Ready, Aim, Fire

As always, when making decisions about color, it’s important to consider your target audience.

In aggregate, men and women have slightly different reactions when it comes to color and the brands they love.

Men tend to prefer bright colors while women prefer softer ones. Some colors have been pigeonholed into gender demographics, such as pink and purple only being for girls. The meaning of different colors can also make them feel friendlier to one gender or the other.

Children between 2–5 years tend to prefer bright primary colors with lots of contrast. However, recent data has shown that young children are becoming more receptive to more multifaceted multi-tonal color palettes, thanks to the integration of tablets, movies and multimedia.

Conclusion

This is not permission to pull out your box of crayons and color every single thing in a smorgasbord of primaries and pastels. Your website might not need a lot of color at all. Take Apple—the majority of their website is black and white. It is well designed and effective, too—the balance of basic design elements such as shape, size and placement work harmoniously to draw users down conversion paths quickly and cleanly.

Color is powerful. It emphasizes, clarifies and defines. Color increases brand recognition by 80%. But, it can also become noise, or worse, a distraction.

In the digital space, websites are the face of brands. It is, of course, more than color that defines them. But when the right colors are selected and used appropriately, it makes the user experience more memorable and the first impression more favorable. Alternately, the wrong colors or the misuse of the right colors can sap the effectiveness of all the other great work that went into the site.

When it comes to color, remember the “Goldilocks” principle—not too much or too little but just right.