855-873-3707

BLOG

Optimizing color in digital design

The wrong website color choices can kill your brand

Colors trigger wide range of emotions

Color enriches our lives and affects us psychologically in countless ways. Different colors trigger a wide range of emotions, appetites and actions. In addition, there are important cultural variations in how colors are perceived. Yet despite the enormous body research on color, choosing the right colors for clothes, interiors, and, especially, digital design, is difficult. If you happen to wear discordant colors, it’s no big deal. However, selecting the wrong digital color pallet will undermine your organization’s marketing and brand image. Bottom line– studies confirm that about 50% of the people visiting a website don’t come back if the colors turn them off.

In this four-part article, I’d like to share with you what I’ve learned (sometimes the hard way) about optimizing color in digital design.

Graphic-2

The impact of individual colors

Before considering cultural variations (especially important for international organizations) and color combinations, here’s the first of a two-part overview of what we know about the impact of standard colors-

  • Red 

    Excites and is associated with love, energy and power. Case in point–red is commonly used in Las Vegas casinos because it makes people feel more confident and powerful, thereby encouraging risk, i.e., gambling. Scientific study also shows conclusively that red stimulates appetite and even increases blood pressure. It’s no surprise, then, that food companies like Coca-Cola, McDonald’s and Burger King include red in their logos and websites. –Because of its intensity, red has some negative associations, e.g., danger, bodily injury, fire, etc. This is why any financial or insurance company avoids anything but minimal touches of this color on their websites.

  • Blue

    Is the most popular color with more than half the world’s population, with a somewhat higher majority for men. Its calming effect no doubt accounts for much of its appeal. By contrast with red, blue encourages a sense of trust, calm, and stability–and so is the favorite for a wide range of organizations wanting to convey those values. This includes the tech, financial, medical and automotive industries. On the downside, overuse of blue can project coldness.

  • Black

    The strongest of the neutral colors, exists on almost every website, usually as the non-dominant color. If dominant, it conveys sophistication and elegance, but needs to be used artfully to avoid overwhelming the viewer. Interestingly, black is not a natural color. This is because what we perceive as black is actually a dark shade of grey (pure black would not reflect light at all).

  • White

    Like grey, is used primarily as a background color on digital media. While it’s associated with purity and virtue in Western cultures, the Chinese see it as the lifeless counterpart to red, which they associate with life and vitality.

In my next installment, I’ll complete this overview of the pros and cons of using individual colors in digital marketing. Next, I’ll discuss cross-cultural differences in color preference. I’ll introduce guidelines for choosing color combinations that increase conversion rates.

What research reveals about color preference

Earlier, I underscored the critical importance of digital color selection with the finding that studies confirm 50% of people visiting a website don’t come back if the colors turn them off. I also provided information about the pros and cons of using red, the universal appeal of blue, how black (really dark grey) and white are indispensable in creating contrast.

Colors across the spectrum communicate different emotions, as follows–grey–balance and calm; green–peace and wealth; blue–trust and reliability; purple–creativity and wisdom; red–excitement and danger; orange–friendliness, confidence and risk; yellow–warmth and upliftment.

The following graphic is illustrative-

color

  • Grey

Projects seriousness, conservatism and maturity. On the downside, it is also associated with gloom, old age and sadness. However, in combination with a vibrant color like orange, grey can create a perfect complementarily. Because our senses are overwhelmed by so much screen-based sensory input and daily work/life stress, grey’s wonderfully calming effect makes is increasingly popular not only in digital design but also home decor. As a background color, it makes other colors pop with a sense of elegance that white doesn’t provide. –One logistical downside–grays read differently across screens and platforms. Even standard “websafe” grays often lack consistency from one screen to another.

  • Green

Conveys nature, harmony, healing, life, food and money–with universal use for eco-friendly products and services.Green is at the nexus between warm and cool colors, giving it great versatility. It incorporates the calming effect of blue with the energizing qualities of yellow. As such, it conveys balance and stability. Darker shades connote money/affluence.

  • Purple

Is traditionally associated with royalty and luxury, even to the point of decadence. Purple/lavender is distinctly more popular with women than men. Purple is a standard color choice for fashion and luxury goods.

Keep in mind that relatively unpopular colors like orange and brown can be used to great positive effect as background tones in combination with more popular dominant colors.

  • Orange

Is a bold color commonly associated with confidence, playfulness and danger. Some color psychologists claim that orange conveys risk-taking more powerfully than red. Because orange is so hard to miss, hunters and construction workers wear orange vests for greater visibility.

While not a popular color, it has been used with great results in the logos and advertising of companies like Home Depot (friendliness/excitement) and Harley Davidson (excitement/risk).

  • Yellow/Gold Yellow

