How to Choose Colors for your Ecommerce Site
I often ask ecommerce business owners about the color choices for their stores. Most of the answers are similar to “I like these colors and thought they would look nice,” or “My designer came up with it.” If that is how you pick your colors, you are missing a huge opportunity to convey the personality of your brand to your potential customers and shape their experience with your store.
The study of how colors affect the subconscious mind is called “color psychology.” Colors are communications. Through social conditioning we learn to associate colors with emotions, concepts, actions, and qualities. For example, Americans associate the color red with the action of paying attention because traffic stop signs and danger signs are generally red. Because of this association, using red text when flashing an error message in your shopping cart is an effective way of getting your customer’s attention.
Here are the most important concepts when choosing or changing the color scheme of your store.
1. Use Color Psychology to your Advantage
You need an understanding of which feelings and emotions different colors evoke. Here are some common interpretations for the basic colors. There are varying interpretations, meanings, and perception between cultures and contexts.
- Red. Attention, excitement, anger, love, warmth, comfort, life, blood, stop.
- Yellow. Adventure, happiness, competence, enthusiasm, wealth, sophistication.
- Green. Balance, good taste, envy, health, money, harmony.
- Blue. Honesty, corporate, high quality, masculinity, competence, coldness, loyalty, trust, reliability.
- Pink. Love, compassion, sophistication, sincerity, romance, gentleness.
- Violet and purple. Creativity, authority, rower, royalty, respect, mystery.
- Brown. Friendliness, ruggedness, sadness, comfort, organic, natural.
- Black. Grief, sophistication, expensive, intelligent, death, slimming.
- White. Simplicity, order, innocence, purity, cleanliness, neutrality.
- Gray and silver. Timelessness, practicality, neutrality, refinement, contemporary.
2. Use Appropriate Colors for your Market and Products
Certain colors appeal to certain markets. Some colors are more appropriate for luxury products while others are more appropriate for food items. Color psychology is not an exact science but you can leverage it to move in a general direction on your site. Here are some examples.
- Mercedes. Mercedes has a strong and simple palette of black (expensive and sophisticated), gray (refined), and white (clean). These associations are appropriate for Mercedes’ target customers: wealthy people who presumably want to be seen as distinguished and important.
- Disney. The Disney site uses a different feel, as its target demographic is children and parents — mostly mothers. Children tend to prefer bright, simple colors. Women tend to prefer soft colors. Disney’s bright blues (reliability) and muted grays (contemporary, timelessness) appeal to both demographics.
- Victoria’s Secret. Victoria’s Secret features shades of pink (romance and gentleness), which speaks perfectly to its target market of women interested in lingerie and beauty products.
Pay attention to the color schemes of the online stores you visit. Then, think about the experience you are creating, on your own site, through the colors you choose. Notice how those colors fit together and how they feel. Are they energizing, calming, or neutral? Do your colors work against each other, or do they send complementary messages?
If you’re unsure, the safest bet is to stick to calming and reserved colors like blues, gray, and white, as opposed to vibrant and flashy colors like red, yellow, and purple.
3. Use the Isolation Effect
The isolation effect, also known as the von Restorff effect, states that an item — in this case a color — that stands out is more likely to be remembered. For example, if someone looks through a list of words typed in black with one word highlighted in purple, she will likely remember the purple word more than the black ones.
Use this to your advantage by having one color that is your store’s isolation color for your calls-to-action, add to cart, opt-in, and other links. Use that color only in places that you want to stand out. For example, if green was your isolation color, use it only on your add-to-cart buttons and the text links that lead your customers directly through your sales process. By staying consistent with this color usage pattern, you are training your visitors to click when they see your isolation color — green in this example. This is a subtle yet powerful way of keeping your customers moving toward purchasing. It’s like giving them subconscious trail markers to follow.
In the examples above, Dell effectively uses green as the isolation color by using it only in the places that lead visitors down the purchase funnel.
BarStools.com chose orange as its isolation color. It appears only on the Select Options, Add to Cart, and Checkout buttons — i.e., those that move customers along the purchase process.
4. Choose a Background Color
Whites and light grays are best for backgrounds as they provide contrast for most colors without being distracting. Most stores use a light shade for their backgrounds.
Dark backgrounds can work well if you have very bright products and text.
This style works for Foot Locker given the bright colors and simple shapes of its products and the masculine target demographic.
As a rule, keep your website clean and simple by using no more than three main colors. You can use a few different shades of these main colors to accent your store, but generally less is more.
When choosing your color scheme, think beyond your favorite colors. Your color scheme communicates to your visitors about the values and personality of your store.