It's been said - design is not just something designers do, design is marketing. You can spend all month playing with colour schemes on the likes of Pinterest, (yep, done that) or reading up on colour theories, (done that too) but at the end of the day, what matters in website colour palettes is this: clarity and contrast.
The best colour combinations for websites facilitate clarity and contrast.
clarity and contrast
Design is not just something designers do. Design is marketing.
The foundation of conversion centered design is focus, and colour facilitates that. Use colour to draw attention to your primary call-to-action.
Most resources about colour and conversion focus on the psychology of colour; that is; the emotions and qualities ascribed to various colours. But here's the thing, no matter the feels, ugly can still convert well.
Ugly can still convert well.
Take Amazon for example. I know, looks can be subjective, but its look isn't exactly causing it to be profiled on design forums either for anything other than, you guessed it, function.
Colours can facilitate action, and you bet Amazon has done the leg work before going with its famous orange colour. Check out how Amazon uses its primary colours to highlight key selling points on their shopping cart:
By using their 'action' colour on their shopping cart, they can draw your attention to what they want you to do - to buy now! Rather than explicitly saying, 'buy now' they've used the orange text to highlight next steps - that they'll dispatch this 'bestselling' product within a few days.
Colour choices impact a user's behaviour when they visit your website or app.
Disorganised colours may take your website back to the 90's where many websites suffered from a lack of directive design tactics.
How Website Colours Have Evolved Over Time
It might be hard to believe, but Amazon once didn't use orange.
In 1995, the Amazon website was grey and blue. Who would'a thought:
This relic has evolved into the beast we know today. Is today's site easier to use? Studies have found colour can improve readership by 40%...and comprehension by 73%.
Takeaway: don't be afraid to evolve.
Lego has also learnt a thing or two about colour use over time:
In 1996, Lego's website embraced colour, mixed in with a neutral grey. No idea how this website worked for them, but just a guess they've evolved its look and feel over time for good reason.
Check out Lego's 2023 home page:
Lego, true to form, has maintained its love for colour, hitting us with every colour of the rainbow. However, the colour-saturation has been paired with a white button, creating contrast in their page content.
An overload of colours can risk conveying too many emotions or messages at once, which can potentially confuse the person viewing your design. While most designers would use a prominent colour offset by a neutral one, Lego's prominent 'colour' (I know, it technically is not really a colour), is white.
Takeaway: leverage contrast to direct people to take your desired action.
Meanwhile, travel brand Expedia may be as obsessed with blue as Eiffel 65 singing 'Blue da ba dee' in '98. They've kept a blue and white theme on their website since then, as you can see exhibited in the image below. But, now they use their brightest blue for link-rollovers and their website's primary Call-To-Action buttons, like 'Search' and 'Plan'.
What about Google? Well, if their logo has anything to say about it, Larry Page, Google's founder, loves colour. I doubt Larry initially used much science around his first design iteration, DIY'd in a freebie software program called GIMP.
Here's the thing: Google's primary pages may not have much colour, or use a colourful CTA button, but their page removes clutter to focus on one thing: search.
The Google home page actually has less features on it now then back in the day.
Check it out:
Many of Google's other pages now use blue as the contrast. Their sign in button for example, and links on search pages.
What colour is best for buttons on a website?
It depends on which button! What colour you choose can be impacted not only by brand colours, but by common colour associates. Eg. notifications are often red, and choosing something unusual can make your interface confusing. For a primary CTA button, studies have repeatedly found the use of pure colours for your primary call-to-action buttons perform well - that is red, yellow, or blue.
Blue is the most common choice for hyperlinks, including on Google. I mean why not? If blue is good enough for an oracle like Google, they must be on to something, right? Yep, multiple studies have confirmed blue is one of the most colour preferences for both men and women, (and all those sexes inbetween).
However, if your entire website is blue, and your Call-To-Action is blue too, you're missing the point. The colour buttons that get the most clicks have been found to be those that contrast to the rest of the page content.
The colour buttons that get the most clicks have been found to be those that contrast to the rest of the page content.
Maximise Colour To Direct Action
Choose colour combos that facilitate direction. For example, if your business is a nursery and you have lots of imagery with green in it, having a matching green button may blend in so much it impacts your website performance significantly overtime.
Tip: colour contrast also impacts SEO. Yep, it's now known to be so important for usability that contrast is a part of Google's algorithm accessibility considerations.
You can use a tool like Google's Page Speed Insights to check your accessibility score.
Neutralizing the remaining colours on the rest of your website theme, by mixing in white, grey and black can help you avoid the overuse of pure colours. Too many colours can distract and exhaust the eye.
What about button colour for "no-colour" websites?
Can a black or white button perform well?
Short answer: make sure you're still creating contrast.
Longer answer: it depends on your objectives.
Black and white website design can be a killer theme style, just make sure it's not killing your website results by being clear about what your primary objectives are.
- Engagement goals?
- Sign-up goals?
- Sale goals?
Even the renowned websites like the awwwards and SquareSpace use a neutral palette. Yet it remains a common argument between designers and conversion specialists:
Can you use 'no colour' for your call-to-action button?
Put a rest to any debate and test it. Run paid but targeted traffic to site, and run split tests to see which works better for your business objectives - coloured, or not. :-)
Unbounce is one way to do this - it's a handy website masking tool that can help you set this up quickly with limited dev involvement.
Button approaches for 'no colour' websites:
- Use enough negative space to keep your buttons clear.
- Make your buttons slightly bigger to support visual contrast.
- Keep it neutral until the user fills in form fields, then animate the button to some other colour to indicate that they're ready to 'submit.
Consider that your primary goal for your website is not simply a pretty picture, but action. What is the primary action you want users to take? Maybe it isn't clicking through your buttons, but engaging with your content.
It's worth noting that tests have found that people tend to spend less time looking at black and white imagery compared to a coloured image. Consider what you are trying to get the viewer to engage with.
Colour can facilitate focus
Squarespace's current home page uses a white and black button - and it's huge - directing the user to 'Get Started'.
The website co has removed colour from their website over the years. Check out the greens and greys in their original 2004 website:
Over time designers have learnt that the key means to create engagement and action is to use visual distinction methods - position, shape, size, colour, motion and message.
Website colour is not just about conversion but also about engagement.
Website palettes are not just about facilitating 'conversion', but also about facilitating 'engagement'. How engaged is your audience with your website? Both the 2023 squarespace and awwwards website themes draw your eye to what probably drove you to their website in the first place - design.
Their website structure helps facilitate the users primary objective - which is to check out cool designs.
In this way, their new website colour palette has helped facilitate onsite engagement.
Use contrast to facilitate your desired action
The best colour combinations for websites use complementary or contrasting colours to direct the user. Clarity and contrast will help your visitors' eyes to go right to your CTA buttons, and direct them 'what to do next'.
Discover what works best for your website objectives and your customers by testing your colour combinations.
