13 Tips for Choosing the Right Color Scheme for Your Website

Humans are visual creatures.

Even before the computer age, brands with a memorable, easily identifiable color scheme succeeded.

Have you thought about how your website’s color scheme directly impacts your bottom line?

Depending on who you ask, somewhere between 85% and 93% of shoppers cite color as a deciding factor in buying a product.

And since 81% of customers now also look you up online before buying from you, even in a brick-and-mortar store, you need a dynamite color scheme on your website.

But how do you choose the right one? The one that your customers will identify with? I did some research and spoke with Ellen, our digital specialist in charge of website design, and we determined 13 factors to consider when coming up with color scheme ideas for your website.

1. Does your brand already have established colors? Start with those!

One big mistake people make, especially if they already have an established brand, is sudden, drastic changes.

Remember that household name brand that completely changed its color scheme while still retaining its customers and growing its business? Me neither.

If you are just now creating your company, sure, go to town. Use the following tips to create your brand identity. But if you have established any kind of successful presence, you need to build your website on a variation of your current color scheme.

The term “variation” is key. You may need to change quite a few things. But your brand still has to be recognizable.

Take, for example, these recognizable brands and their color tweaks:

Google rotated the colors around over the years but still maintained the same playful, recognizable color scheme.

The Tampa Bay Buccaneers made a few changes, including going from a darker red to a brighter red.

The Academy made its logo much more elegant and dramatic while keeping the signature gold color and white Oscar award.

2. Pure red and pure blue? Don’t do it! Waaaait, seriously, stop!

This might seem like a strange piece of advice. Don’t we want the beautiful colors of the American Flag on our website? Doesn’t everyone love red and blue?

The problem is there is not a single color under the sun that goes well with pure red and pure blue. They are both extremely strong colors, and they compete with each other. We will discuss “color competition” in more detail later on in the post, but we felt that red and blue deserved their own point since they are usually the worst and most common offenders.

Once you have picked those colors, you are very limited in your accent color options – not to mention in how they layer with each other, as the following example demonstrates:

Source: sitepoint

Now, what if you already have an established brand presence with a red and blue logo, and you want your customers to recognize you? Or what if you are marketing a service to veterans or that otherwise needs to directly use red and blue? Never fear! There are ways.

Adjust your logo so that pure blue text does not go over a pure red background, and vice versa. Remember, you want your customers to be able to clearly identify your brand without getting a headache or squinting.

Play with shades! You can adjust the shades and transparency of the red and blue so they don’t hurt the eyes.

Recently, we were designing a website for veterans, so we obviously needed to go with an American flag theme. But for our main colors we went with a dark charcoal, a lighter gray, and a white so that the red and blue didn’t overpower the reader. For accent colors, we used a brighter blue and an orange-red that was a little ambiguous:

Notice how, with the different shades of red and blue and the dominant neutral colors, the red and blue do not “compete” with one another.

Remember that either color is great as an accent color over neutrals. So if you want to have both on your website, it might be best to have neutral tones as the major theme colors. As another example, take a look at the website for one of our clients, Pawn King:

3. Follow the 60-30-10 rule.

The 60-30-10 rule is an old concept, but it’s as effective as ever. Don’t ignore it in your website design.

Pick a color scheme with at least three colors, taking into consideration what the brand has already established. Of your three colors, two should be cool, while one should be warm.

Of your two cool colors, use one 60% of the time, the other as a complement 30% of the time. We prefer to use a warm CTA (call-to-action). Your users will “get used to” the first two colors, so the third one really commands their attention. Here’s a good example of a website we designed that features 2 cool colors + 1 warm CTA:

4. Make sure your colors contrast well and don’t “compete.”

Red and blue aren’t the only colors that can really “compete” with each other. We’ve seen some other awful color combinations that can really hurt your customers’ eyes! Green and yellow layered on top of each other are a good example:

Source: sitepoint

Yes, you want contrasting colors on your website, but you want to make sure you are correctly using the 60-30-10 rule to determine the frequency of each color.

Don’t be afraid to experiment, and carefully watch what happens when you layer your colors. They may look like they’ll layer perfectly, but in reality, they can create a blurry edge because your eye doesn’t know which one to focus on. Read on for an example of what we did when this happened in one of our color schemes.

In summary, make it easy for your customer! Make sure your color scheme directs their eye to only one most important thing on the page. Don’t confuse them.

5. Use a website like Canva for color scheme ideas.

Websites like Canva have already put color schemes together that work really well. You might not use their exact color scheme, but you can get some great inspiration for choosing the right color scheme for your website.

Sometimes you’re just not sure where to begin, especially if you are just getting started creating your brand, and that blank canvas can be intimidating. As you scroll through the color schemes, ask with each one, “Does this match my brand personality?”

For example, we decided purple hues matched one of our clients’ brand personalities. Canva had a great purple-hued color palette example, but we needed to modify the colors so they would not blur together on our client’s website. Here’s the original palette:

Source: Canva

Beautiful, right? Nevertheless, the colors required some adjusting so her customers could have a great user experience. The final website came out like this:

Source: Bonnie Wolf Law

99% of attorney websites are, well, boring. Many of their color schemes are simply not appealing. So we especially had fun with this website because we enjoyed being able to differentiate our client.

6. Be aware of the emotions and ideas your colors convey.

Different colors communicate different things.

For example, blue conveys trust and safety, which is one of the reasons it is used for hospitals, doctors and the police force.

Red conveys urgency, which is one of the reasons it is usually better used as an accent color. Yellow conveys optimism, while orange communicates action. You will notice fast food restaurants use a lot of these! Don’t use blue for food, though – dieters actually use the color to help them lose weight, as it has an appetite-suppressing effect.

