“So, what colors do you want on the website?”
Here’s a question you may find trips you up all the time. You struggle to choose the colors for your website, and when you do, they seem all wrong.
You look at many colors and go, “Cool” without focusing on color combinations that communicate your business.
Well, (in my dad’s voice) that’s bad.
In this guide, you’ll learn why it’s important to pick the right colors, how to know what the right colors are, and 11 tips on how to combine colors for your website to effectively grow your business.
Why the Color Combinations of Your Website Matters
Now, let me hit you with a stat that’ll make your head spin. According to this in-depth study, people make a subconscious judgment about a thing within 90 seconds of seeing it, and between 62% and 90% of that is based on color ALONE.
How many times have you landed on a website and immediately felt like you were in the right place? For example, Coca-Cola’s site. Imagine if they did the website in green instead of red. You’ll be wondering, “Why green? Are they into green energy now or education?” It’ll seem off. That’s because color increases brand recognition by up to 80%. The use of majorly red confirms what you already know about Coca-Cola.
I mean, compare these two pics. Which one seems more fitting to Coca-Cola?
Think of times when you visit a site, and you spend half the time doubting that you’re in the right place. Maybe there were lots of jarring colors that made the whole thing seem unprofessional and scammy.
Well, it has happened to me lots of times. And let me tell ya, no one buys any product or info from a site they don’t trust.
Your website color combo is literally the first thing that your customers judge when they come to your site. That’s before they read the copy or anything at all.
In other words, get it right.
12 Tips on How to Choose the Right Color Combinations for your Website.
1. Think of the user first
The user comes first in all the decisions you make as a website owner. That’s because if you don’t properly communicate with a website visitor, you’ve lost them. And when you’ve lost them, you’ve lost money.
The reason why we’re obsessing over picking the right color combo is the user. We want you to come up with colors that will immediately draw the user in, and make them feel like they’re at the right place.
Think about the first impression you want your website to make on the visitor. Fun? Lively? Sustainability? Calm? Nature? Curious?
When you know what you want the user to feel, you will be able to easily pick out the main website color.
2. Choose a primary color that matches your business
The primary website color of your business has to match the vibe of your business. For example, look at Medium’s website.
With black primary color, it gives that black and white feel of printed paper, with a touch of light blue that calms you down. You immediately get the publishing vibe and you know you’re about to read and write lots of blog posts yourself.
So, think about the main purpose of your business and pick a primary color from there. If you’re trying to build a luxury jewelry brand website, you may want to go with purple (as in royalty), or gold (as in luxury). Or if you want to convey the message of fun, yellow may be a good idea.
Another thing you can do is to use the main color in your logo as your primary color. That works too.
3. Choose secondary colors that are either similar or complementary
You’re not going to have only one color on your website. It usually seems amateurish. You have to pick secondary colors. But keep in mind that they should complement your primary color, or at least be similar to it.
Hubspot’s website is a good example of a complementary play between colors. In their case, it’s between orange and green.
Techcrunch uses only green but they’re different shades of green.
4. Choose no more than four colors
Just because you’re picking multiple colors for your site, doesn’t mean you can go bat crazy and add ten colors to your website. That’ll be too confusing for customers to process. Remember, it’s all about the vibe of your site, about the impression that you make.
With a few well-chosen colors, you’ll hit the target on what your business is about and why people should buy from you.
For Yelp, it’s only red. But man do they come through.
5. Don’t be scared to use lots of white space, sometimes less is more!
You’re allowed to use a background color. It’s just that most times white is better. I’m not saying don’t use another color for your background.
I mean, look at Siteleaf’s yellow design. It’s killing it!
What I’m saying is that lots of white spaces allow you to play around with color and be more specific. Check out Backlinko’s homepage.
You can also do what ICO Syndicate did. Their background color is not white, but it’s almost it.
6. Be strategic about the typeface color
The color of your typeface matters. It’s not just black on any white or light background. And it’s not the white text on a black background. Not always the best choice.
Usually, slight color variations in your text will lend more credibility to your color combo. Black isn’t the best typeface color on every color, and white text may be difficult to read.
Look at what By the Books did with typeface color. Pretty cool, huh?
7. Think about color saturation and make it work for you.
Color saturation is basically how much white light is mixed with color. That is, how light or deep color is.
You can use color saturation to smartly combine colors for your website. You usually use the same color but with different saturations or different colors with the same saturation.
8. Be consistent with your color combo to increase brand recognition
Your color combination should be the same everywhere.
If you decide to use orange and blue on your website, you should put that in every part of your marketing strategy.
Incorporate orange and blue in your YouTube ads, social media account pages, podcast thumbnails, and so on. So if a new user visits your website, they’ll immediately recognize the colors and know they’re in the right place.
Image overload? Keep the color scheme simple
If you have an e-commerce website and will be displaying many images, it’s better to keep the color palette simple. One or at most two colors. This will help in keeping the scheme coherent.
An example is the Penguin Random House website. It’s just orange and white. The other colors come from the different book covers.
Implement color theories
Let’s face it. You and I don’t know half of everything about color and color psychology. We very probably don’t know the hundreds of colors that computers can display. At least, I don’t.
So, when you’re asked to select the colors for your website — feel free to google color wheels, theories, and palettes to help you know which colors go together.
Pay little attention to your competition
In almost every other aspect of your business, you’re advised to pay close attention to your competitors. But when it comes to color, you shouldn’t pay a whole lot of attention to others.
This is because the colors on your website should be unique to your own specific business. They should reflect your unique selling point. Also, keeping your color combo unique helps in brand recognition.
Draft + Test Color Combos
First, don’t come up with only one combination. Produce multiple color combinations, narrow them down to a few, and then test them on your audience.
A huge part of marketing is split testing. When you test the different color combinations, you get a sense of what vibes with the audience the most.
2 Useful Color Resources to Check Out
Coolors
Coolors is an amazing resource that will give you already made color schemes. Once you go on Coolors, you just spend time looking at all the combinations and grabbing one that suits your business. Easy peasy!
Adobe Color
Adobe Color is an extremely helpful resource that’ll help you build your color scheme. With Adobe Color, you get to use color theories to build combinations that’ll work on your site.
FAQs
What is a website color palette?
A website color palette is the color combination you used for your website. Usually not more than four, your website color palette serves to convey the best first impressions. With the right tools, you can easily build your website color palette, or select a premade one.
What are the best colors for a website?
There are no hard and fast rules on what website colors to use. Even though colors like red and blue are safe and work for a lot of businesses, the best website colors for your website are those that will encompass the spirit of your brand.
What color combinations actually work?
The color spectrum is broad and anything can happen. But, you’re probably safer using color theories to select the colors to use. This way, you have a high chance of selecting colors that work well together.
Take your color game to the next level
So, remember all we talked about.
Think of the customer first. Choose a color that matches your business, and use complementary colors in addition. Don’t use too many colors, white is awesome, and it’s okay to use color tools. Typeface color matters and don’t be afraid to test multiple versions.
If you use these tips, what can I say? Watch your brand explode, baby!