Is the liveliest color, connoting happiness and intelligence. Psychologists have observed that yellow stimulates engagement and activates memory. However, yellow, like red, also conveys caution, and so is commonly used for warning signs and traffic signals.

  • Golden yellow

Is especially ‘salubrious,’ communicating joy and enrichment. Often used to highlight the important elements in digital design, yellow should not be used when trying to sell financial or luxury products. This is because men, in particular, perceive the color as childish.

And one more not on the chart-

  • Brown

Connotes earthiness, reliability and confidence. It’s sophisticated and conventional at the same time. While it has many positive associations, like orange, brown is unpopular as a stand-alone color. Interestingly, the same shade of brown when labeled mocha is much more popular in interior design.

In my next installment, I’ll discuss cross-cultural differences in color preference. Next, I’ll introduce guidelines for choosing color combinations to increase your conversion rate.

What research reveals about primary color preference

Even popular color like blue can fail miserably

So far, I’ve explained how when variables like tonality, contrast, and cultural preferences are miscalculated, even a popular color like blue can fail miserably in digital media. Likewise, typically unpopular colors like orange and brown can be highly effective in the right shade, combination and proportion.

Colors and cultures

Colors have different values/associations from one culture to another. For example, while red represents the life force and good fortune in China, it is symbolic for bad luck in Germany. Because so much is at stake in entering new markets, large international corporations have spent enormous amounts of money evaluating the impact of different colors. –We at OWDT bring a variety of cultural sensibilities and backgrounds to our work. Combining our intuitive sense of color with careful research, we have been able to create highly effective color pallets for our regional and international customers.

How we devised a winning color pallet for a chinese investment company

Zhongmen Group is a breakthrough, high-profile financial firm exclusively dedicated to generating institutional-scale outbound direct investment from China to global markets abroad. We designed their brand and website to attract clients across the global cultural spectrum. Fueled by the economic imperatives of the Chinese government, this organization–like others in like it–is on a steady trajectory of growth.

If you visit their website, you’ll find an elegant layout incorporating a judicious use of Chinese red to enhance viewer engagement. This contrasts nicely with a muted gold and other shades that create an optimal look for international viewers who expect to see colors that are consistent with the Chinese aesthetic, but will respond better to a somewhat less intense version of that pallet.

Here’s a sampling of different cultural color interpretations/associations

Red

  • China/Japan: the life force
  • India: purity
  • Western: excitement, love, passion, danger
  • South Africa: mourning color
  • Hebrew : sacrifice, sin
  • Christian : sacrifice, passion, love

Blue

  • European/Western–soothing, “something blue” bridal tradition, depression, sadness, corporate credibility
  • Iran–mourning, color of heaven and spirituality
  • China–immortality
  • Hinduism–the color of Krishna
  • Judaism–holiness
  • Christianity–Christ’s color
  • Middle East–protection
  • Worldwide–‘safe’ color

Yellow

  • European–happiness, hope, joy, cowardice, hazards
  • Asia–imperial, sacred
  • China–royalty, nourishing
  • Japan–courage
  • India–merchants/business
  • Buddhism–wisdom

Orange

  • European–fall, harvest, creativity, stand out color for protection
  • USA–Halloween (with black), cheap goods
  • Hinduism–saffron, a sacred color

Green

  • Islam–hope–spiritual purity (the cloak of the prophet was believed to be green)
  • European/American–spring, environmental awareness, new birth, safety, money

Purple

  • European–royalty
  • Catholicism–death, mourning, crucifixion
  • Thailand–mourning

White

  • European–marriage, peace, doctors, hospitals, angels,
  • Japan/China–mourning, death
  • India–unhappiness
  • Eastern–funerals

Black

  • European–mourning, funerals, death, rebellion, evil, cool
  • Thailand–bad luck, unhappiness
  • Judaism–unhappiness, bad luck, evil

Moving forward, i’ll introduce guidelines for the critical, often challenging task of choosing color combinations to increase your conversion rate.

 

Selecting the right color combination for your website-intro

 

I’ve explained how when variables like tonality, contrast, and cultural preferences are miscalculated, even a ‘safe’ color like blue can fail miserably in digital media. Likewise, much less popular colors like orange and brown can be highly effective in the right shade, combination and proportion.

Selecting the right color pallet

Determining the right combination of colors–factoring in hue, shade, vibrancy, contrast, complementary and proportion of one color to another is tricky business. For starters, your logo’s color(s) need to consistent with your digital platform’s color combination–or, at least, complement it.

