Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / How-To Articles / Choosing a Color Scheme For Your Online Store

Choosing a Color Scheme For Your Online Store

March 9, 2015 By Nick J Leave a Comment

Choosing a color scheme for your online storeChoosing a color scheme for your online store might be an arbitrary decision based on your color preferences.

Usually peoples intuition for their color scheme is pretty good. But should you leave it to chance?

Spending a couple hours to learn the theory of color basics is recommended. If it does nothing else it will affirm the decisions you have made based off of your own intuition. But more likely it will or give you some deeper knowledge to craft your color scheme and result in increased sales.

Color Basics

Basically, some colors look good together and some colors don’t.

Through mathematics and the invention of the color wheel we can see patterns of why this might be.

There is a great tool I use called Kuler that lets you choose a color and will then give you other colors that match based on rules you can choose from.

I will show you an example of this soon, but first I just want to discuss what impact choosing a base color will have on your brand.

Emotional Color

Colors have emotional meaning to your visitor and the color scheme you decide on for your brand needs to take this into account. It is no accident that fast food restaurants all use red to make you hungry, and IBM uses its corporate blue to represent trust.

Before you choose a color scheme, here are a few good exercises to identify a personality for your brand.

  • Think of twenty words that describe your brand.
  • If your brand was a car what sort of make would it be?
  • What sort of feelings do you want to be associated with when someone sees your brand?

To learn more about what each color means here is a good article.  http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

Existing Brand Assets

If you already have a logo then you will often find that the colors you chose were intuitively based on some form of emotional color theory.

If you discover you have chosen incorrectly and it is too costly to update your printed material from the old colors you can leave your logo as is and just add some secondary colors that will give your brand the emotional meaning you were looking for.

A Note on Contrast

Black, white and shades of grey can be used in addition to the color scheme you choose for your site and you can use these to create contrast. Dark colors on light colors and vice versa (light colors on dark colors) stand out more on the page than two colors closer in shade.

You can use this to highlight a particular element on a page by making the contrast of its background greater.

Into Action

To show you an example, I will use the logo from a company Wooassist manages: www.iotagarden.com.au

https://www.dropbox.com/s/k09mmys93n967as/Screenshot%202015-01-09%2012.16.15.png?dl=0

Here are some notes when we re-designed the IOTA site about 12 months ago.

color-1We don’t want to change things too much so we will stick with the two base colors of light and dark blue that are used for the logo. 

I would like to introduce one more color that is a bit brighter and contrasting with the current blues that will liven up the site. 

I am thinking maroon, but we can use adobe Kuler to see what a good contrasting color is mathematically. 

These are the colors from the logo.
Light blue #8da5aa
Dark blue # 005293

Without going too much into the details of how Adobe Kuler works, the end results speak for themselves. When I enter base color dark blue # 005293, the complimentary color was a brown.

color-2That didn’t suit the objectives of livening the site up so if we look at the triad relationship I can see the magenta color I was originally thinking of #a01410

 And if we look at how these colors look together touching each other and apart you can see Kuler’s maths have not let us down. These colors look great together.

color-3

So here you can see with just a couple hours research and a couple of tools we were able to come up with a color scheme that suited our existing brand assets, while at the same time achieving our new objectives.

What color best represents the feeling of your brand?

People that read this article also liked

Design Tweaks on WooCommerce email-characterHow to Optimize Email Opt-in Forms for Increased Conversions in WooCommerce Related-Products-in-WooCommerce_featured-imageHow to Change the Number of Related Products in WooCommerce superhero-silhouette-hero-imageHow to Add a Hero Image in Storefront

Filed Under: How-To Articles Tagged With: colors, conversion optimization, design tweaks, how-to

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • The Ultimate Guide on How to Set Up Shipping on Your WooCommerce Store
  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales