Everything You Need to Know About Website Color Schemes & How to Pick One Today
Let’s face it. It’s easy to get derailed when trying to build a website for your business. Hell, it’s easy to get derailed at any point of your business. (I got derailed just trying to write this post…)
In August, we talked about one of the most common reasons we hit the brakes early in the site building process, the logo, and what to do about it. It's also useful to be aware of the fundamental web design principles before we'd start building a site from scratch.
Another early roadblock new entrepreneurs run into, picking website color schemes.
And if you’re one of the lucky ones who spent way more time than you needed researching, iterating, thinking about, pulling your hair out about, etc,. your logo, you were sure to come across copious amounts of information about how to choose the best color scheme for your brand.
Because along with the endless color options to choose from, the theory of color psychology pops into our awareness and now here’s a whole other bag of fun to rummage through.
Blue is calming. Green means natural. Red means passion but wait? It also means anger?!? And so on and so forth.
So what do you do when you can’t decide?
Are You Ready To Choose a Color Scheme for Your Website Today?
If you have come to a standstill, it’s time to pick some damn colors and move on! And I have some good news for you:
You can do this in an afternoon.
In fact, if you follow along with the simple instructions below, you should have your color palette by the time you finish this post.
And because our focus for today is to get you past this roadblock, we’re not going to pump you full of studies that all somehow lead to “it depends.” A quick Google search will give you way more information than you need right now, especially if you’re stuck in analysis paralysis.
What’s important for you to know is this: While intellectually color psychology is a fascinating subject and a valid one, it’s not so important that you should stop moving forward in your business.
We’re gonna give you the absolute essential information and that’s it.
Also remember, there’s nothing that can’t be changed down the road.
Even the big guys have done it:
Choosing Your Color Palette
OK, enough of that. Are you ready to pick your colors?
Then let’s dive in!
1. Pick Your Dominant Color
First, pick a dominant color. This is the color that you will use about 60% of the time.
Here’s an infographic from The Logo Company showing what color psychology has found to be the feelings different colors evoke:
The goal here is not to get caught up in the minutiae of color choices and psychology but to find a color that matches your brand personality and the feeling you want your customers to have 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.
With these things in mind, go ahead and pick a single color that you believe best represents your brand based on the color chart above. Don’t worry about the shade just yet.
2. Pick Your Secondary and Accent Color
This secondary color you are going to use 30% of the time and your accent color 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 of artists and designers before us, we don’t have to know what colors look good together.
There are a some online tools you can use to help.
First, if you want to choose a different shade for your main/dominant color, check out Paletton.
Click on your color choice and move it around the color wheel.
Hovering over the different colors on the right side of the screen gives you the hex code which you can use in the Thrive Architect color wheel to populate your color.
You can then use the Paletton tool to select different color schemes to see how colors look together.
If this is a little too much, don’t worry! The internet has many other gems out there to help us non-designers.
Canva has a color palette generator in which you can upload a photo to populate a color palette from. Nature does an amazing job at putting colors together making it an excellent choice for pictures to upload in this palette generator.
Or if there's a photo which you find evokes the exact emotions you want your site to create, use that. You can even upload screenshots of your competitor's site *wink wink.
And Adobe Color CC Explore features user-submitted color schemes which visitor’s can vote on, download, or save.
If you filter for “Most Popular” and “All Time” you get an idea of what color palettes people are drawn to.
You can also go to the color palette section of Colour Lovers and select palettes based on comments and user favorites.
Many of the color palettes include more than three colors. Just focus on three colors but feel free to keep the others on the back burner for pops of color down the road as your business grows.
Use these tools to get an idea of what types of colors go well together and choose your site’s three colors. (Or even just pick a palette based on your main color from the Adobe or Colour Lover sites.)
3. Shades of Black and White
We're almost done!
Now pick a shade of black and a shade of white. You'll use these for things like borders and background colors.
If you've been reading the Thrive Themes blog for any amount of time, you'll notice we use these as well. Like the "Did You Know" box above.
Did you pick your colors? If so, you have your website colro scheme!
If not, stop now and go back and pick your dominant color. And then use the tools above to pick the other colors.
4. Putting It All Together
Now that you have your colors, make sure you stick to the 60-30-10 rule.
Use your dominant color, the one you chose based on the feeling you want your audience to have, 60% of the time.
The secondary color use 30% of the time. It's good for things like icons or dividers. Use the accent color 10% of the time for elements like buttons or just an occasional pop of color like a section heading. And you have your shades of black and white for borders and backgrounds.
But don't worry. You don't have to be a mathematician to do this. Your not looking to be exact with percentages.
Look at the Wells Fargo homepage:
They balance the red and the yellow in a way to not overwhelm the site's visitors. Too much use of either of those colors will turn most people away from a site (as you'll see in an example below).
And they use shades of black and white to provide visual depth and variety as well as making certain elements on the page stand out, like the menu bar.
Examples of Good Website Color Schemes
Let’s take a look at a couple examples of what some big brands are doing with their site colors.
You might think a beauty site would be covered in pinks and pastels. However, if you think that, then you’ll be surprised to find out that’s not necessarily the case.
A lot of beauty sites and blogs have a fairly simple black, white, and grey palette with the occasional splash of color, if any at all. Well-known makeup and skincare store Sephora uses this exact color formula.
Black conveys an aura of luxury and sophistication. Not to mention, it allows the focus to fall more on the many colorful products being written about or sold.
And they use a light green button to draw attention to specific products.
2. The Home Depot
The Home Depot is another good example of a simple color palette done right, orange and white. Orange is often perceived as friendly and confident and is also associated with frugality.
Home Depot’s use of orange does just that. If you’ve never been to one of these US-based home improvement stores, it’s a huge warehouse filled with aisles and aisles of anything you might need to work on your home or lawn.
It’s a little intimidating making one of the friendly and confident employees in an orange apron a welcome site. Not to mention the budget friendly prices.
What’s interesting about their use of orange on their site, though, is how sparingly they use it given how ubiquitous their brand is with the color. This could be that too much orange is also overwhelming for the eye and could turn customers away when they visit the site.
Examples of Bad Website Color Schemes
Now here’s an example of color schemes gone wrong.
1. Too Many Colors
Ever heard of having too much of a good thing? That goes for how many colors you use on your site. Too many colors distract from the purpose of your website: getting people to buy, sign up, and give you money!
Imagine someone who first clicks on your site seeing a hodgepodge of random colors. Like this site.
There’s a lot going on with this example, but we’re just going to focus on the over abundant use of color. It’s distracting and overwhelming.
The most likely result? Visitors, while possibly entertained at first, will quickly click off the site.
2. Bad Color Combinations
This is clearly a case where the designer wasn’t thinking of their audience.
This is an extreme example but leaves no room for questions. The colors do not look good together. (This is why using the tools to find colors that work together is so useful.)
Website Color Schemes for You
OK, if you still can’t decide, here are some palettes our professional designers came up with for you to steal.
We had them created based on feelings you want your visitors to have when viewing your site.
Fun and Helpful
Informative and Strong
Luxury and Exclusive
Trust and Authority
Warm and Caring
Your Turn to Pick a Color Scheme!
There’s no question you can go into every single industry and find successful and established brands using colors that are “out of the box” for that market. But generally, you’ll find the majority use a tried and true color palette recipe implementing the use of color psychology.
But when you’re at the beginning of the game, unless you’re a design genius (or have the funds to pay for one), go ahead and use today’s post to pick your color palette and move on.
And with the new Global Colors feature, it’ll be easier to make sure your colors stay consistent on the entire site.
And now it’s your turn! What colors did you pick? Let us know in the comments below which color scheme you picked for your website.