By far the safest option when choosing colors is to work with a company specializing in design. Creating your own logo or select colors for your website by yourself can easily backfire. We at OWDT take pride in our record of success creating eye-catching digital platforms for our clients, ones that significantly increase conversion rates. That said, we collaborate closely with you, attending carefully to your preferences to ensure their vision is respected–while at the same time explaining the advantages of making any necessary changes that would improve your website’s market appeal.

The color wheel

Untitled-1

    • Complementation

      When colors are across from one another on the color wheel, they eye can easily distinguish between similar elements. As you can see above, such color combinations include red and green, blue and orange, purple and yellow. That kind of extreme contrast can easily be overdone, however, and should be reserved for one or more critical elements of the website (e.g., link to product information or services).

    • Contrast

      There needs to be a clear contrast between your background and text color. A lack of contrast results in poor readability and low conversion rates. On the other hand, if one or both colors are too vibrant, it will strain viewers’ eyes. –So, best to choose a light color for the background and a dark color for the text itself (or the reverse). I personally believe there is an overuse of lighter grey for text color that can be hard to read.

    • Vibrancy

      Different color intensities convey different emotions. Brighter colors resonate energy while darker colors relax the user. Calls to action are best highlighted with bright colors.

Initial color combination guidelines

A few additional considerations–

    • Nature provides a rich array of color schemes that are innately appealing. Let nature inspire your choices!
    • If your color scheme is too intense it will pull the eye in too many directions, undermining your message.
    • Using fewer colors helps the reader focus on your content. For example, you often find one color for headlines and a complementary color for the text.
    • Finally, to avoid putting the viewer to sleep, incorporate at least some small elements of vibrant color.

 

But wait, the best is yet to come! In my fifth, final installment, I’ll provide an overview of specific color combinations that work best to attract customers.

 

Over half of viewers will immediately leave the page if the colors look wrong

Lastly I’ll be describing some of the basic color choice guidelines we at OWDT follow to optimize website conversion rates. Remember, over half of viewers will immediately leave the page if the colors look ‘wrong.’ While other elements of design, e.g., composition, hierarchy of information, proportionality of elements, etc., are all important—none has greater impact than color selection.

Three classic approaches

For websites with three colors, a triadic color scheme generally works best—

1

As you can see, the three points of the equilateral triangle above create one of many tri-color scheme options. This approach ensures that the colors have the same vibrancy and complement one another.

When choosing four colors, a compound color scheme provides a total of four colors, two from each side of the color wheel–

2

This provides an additional complementary color.

The final classic color scheme approach is the analogous color scheme

3

Some designers like the calming effect of choosing three colors next to one another on the color wheel. The downside of this choice is its lack of contrast (although they are differentiated by vibrancy). Because this results in call to action elements being harder to find, I don’t favor it.

Winning color combinations

When working with two strong colors, include a thin neutral white, light grey or black line around their respective shapes to make them pop. Consider the Pepsi logo below, for example, in which the red and blue are separated by a pronounced layer of white-

Visa

The universally popular blue also looks great with contrasting bright orange-

Starbucks

In addition,white and greenwork together beautifully, perhaps even better with black borders/highlights, as below-

Apple

Choose grey and white for an elegant, subdued look-

LinkedIn
Should you want to combine both black and white with a color, blue is the safest choice. But make sure either bright blue or white is dominant, as below-

Puma
Should you prefer darker shades, black is wonderfully versatile, but overwhelming as the dominant color. For many readers, a black background makes even the purest white print difficult to read, as you can see in the example below-

HD

Among darker shades, black and bright grey is a powerful combination as is black and orange (i.e., with white included for balance)

CH

Black and white work very well with red too, but make sure red is not dominant, as it then can create a harsh contrast with black. The following example, incorporating light white/gray, provides an attractive balance-

Spotify

Finally, I’d also recommend black and green with touches of white for an uplifting, clean aesthetic-

Examples of tools that can simplify color selection

  • Black and white work very well with red too, but make sure red is not dominant, as it then can create a harsh contrast with black. The following example, incorporating light white/gray, provides an attractive balance–
  • Kuler–Developed by Adobe allows the user to create and modify different color palettes. It has some cool features, but has been criticized for having cumbersome interfaces and an inability to lock in individual colors.
  • Color Scheme Designer 3 (Paletton)–This software is often recommended as a good choice for beginners because of its simplicity, though it lacks instructional/skill development value.

The acid test

No matter how sophisticated the designer, A/B Testing is the acid test for determining if a particular color palette is going to increase business. (Check out our “The Many Advantages of A/B Testing” blog post in page 16 of our blog archive). This tool is indispensable in helping design teams work with business owners to ensure best results.

More Insights