If you take a deeper look at the infographic mentioned above, you can see that Kissmetrics suggests which colors you should use depending on the nature of your business. It would be easy to assume then that if you are a clothing store you should settle on a pink color scheme. But the decision-making process\u00a0is not clear-cut and definitive answers don’t exist. I realize that’s not very helpful. But let’s take a look at how color theory works to glean a bit more info about how to land on the right color for your next site.<\/p>\n
![\"Easel](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/color.jpeg\")
<\/div>\n<\/div>\nColor Theory<\/h3>\n
Color theory is a topic so broad and diverse that numerous books have been written about it. So we\u2019ll stick to the basics here. Essentially, color theory can be broken down into three major parts\u00a0as it refers to web design:<\/p>\n
- \n
- Contrast.\u00a0In layman\u2019s terms, contrast is the difference between two colors. Contrast serves two functions in web design: it establishes readability as well as draws the viewer\u2019s attention towards a specific element on the page. Whenever you are in doubt, the best practice is to choose a very light color for the background and a very dark color for the text itself.<\/li>\n
- Complementation.\u00a0Complementary colors are found opposite each other on the color wheel. For example, red\u2019s complementary color is green and blue\u2019s complement is orange. When used correctly, these colors can accent each other and make a very effective color scheme.<\/li>\n
- Vibrancy. This refers to the general mood particular color sets: the brighter, warmer colors (red, orange, yellow) tend to energize us while darker, cooler shades (green, blue, purple) tend to be more relaxing and tranquil.<\/li>\n<\/ol>\n
Color Meanings and Culture<\/h3>\n
Colors have different meanings across different cultures. The way we perceive a certain color may not be the same as someone from Japan or the Middle East. \u00a0When planning a website, it\u2019s important to understand who your target audience is and how that particular culture views color associations. Web Designer Depot<\/a>\u00a0has a great breakdown of colors and their meanings cross-culturally. I\u2019ve summarized them here:<\/p>\n
Red<\/h4>\n
- \n
- In western cultures, such as North America and Europe, red is the color of passion and excitement. It symbolizes danger, love, excitement, and power but it can also carry a negative connotation when connected to the countries that used to belong to the Eastern communist block.<\/li>\n
- In Eastern and Asian cultures, red represents happiness, joy, and celebration; and as such, it is often worn by brides on their wedding day because it is thought to bring good luck and happiness.<\/li>\n
- In the Middle East, red represents danger and caution. Some also consider it the color of evil.<\/li>\n<\/ul>\n
Orange<\/h4>\n
- \n
- The West sees orange as the color of harvest and autumn. Traditionally, in the United States orange signifies the fall season beginning in September through to Halloween and then Thanksgiving in late November.<\/li>\n
- Indian cultures consider orange a sacred color while in Japan, orange symbolizes courage and love.<\/li>\n
- Finally, the Middle East associates orange with mourning and loss.<\/li>\n<\/ul>\n
Yellow<\/h4>\n
- \n
- In Western cultures, yellow is associated with warmth, summer, and hospitality. Oddly enough, in Germany, yellow is associated with envy whereas most of the rest of the world associates this feeling with the color green.<\/li>\n
- In Eastern and Asian cultures, yellow is not only considered sacred but imperial as well. In India, it symbolizes commerce.<\/li>\n
- Contrary to that, in Latin America and Egypt, yellow is associated with death and mourning. The rest of the Middle Eastern cultures view yellow as the color of happiness and prosperity.<\/li>\n<\/ul>\n
Blue<\/h4>\n
- \n
- Many Western cultures use blue for bank logos because it represents trust and authority. It\u2019s also associated with the birth of baby boys and considered to be calming, soothing, and peaceful. In a negative context, it represents sadness and depression.<\/li>\n
- In Eastern and Asian cultures, blue is associated with immortality and strength. Contrary to the western world, blue is a feminine color in China.<\/li>\n
- In Latin America, blue is often associated with religion due to the high presence of the Catholic church.<\/li>\n
- The Middle East sees blue as safe and protecting as it is the color associated with Heaven, spirituality, and immortality.<\/li>\n<\/ul>\n
Green<\/h4>\n
- \n
- While Western cultures associate green predominantly as the color of the Irish and luck, green also refers to nature, the environment, the protection of environmental causes, and progress. In a negative context, green symbolizes envy or jealousy.<\/li>\n
- In Eastern and Asian cultures, green is the color of nature, fertility, and youth. However, it\u2019s also associated with infidelity and exorcism.<\/li>\n
- In Latin America green is the color of death.<\/li>\n
- For the majority of the Middle East green represents strength, fertility, luck, and wealth and is most commonly associated with Islam.<\/li>\n<\/ul>\n
Purple<\/h4>\n
- \n
- In Western cultures, as well as most Eastern and Asian cultures, purple is the color of royalty and is associated with wealth and fame.<\/li>\n
- On the other hand, Latin America and Thailand see purple as the color of mourning and death.<\/li>\n
- The Middle East sees purple as symbolic of wealth.<\/li>\n<\/ul>\n
Pink<\/h4>\n
- \n
- In Western cultures, pink is the color of femininity and signifies the birth of a daughter. It also represents sweetness, childhood, or fun.<\/li>\n
- In Eastern and Asian cultures, pink is also considered feminine where it also signifies marriage. The exception is China which, as stated above, sees blue as the feminine color.<\/li>\n
- In Latin America, pink is often used as a color for buildings, while the Middle East doesn\u2019t tie pink with anything in particular.<\/li>\n<\/ul>\n
Brown<\/h4>\n
- \n
- Western cultures associate brown with the earth but also health or even barrenness. Brown is stable, dependable, and wholesome.<\/li>\n
- In Eastern and Asian cultures brown is the color of mourning while in Latin America brown discourages sales and is generally considered disapproving.<\/li>\n
- Middle Eastern cultures associate brown with the earth and comfort.<\/li>\n<\/ul>\n
Black<\/h4>\n
- \n
- The Western world sees black as the color of finality, death, formality, and mourning, as well as the color of control and force.<\/li>\n
- In eastern and Asian cultures, black represents masculinity and is the color for boys in China. It also symbolizes wealth, health, and prosperity, while in Thailand and Tibet, black is most closely associated with evil.<\/li>\n
- Like in the East, Latin America associates this color with masculinity and mourning.<\/li>\n
- Interestingly enough, the Middle East uses black to symbolize both rebirth and mourning.<\/li>\n<\/ul>\n
White<\/h4>\n
- \n
- In Western cultures, white is the color of purity and peace. It is the color associated with weddings, hospitals, and holiness.<\/li>\n
- However, in Italy and Eastern and Asian cultures, white is used for funerals and represents sterility, mourning, unhappiness, and misfortune.<\/li>\n
- In Latin America, white has many of the same associations as in North America and is connected to purity and peace.<\/li>\n
- Similarly to black, the Middle East associates both purity and mourning with white.<\/li>\n<\/ul>\n\n
![\"Conversion](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/conversion.jpeg\")
<\/div>\n<\/div>\nColor and the Conversion Funnel<\/h3>\n
A conversion funnel helps you visualize and understand the flow your potential customers<\/a> go through after they land on your website and take the desired action. In its most basic form, the conversion funnel has four\u00a0main elements: awareness, interest, desire, and conversion. Let\u2019s break them down:<\/p>\n
Awareness<\/h4>\n
Awareness is all about attracting potential customers or clients to your site. This is the part of the funnel where they get introduced to your brand. They get familiar with your business, your company culture, and your mission statement. This is where colors start to play a major\u00a0role. By knowing who your target audience is and knowing the emotions you want to evoke, you can start planning your overall color scheme.<\/p>\n
Interest<\/h4>\n
At this stage, you are working to pique the interest of your website visitors. You want to guide them to explore further and dive deeper into your website. Your energy should be focused on polishing headlines, images, banners, and writing a compelling copy.<\/p>\n
Desire<\/h4>\n
Now that you have their interest, you have to make them really want your product. Your website\u2019s imagery, great product options, videos, and testimonials should provide all the necessary information that they need in order to take action.<\/p>\n
During the website planning stage, you should choose 3 colors that will represent your brand\u2019s website. The general rule of thumb is typically to use neutral colors such as white or black for the background and use your main brand color to create a visually striking effect. Your primary brand color could be used for links, navigation menus and headlines. The third color should be an accent color from your brand palette that will serve one specific purpose. That brings us to the fourth stage of the conversion funnel.<\/p>\n
Conversion<\/h4>\n
This is where the visitors take your desired action or in other words, convert. What that action is, depends entirely on you but the main goal is that they take action. This is where you need to draw their attention to that one single action. The best way to do that? Use the accent color from your color scheme. This is where you want a color that compliments your color scheme but is contrasting enough to draw the eye to your main call-to-action.<\/p>\n
In other words, if your website uses mainly blue then it would make little to no sense to make your call-to-action button a darker shade of blue. Using a color like orange or a shade of yellow or red would be more beneficial.<\/p>\n
Do, however, make sure your call-to-actions contrast with your brand colors enough to stand out, but not clash. You want it to draw people\u2019s eye, pushing them toward conversion, not scare them off with an unappealing color scheme.<\/p>\n
How to Color Optimize Your WordPress Website<\/h3>\n
Now that you know what colors mean and how the conversion funnel works, let\u2019s discuss how to come up with a color scheme for your website that is optimized for conversion.<\/p>\n
Planning your website color scheme is an integral part of your conversion strategy. Your personal color preference matters very little in this respect. Before you even embark on that stage, you should bear in mind what the primary goal of your website is and who your target audience is.<\/p>\n
Based on your audience, your color scheme will be different if your target audience is female then that of someone whose target audience is teens and young adults.<\/p>\n
While you may think that you can\u2019t go wrong with pink if you are targeting women, you might be surprised to find out that roughly 35% of the women prefer blue<\/a> as their favorite color, followed by green and purple.<\/p>\n
Est\u0113e Lauder makes great use of blue on their website:<\/p>\n
\n\n- \n
![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/Screenshhot-Estee-Lauder.jpg\")
<\/dt>\n- The Este\u00e9 Lauder website uses blue as a primary color<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n
While Colour Pop targets the same female audience but with a purple color scheme:<\/p>\n
\n\n- \n
![\"Colour](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/Screenshot-Colour-Pop.jpg\")
<\/dt>\n- Colour Pop is targeted to women and uses purple to zero in on its audience.<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n
To further complicate things, Jimmy Choo targets a female audience, too, but it focuses its website colors on an elegant black and white scheme which is meant to provide a sense of luxury and sophistication.<\/p>\n
\n\n- \n
![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/Screenshot-Jimmy-Choo.jpg\")
<\/dt>\n- The Jimmy Choo site definitely targets women but it uses black and white.<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n
Men, on the other hand, prefer blue, followed by green and black, while the younger population prefers blue, green, and purple, with purple becoming increasingly popular with older age groups.<\/p>\n
Dewalt does a great job with its black and yellow color scheme; black being a third favorite color for men and the color that signifies masculinity and force. Yellow provides an excellent contrast color in their call-to-action and tagline.<\/p>\n
<\/p>\n
\n\n- \n
![\"Dewalt](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/Screenshot-Dewalt.jpg\")
<\/dt>\n- Dewalt targets men with a black and yellow color scheme.<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n
How to Determine the Best Color for Your Call-To-Action<\/h3>\n
Unfortunately, there is no clear-cut answer to this question. In terms of call-to-action buttons on the web, red, orange, and green are predominantly used. When you consider the fact that green usually signifies GO it\u2019s no surprise that many have tried to translate that to the web. However, a number of studies have shown that green is not the optimal choice for a CTA.<\/p>\n
![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/03\/forminator-free-600x168.png\")
<\/section>