Some things can severely hold you back from launching your online business.
Being paralyzed over which color scheme to choose for your website can be one of those hurdles to overcome.
In this post, you’ll discover an easy and surefire way to pick the right color scheme for your site without spending hours on the process!
Why Choosing the Right Color Combination for Your Website Is Important
For Brand Recognition
Having a clear color scheme for your website helps with brand recognition.
If your logo is a certain color, your website a completely different color and your social media accounts yet another color, it becomes hard for customers to quickly recognize something as coming from your business!
Of course there are other elements that will play into the recognition of your brand such as fonts and illustration style, but color is one of the biggest components.
Let's quickly look at an example…
As a WordPress user, I’m sure you’re familiar with the WooCommerce brand:
WooCommerce is consistent in their use of the purple brand color, which makes it easy for visitors to always know they’re interacting with WooCommerce.
For Visitor Sentiment
Choosing the right color combination for your website will influence the feeling visitors have about your site.
You might know that every color evokes certain feelings (and we’ll talk more about that a bit later), but — even more importantly — the color combinations you choose will either give your website a professional or an amateurish look.
Getting color combinations right is one of the hardest things in web design, which is why our general rule of thumb is:
- Use just 3 colors (2 of which should be black and white)
... but the truth is that this will lead you down an amateurish web design path if you’re not a pro designer!
Don’t get me wrong, it's fun to look at these beautiful color schemes! It might even give you an idea about which primary color to use (i.e. color #3 from the rule of thumb above), but selecting a complex color palette and attempting to implement it across your site is a recipe for disaster.
The right color scheme will improve your conversions.
If you’ve followed Thrive Themes for a while, then you know I’m not talking about the exact color of your button! But rather making sure the right elements stand out on your page.
As a rule in conversion focused web design, you want your call-to-action (CTA) button to stand out from the rest of the page.
This is the only exception you should make to the 3 color rule above.
So that actually means your website can have 4 colors:
- Main color
- Accent color (for calls-to-action)
For example, Mailchimp uses yellow for their main color and a teal accent color to make their calls-to-action stand out:
However, Shopify only uses dark green as their main color, but smartly adds call-to-action buttons on a light background to create enough contrast and make the CTA’s stand out.
As you can see, you can have 4 colors or you can keep it to 3. It's up to you!
Now that you know how important a color scheme is for your online business, are you ready to pick?
Choosing Your Color Palette
Get ready for some fun!
1. Pick Your Dominant (Main) Color
First, pick a dominant color for your website. This is the color that you will use about 90% of the time.
Here’s an infographic from The Logo Company showing the different feelings colors tend to evoke in people:
The goal here is not to get caught up in the psychological minutiae of color choices, but to find a color that matches your brand personality and the feeling you want your customers to get when they visit your site.
I’m sure you’ve done your research and created your buyer persona, right?
If not, go do that first!
Think about your audience and answer these two questions:
- What is your brand personality?
- What do you want them to feel when they visit your site?
Are you a business coach and want to exude dependability and authority? Go with blue as your dominant color.
Maybe you are an affiliate for organic products, which makes green a natural choice.
A life coach for creatives? Use purple to create a feeling of imagination, fun, and wisdom.
Did You Know?
According to Joe Hallock’s Colour Assignment, blue and green ranked high as favorites for males and blue and purple for females. Apparently nobody is a big fan of orange or brown.
And generally, men prefer bold colors whereas women prefer soft colors.
With these things in mind, go ahead and pick a main color that represents your brand best based on the color chart above.
2. Pick Your Accent Color
This accent color will only be used when you want something to stand out. Let’s say 10% of the time.
“But wait! I’m not a designer. I don’t know what colors look good together!” you might be thinking.
Don’t worry. Thanks to the diligent work of countless artists and designers before us, we don’t have to know what colors look good together.
While I told you before that many online tools will lead you straight to being labeled a color-amateur, they can be helpful in understanding how different colors work together.
Remember, the goal is to find a color that will stand out from your dominant color, but doesn't clash with it.
This is where color theory comes into place (as well as the color pairing tools that implement color theory without you ever having to fully understand it!)
One of the color pairing tools I found to be really helpful is Muzli Colors.
In one compact overview, Muzli Colors shows you different color palettes based on color theory AND how those colors could be deployed on an example user interface.
This really gives you a feel for how different color pairings would look like on your site!
As you can see, not only does it showcase different color schemes based on various design theories, but it also shows you what a given accent color looks like on a CTA button!
3. Shades of Black and White
We're almost done!
I instructed you to pick 3 colors, just as long as 2 of those colors were black and white…
But you might have noticed that a lot of websites don’t use pure black or pure white in their designs. Rather, they use shades of black and white.
For example, instead of using pure white (#ffffff), you could instead choose a white that exhibits slight undertones of purple — such as #fbf9ff — if your main brand color is purple...
... or a really really dark blue — such as #030212 — if your main brand color is blue.
So if you don't want to use pure black or white on your website, complete this step by selecting a shade of black and a shade of white. You'll use these shades for things like borders and background colors.
Did you finish picking your colors? If so, you now have your website's color scheme decided!
If not, go back and pick your dominant color first. Then use the instructions above to pick the other colors to complete your brand's color pallete.
Examples of Good Website Color Schemes
Does this color design process sound too simple?
Let’s have a look at some well known brands that follow these exact rules to perfection on their websites.
As you can see, there's no shortage of big websites using these rules in their color choices to create a professional website!
Wondering how I found the exact color codes for these websites? I used a Google Chrome extension called ColorPick Eyedropper that allows you to hover over any color on a site and get the exact hex code!
It’s a super easy tool that’s part of our Chrome extension recommendations for online businesses
How To Implement Your Chosen Colors on Your Website
I hope by now you've chosen your main color, your accent color and perhaps even the shades of white and black we recommended!
As you'll soon see however, your main brand color might be all you need to design a pro website — in just a few minutes...
Let Our Smart Color Technology Do All the Heavy Lifting For You!
We know colors play an important part in making your website look professional, which is why we implemented Smart Color Technology in both Thrive Theme Builder and Thrive Architect Smart landing pages.
Smart Color Technology lets you choose your main color...
... and then automatically creates a professional color palette to go with it so you don't have to fuss with finding those shades of black and white at all!
Let me show you.
When you look inside the Branding tab of Thrive Theme Builder, you’ll see a selection of predefined colors:
These colors are hand-picked by our professional team of designers to ensure a fantastic look for your site.
So go ahead and pick the one you like best based on the brand color research you did at the start of this article.
As soon as you select your site's brand color, the entire color scheme of your Thrive Theme Builder website will update to match:
As you can see, in one click and with just one decision to make, the entire smart color palette automatically generated!
And once you have your main brand color selected in Thrive Theme Builder, you can still decide to add a custom accent color.
For example, teal is my main color in the following example.
I then used the Muzli Colors tool to figure out a good accent color to go with it and found these color palette suggestions:
I decided the pink color would work well as my stand-out accent color and found its hex code to be #99006c.
I can now add this custom accent color as a global color on my website.
And the beauty of saving any important color as a global color inside the Thrive visual editor on your website, is that you can change all instances where a particular global color is being used across your site in a single click (if you ever decide a change is needed).
For example, if you have a CTA button on your homepage, an icon on your about page, and a click-to-call button on your contact page that all use the same pink accent color...
... as long as the color is set as a global color on these elements, changing the hex code from pink to yellow on any one of these elements will update all three automatically!
Sounds complicated, but it's really quite simple...
Just click on any Thrive visual editor element that you want to change colors, unlock it from the assigned theme color scheme, input the hex code for your selected accent color (pink in this example) using the Thrive visual editor color selector tool that appears, and then save this color as a global color (so you can apply it to elements across your website AND change it everywhere it's applied — with just one click — in the future):
You now have a professional looking website with a smart color scheme PLUS a special accent color to use on your pages when important calls-to-action need to stand out.
Your Turn to Pick Some Colors
Over to you!
What colors did you pick?
Let us know in the comments below which color scheme you picked for your website and whether or not you worked it out manually or let Thrive Theme Builder do all the heavy lifting!