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!
More...
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 Logo
The Homepage
Their Instagram
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)
Most blog posts about website color schemes will tell you to look at websites like this or this to create beautiful color schemes...
... 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.
For Conversions
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
- Black
- White
- 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:
MailChimp makes their calls-to-action stand out using a teal accent color on their primary yellow color.
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.
Shopify keeps it green but make their CTAs stand out by using a light background color.
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:
Which color and feeling do you believe best represents your business?
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!
Muzli creates palettes AND shows you what it would look like on a button!
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.
Active Campaign
Active Campaign keeps things blue with an green CTA
Main Color:
#356AE6
Accent Color:
#19CCA3
Light Shade:
#FAFBFF
Dark Shade:
#1F2129
Neil Patel choose a bright orange with blue as the accent color.
Main Color:
#F16232
Accent Color:
#4387F4
Light Shade:
#FFFFFF
Dark Shade:
#F8F8F8
WooCommerce keeps it simple sticking to purple
Main Color:
#7F54B3
Accent Color:
#674399
Light Shade:
#FFFFFF
Dark Shade:
#F6F6F6
Light Orange is CoSchedule's color of choice using lilac from time to time to make CTA's pop
Main Color:
#F16B45
Accent Color:
#9277E2
Light Shade:
#FFFFFF
Dark Shade:
#F8F8F8
Pat Flynn is taking color minimalism serious using only green as his accent color.
Main Color:
#00B150
Light Shade:
#FFFFFF
Dark Shade:
#F7FAFC
Ahrefs goes bold with blue and orange and with pure white and black.
Main Color:
#054ADA
Accent Color:
#FF8800
Light Shade:
#FFFFFF
Dark Shade:
#000000
As you can see, there's no shortage of big websites using these rules in their color choices to create a professional website!
Tool Tip
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:
Designer approved color selection in Thrive Theme Builder
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:
From this color scheme...
... to this color scheme, in a single click!
Selecting a main brand color in Thrive Theme Builder automatically generates your complete, smart color palette...
... all you have to do is choose the main color!
As you can see, in one click and with just one decision to make, the entire smart color palette automatically generated!
IT'S MAGIC!
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:
Input your main color into the Muzli Color tool to find a great custom accent color!
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):
Click on the element you want to change colors >> unlink the theme color >> add your custom accent color >> save it as a global color!
That’s it!
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!
So Orange and Brown are least favorite colors…but what if these are my two main brand colors…I don’t want to rebrand everything. Yikes!
Don’t rebrand just yet Lynnek! As you can see Neil’s website is orange and VERY popular 🙂
Thank you for the helpful article! This quote came to mind while reading it:
“You can have any color as long as it’s black.”
–Henry Ford
😀
hahahah well he was right about the faster horses… 😉
One thing I’ve never understood about Thrive’s smart colors… my understanding of accent colors is essentially they should be all the clickable elements like links and buttons. But Thrive’s accent color also gets used on the background of blocks too. Isn’t that against conversion best practices?
Hi Christina,
Things are not that black and white 😀
The main goal is for elements to stand out. Take the example of Shopify, they use the green both on the background sections AND on the call to action buttons but only when the CTA buttons clearly stand out against a light background.
Could you use a different accent color for the button? Sure and I would test it on my landing pages!
OMG this is golden advice. Something i have been looking for so long! thanks a lot!
Happy to hear James!
Great insights. Thanks, Hanne!
Happy you liked it Mario
Thank you so much Janne, you are the best!!!
Now I’m here, what about Shane? I haven’t seen him in these post for a long time… It’s every thing ok with him?
Yep he’s doing fine 🙂 He’s not involved in the day-to-day of Thrive Themes anymore but you can find him over at Ikario https://ikario.com/
Great article, Hanne! Quit often I have design discussions with customers. And sometimes it is hard to convince them to use a minimal amount of colors. Maybe your article helps!
Best regards,
Tom
Hi Tom,
I hope so too 🙂