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:

Color Schemes of the Microsoft Logo

Microsoft went through several branding changes since launching in 1975.

Motorola Logo

Motorola has changed its branding several times in its more than 90 year history.

Motorola logo 2011

They changed the black "batwings" to red in 2011.

New Motorola Logo

And another change when Google acquired them. 

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:

Color Emotion Guide

Which color and feeling do you believe best represents your business?

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:

  1. What is your brand personality?
  2. 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.

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.  

Paletton - select your website color palette

Choose a different shade of your dominant color using the color wheel.

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.

Paletton color schemes

Click the different color schemes to see different color combinations with your dominant color.

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

Canva Color Palette Generator

Find color palette's from photos you love with Canva's palette generator.

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.

Adobe Color CC Color Palettes

Pick a palette that's already been created and see which ones people like most.

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:

Wells Fargo Homepage Color Scheme

Wells Fargo put their colors together in a way that doesn't overwhelm their visitors.

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.

1. Sephora

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.

Sephora Website Color Scheme Example

Sephora employs a simple color palette to show off the many colorful products they sell.

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.

The Home Depot Color Scheme Example

Home Depot also uses a simple color palette. 

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.

Ling's Cars - bad color scheme example

Too much use of color will make your visitors bouncing off your site... fast!

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.

Bad Color Combination

This dizzying color combination is a definite no.

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

Fun and helpful color schemes

Informative and Strong

Informative and strong color palettes

Luxury and Exclusive

Luxury and exclusive color palettes

Trust and Authority

Trust and authority color schemes

Warm and Caring

Warm and caring color schemes

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.

Author: Selene

When she's not spending her days writing, editing, and thinking about the editorial calendar for the blog, she's playing around with SEO for her own personal amusement.

  • Gerard says:

    Good info. But one remark on the first bad site. It looks so wrong. But if you investigate that site its way better then most car lease sites. What about 1000+ customer references. And look at all the info you will get on every car. Its so much over the top that its good again. She exploits here crazyness. And she stands out and have success with it.

    • Selene says:

      Hi Gerard! I agree. I actually spent a good amount of time on her site. And yes, while she’s made it work for her, it’s still not a good example of how to create your own color palette for most people.

      How to embrace your own voice and make it work for you, sure. But most people aren’t going to be able to achieve the same results using her site as a template.

      Thanks so much for taking the time to read the post!

  • Sandra says:

    Selene, I’ve been in the throes of analysis paralysis for quite a while now with my color palette, and today you’ve come to save the day. I’m going right now to find complementary colors to the blue in my logo and tie down My Colors for good. You have succeeded in making this process easy to understand and DO. No telling how much longer I would have stalled if I hadn’t come across this article.

    I thank you, my site thanks you and the future visitors to my site will thank you!

  • Jorden B says:

    Great article! Very helpful and I will definitely be using Paletton. Thanks for the resource.

    Also does anyone know when Thrives theme builder will be coming out?? So excited for this!

    • Selene says:

      Thanks, Jorden! I had a lot of fun playing around with Paletton.

      We don’t have a definitive ETA just yet on the new Theme Builder. But will definitely be making announcements through email. So if you’re subscribed, you won’t miss it!

  • John says:

    Excellent post and very helpful for a non-designer like me.

  • Great examples with easy to follow advice, plus “done for you” color palettes.

    Thank you for sharing, but overall thank you for teaching us how to get this properly done.

  • Sofia says:

    Awesome! Very helpful post.
    I wish I would have this information one year ago.
    Thank you 🙂

  • Michael S says:

    Hi Selene, thank you very much for this very helpful article. Great tools that you mentioned. I already knew my dominant colour would be a kind of blue. So I picked some nature pictures that appealed to me and let the canva colour generator do the rest. Et voila! Colour scheme? Done!

    • Selene says:

      That is so great! Can’t tell you how happy it makes me to hear when some takes action from one of our posts.

  • Michael C says:

    Paletton is a phenomenal resource, thank you for sharing this insight!

  • Laura R says:

    Thank you! That was a great article. Really helpful info and tools.

  • Renée says:

    Great post, thanks!

    I picked my colours in a time when helpful tools weren’t around yet for non-designers.

    I chose a picture of a painting I really liked and then used ‘ye old colour picker’. So I picked my coulours basically in the way that Canva can help with nowadays.

    It was nice to read that I’m applying them roughly in line with the percentages. That sets my mind at ease. 🙂

  • Randy says:

    Great info! Always a topic of conversation with a new client.
    May I make a request? A post for defining “Font Families” would be helpful. That’s ALSO a topic of conversation. Again, thanks for this post – very helpful!

    • Selene says:

      haha I’m sure it is! I’m about to use the post myself to choose some colors

      And I’ll talk to the team about a possible “Font Families” post. Thanks Randy!

  • Chloe says:

    Beautiful! Thank you for sharing. Warm and Caring palettes seem perfect for my site.

  • >