“The wrong website color choices can kill your brand.”
The effective use of color is a crucial element in digital design that can greatly impact the success of a product. Color selection can evoke emotions, convey meaning, and enhance user experience, making it an essential component of branding, communication, and accessibility. However, optimizing color in digital design is much more than simply choosing a few pleasing shades. It requires a deep understanding of color theory, cultural associations, and user preferences. Designers must consider factors such as color contrast, color blindness, and color psychology to ensure that their designs are both visually appealing and functional. By taking the time to optimize color in digital design, designers can create products that are not only aesthetically pleasing but also engaging, memorable, and effective in achieving their intended goals.
Colors trigger a 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.
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.
What research reveals about a 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, and 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
- 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. - 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.
Even popular colors 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 of 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 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 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 be 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 in 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
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
- 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 the 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 the viewers will immediately leave the page if the colors look ‘wrong.’ While other elements of design, e.g., composition, the hierarchy of information, the proportionality of elements, etc. are all important—none has a greater impact than color selection.
Three classic approaches
For websites with three colors, a triadic color scheme generally works best—
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.
This provides an additional complementary color.
The final classic color scheme approach is the analogous color scheme
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-
The universally popular blue also looks great with contrasting bright orange-
In addition, white and green work together beautifully, perhaps even better with black borders/highlights, as below-
Choose grey and white for an elegant, subdued look-
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-
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-
Among darker shades, black and bright grey is a powerful combination, as is black and orange (i.e., with white included for balance)
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-
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 on page 16 of our blog archive). This tool is indispensable in helping design teams work with business owners to ensure the best results.
The Role of Optimizing Color in OWDT
OWDT is a web design Houston company that understands the crucial role that color plays in digital design. As such, they follow the rules of optimizing color to create visually appealing and effective digital products. OWDT’s team of designers has a deep understanding of color theory, cultural associations, and user preferences, which allows them to choose the right colors that evoke emotions, convey meaning, and enhance user experience. They take into account factors such as color contrast, color blindness, and color psychology to ensure that their designs are both aesthetically pleasing and functional. By optimizing color in digital design, OWDT creates products that are engaging, memorable, and effective in achieving their intended goals. Whether it’s creating a new website or redesigning an existing one, OWDT uses the rules of optimizing color to create digital products that stand out and make an impact.