Black is an important color as it conveys luxury. Here’s a great example:

Source: Qualbe Marketing Group

The first draft of the website had been white with a secondary color of black and a red accent. The customer said it wasn’t what they were looking for, but they weren’t sure why.

Color research revealed that the white and black should be switched to communicate the sleekness and luxury of European automobiles. We also added a lot of texture and depth and came out with a great final design.

For more examples of the messages each color communicates, check out this Psychology of Color post from Kissmetrics or How to Choose Your Brand’s Colors from Custom Logo Cases.

7. Depending on your brand personality, sometimes you need to use more color or less color than usual.

For a children’s ENT website, we used a lot of color – lots of different shades of blue, yellow and red. We wanted the doctor to appear trustworthy, fun and kid-friendly.

Source: Dr. Chanin ENT

With kids’ websites, you can get away with more pops of color. Those colors would not have worked on a site like EurAuto Shop above, or like the website below, which specializes in fine art transportation:

Source: Displays Fine Art Services

Displays specializes in top-of-the-line art transportation services. You want a classy vibe on a website like that. There’s enough color there to keep your interest – cream, dark charcoal, and tan – but it looks very high-end.

If you’re wanting to communicate luxury, you downplay the colors, while if you’re wanting to communicate fun, you ramp up the colors a bit.

8. Consider your target audience.

Always tailor your website to your target audience.

Consider age and life stage. If you’re an investment banking company, you probably want to choose a more dignified color scheme than if you’re the local college hamburger joint.

If your target audience is women, use colors they would like – such as blue, purple and green. Men don’t like quite as much color, so you’ll want to go with more neutral palettes.

This website is targeted to men and is meant to give an adventurous, outdoorsy vibe – you can tell by the use of colors such as black and green. However, an eye-catching image helps it stand out from the pack:

9. Consider your industry.

While you want to stand out, you also want your users to know they’ve come to the right place as soon as they land on your website. Consider what your audience would expect to see for your industry.

Sometimes it’s good to buck the trend, as with Bonnie Wolf’s traffic law website above, but other times you can confuse your customer.

For example, the color for breast cancer awareness is, unequivocally, pink. You can vary the shade of pink to stand out, or you can use it as an accent color, but if you don’t use pink at all, your customers will not know they are in the right place.

Another example: When you think of cleaning products, the colors that usually come to mind are yellow and blue because a lot of the prominent cleaning brands use those colors.

Source: Walmart

So if we’re designing a carpet cleaning website, we might use a blue and yellow color scheme so customers have a mental trigger that they’re in the right spot. Or if it’s an eco-clean company, we might go for something green.

Don’t match what everyone else is doing, but at least use it as a starting point.

10. Don’t leave out the most important color.

Simplicity is the ultimate sophistication. – Leonardo da Vinci

Or is it a color? The debate rages on.

That’s right, white!

One of the biggest mistakes creative professionals of all stripes – interior designers, advertisers, marketers and graphic designers – can make is neglecting the power of white negative space.

White makes all your other colors stand out. It gives your site a clean, crisp feel. Here are some famous examples of white space use, both online and off, to give you some inspiration:

Source: 5th Color

In choosing the right color scheme for your website, one of the most difficult things to do is to keep it simple. Simple is, ironically, more complicated at first, but well worth the time you put in (Have you ever tried to build a capsule wardrobe? Simple is hard!)

Don’t neglect the power of negative space – it’s more work on the front end but makes things less difficult down the line.

11. Measure measure measure.

I started at Qualbe in sales.

Our contact center manager at the time came up to me my second day and said, “Way to go! 6 sales out of 7 inbound calls yesterday!”

I was shocked that he was paying such close attention to the newbie. He replied, “We measure everything.”

That’s something I’ve carried with me since, and it characterizes how we do all our work: Measure everything.

Don’t be afraid to conduct A/B tests based on good data and sound measurements. Just make sure to collect and analyze the results of everything you test!

For example, an email marketing platform called Performable witnessed a 21% conversion rate boost simply by changing the CTA button from green to red!

Source: Quicksprout

It’s one thing to just take someone’s word that a warm CTA is better – it’s another to see the data for yourself. You can use a tool like Hotjar, which records customer cursor movements, to view the sections they naturally gravitate toward on your website and inform future color decisions.

12. Remember that the most important aspect of text color is readability, not how cool it looks.

If you think your website’s color scheme looks cool, but it hurts customers’ eyes or they have no idea what you’re saying, your site has not done its job.

Your site’s job is ultimately to sell your idea, information, service or product. Optimize every aspect of your color scheme and overall design to that end.

For example, solid black text on a solid white background is great, but not the reverse. Black cuts in on the letters and makes it hard to read.

Source: UX Movement

If you must do light text on dark background, don’t make the background pure black, but go for charcoal or something of that nature:

13. Above all, pick a color palette that’s easy and fun to use, and your website will be fun to build.

If your color palette is not easy to use, you will struggle throughout the entire design process. What you were excited about now becomes a chore. Selecting images, tweaking your logo and all the other design elements will be that much more complicated.

Placing colors should be easy. Following these tips, like sticking to the 60/30/10 rule, selecting a tri-color scheme with cool-cool-warm, not selecting colors that compete and not being afraid of white space, will help.

Ultimately, pick a color scheme you and your customers connect with. When you look at your website, you should glow with pride and be able to say, “Yep, that’s my brand.”

If you’re still having trouble coming up with color scheme ideas for your website, let us know how we can help!

Something we missed? Something to add? Join the conversation below and let us know!