Color is a massive aspect of branding. For example, you may have noticed that almost every fast food restaurant uses red and yellow in their logos, as these colors encourage hunger and friendliness. However, Subway elects to use green instead of red, to reinforce their “eat fresh” branding.
Seeing how important colors are to your brand, you might be spurred into wanting to rebrand your website. Or maybe you’re branding for the first time. Either way, this article is here to help you decide on what colors to implement into your website.
Like we mentioned, colors can trigger certain feelings on sight. There is a lot behind color psychology – you can check out the infographic on this page for some interesting unpacking of different brands and the colors they use, as well as the feelings they inspire.
You might think that you aren’t affected by colors, but you’d be surprised to see the difference that color selection can make to a company’s bottom line. In fact, 85% of people claimed that color has a major influence on what they buy.
When some companies experimented with their button colors, they noticed a sharp uptick or decline in their conversions. For example, Beamax, a company who makes projection screens, noticed a gargantuan 53.1% increase in clicks on links that were red vs links that were blue.
And that’s not just clicks – a study run on the mental impact of colors found that colors boosted brand recognition by an average of 80%. For example, think of Coca-Cola, and you’ll likely picture their vibrant red cans.
Don’t take this to mean that red is king, however, as there’s no real rule to this. If your site is mainly red, a red call to action won’t stand out that much, so you’ll want to play around with colors until you find a combination that works for you.
So how do you find one that works for you? Now you know how important colors are for your website’s branding and experience, let’s have a look at what you should do to decide on what colors you should pick.
You first need to get a good understanding of what you’re selling/providing. If you’re trying to achieve a more premium, high-end image, then purple is your go-to, as people associate it with royalty, high quality, and intrigue.
However, if you’re looking to reach a broader audience, blue is a reassuring, gentle color that fits well for more delicate subjects, like healthcare or financials.
The best way to decide on a primary color is to think about the vibe of your product or service, and peruse colors that fit that vibe to find one you like. Here are some examples:
- Red: Coca-Cola or Nintendo – Implies excitement or happiness
- Orange: Nickelodeon or Fanta – Implies a friendly, fun time is ahead
- Yellow: Nikon or McDonalds – Implies optimism and happiness
- Green: Whole Foods or Animal Planet – Implies freshness and nature
- Blue: Walmart or American Express – Implies dependability and reassurance
- Purple: Hallmark or Cadbury – Implies a distinguished brand that has a history of quality
- Brown: Nespresso or UPS – Implies a reliable product that can be used by anyone
- Black: Chanel or Adidas – Implies luxury or elegance
- White: Apple or Nike – Implies sleek, user-friendly products
If you already have a colored logo, it makes sense to have a primary color that matches your existing branding. Nintendo’s branding is very red, and this comes through on their homepage.
This is probably the easiest step, as you’ll likely already have an idea of what color you want your website to be. Just make sure to save the hex code!
Once you have a primary color in mind, it’s time to choose the other colors that you’ll be using. A good starting point here is to consider color compliments. Every color has a counterpart that makes it “pop,” and these are known as color compliments.
For example, a red circle on a green background pops a bit more than a blue circle on a green background. But a blue circle will look a lot better and more obvious on an orange background.
So if you’re using a predominantly green website, it’s a good idea to implement red calls to action, or use red to highlight important features that you want to catch the eye of any readers.
Try to only have one or two colors on top of your primary color. More than that, and you’ll be struggling with clutter. Nothing will stand out well if you inundate visitors with loads of different stimuli.
A good example of using additional colors is hearing aid brand Eargo. It has a main color of orange, so it’s used this duller blue to highlight this important section of its website. From what we know about color compliments, we can see how this blue and bright orange contrast against each other. The orange also makes important elements pop, like the “add to cart” button and the logo.
This is an important choice, as the background of your website is theoretically going to take up more space than any other color. However, it’s an easy choice to make, since it really boils down to two options.
You can go for a more muted version of your primary color in order to solidify your branding. This will require a white or grey overlay on the background in order for text to show up.
Alternatively, you could just have the whole website be an off-white color, which is the more common choice. It’s inoffensive, and won’t stop anything – text, images, or links – from jumping off the page.
Look no further than our own website to see what a blank, gray background can highlight.
4. Choose a typeface color
The final stop on your colorful journey is to nail down a typeface color. You might go for the easy choice and choose black, but have a browse around the internet, and you’ll find that purely black typefaces aren’t as common as you’d think.
A black typeface on a white background can lead to eye strain, as there’s a 100% contrast – and people will be more likely to click away if your website is difficult to read.
While explicitly colored typefaces should be reserved for links and important bits of information, you can use gray or gray-tinted color to give your website a softer, more inviting look. There isn’t a ton of room for experimentation, but it can be worth coloring your text for that finishing touch.
A quick look at this page on Penguin Books’ website shows that they’ve elected for a softer grey tone for their text. This is a lot less aggressive than a stark black and white contrast, and allows for a softer vibe.
By now, you’ll have a sense of what kind of color your website will be using. Here are a few additional tips for when you’re considering colors.
Use consistent saturation
One thing you can do to strengthen your brand is to use various colors with a similar saturation. Saturation is another way of saying a color’s brightness. Have a look at drink company Innocent’s usage of color:
Here they have six different colors, but none of them feel out of place or jarring. That’s because their saturation is muted to the same level, making it feel consistent.
Use the same color, but vary saturation
When a brand has a strong connection with a certain color, they might not want to branch too far from it. However, everything being a single color can become a bit stale, so it can be fun to take your primary color and play with the saturation a bit. Have a look at the social media options in the bottom left of this TechCrunch article.
All five of them are a similar green, but have varying levels of brightness. These vary up the visuals of the page, while also reinforcing the idea that a lighter green is synonymous with TechCrunch.
For some more tips, check out our infographic below.
If you’re ready to start looking for colors, where do you start? It can be tricky to nail down a shade when you’re just given a color wheel. More often than not, you pick something that looks entirely different when it’s implemented. And even if you find one color you like, you might want to find a palette that works well alongside it.
That’s why there are specialized tools to help you settle on a color scheme for your website. One example is Coolors – a website that helps you grab a premade color scheme and implement it into your website.
There’s also Color Safe, another website that lets you generate and browse colors by type, allowing you to find that perfect red or green.
Once you’ve formulated a palette, you can input your website onto checkmycolours.com, which will analyze your website and give you technical feedback on how effective your color scheme is for those with colorblindness or poor monitors.
Here are the steps you’ll want to take when picking colors for your website:
- Choose a primary color: Pick a color that suits the energy of your product or service.
- Choose your additional colors: Pick one or two additional colors that complement your primary color, ideally colors that make your primary color “pop.”
- Choose a background color: Choose a color for the background of your website – possibly less “aggressive” than your primary color.
- Choose a typeface color: Choose a color for the text that is going to be on your website – remember that a solid black typeface is rare and not recommended.
And don’t be afraid to use different resources online to find your perfect color combo – there are plenty around to sink your teeth into!
Try not to have more than two or three colors popping up consistently. Obviously you can implement things like photos or infographics that use a cavalcade of coloring, but when it comes to background colors, branding, and site functions (like buttons), try to keep it simple so that no one gets overwhelmed.
Eye-catching colors should be used sparingly, or they’ll lose their impact. You want this impact to be on conversion points, like “Buy Now” buttons. Complimentary colors, like we mentioned above, are a great way to pop out of your website’s color scheme and draw the user’s eye to an important point.
In branding, the most common colors are the three primary colors – red, green, and blue. This carries over to website color schemes as well.
You could break the mold and go for a yellow or purple website, but the primary colors are popular for a reason. You’ll want to make sure your branding has a reason to be a less common color.