Design & Development

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 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 perceptions 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, intelligence, 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.
Mercedes uses a black, gray, and white palette to show sophistication, refinement, and cleanliness.

Mercedes uses a black, gray, and white palette to show sophistication, refinement, and cleanliness.

  • 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.
Disney uses bright, simple colors to target children and their parents.

Disney uses bright, simple colors to target children and their parents.

  • Victoria’s Secret. Victoria’s Secret features pink (romance and gentleness) shades, which speaks perfectly to its target market of women interested in lingerie and beauty products.
Victoria's Secret uses shades of pink to convey romance and gentleness.

Victoria’s Secret uses shades of pink to convey romance and gentleness.

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 your chosen colors. 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 instead of 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 one.

Use this to your advantage by having one 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 train 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.

Dell uses a green isolation color to guide site visitors.

Dell uses a green isolation color to guide site visitors.

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 uses an orange isolation color to guide site visitors.

BarStools.com uses an orange isolation color to guide site visitors.

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.

Light colored backgrounds can help with color contrast.

Light-colored backgrounds can help with color contrast.

Dark backgrounds can work well if you have very bright products and text.

Dark backgrounds work well if you have bright products and text on your site.

Dark backgrounds work well if you have bright products and text on your site.

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 the values and personality of your store.

 

Ezra Firestone
Ezra Firestone
Bio   •   RSS Feed


x