Colour Psychology in Web Design

One of the most important aspects of website design is creating a brand identity that matches your other touchpoints and helps your customers understand what you are offering. We’ve spoken in previous blogs about why having a coherent feel between your website, social media and any physical products or locations feels more trustworthy and reliable, and having a consistent colour palette is one of the easiest ways to do this.

However, when picking a colour scheme we need to be mindful of what message this sends to users, as well as how accessible and usable this colour scheme is. A website with dark text on dark backgrounds is going to be unreadable for many people, so it doesn’t matter how brilliant you and your business are, people won’t engage if they can’t easily access the information.

In this blog, we’re going to focus on the specific aesthetic choices you can make when picking a colour scheme for your brand, how that can translate to your website and what message that sends to your audience.

Colours Have Meaning

Colours have a powerful emotional impact, influencing how we feel and perceive the world around us. In website design, colour isn’t just decorative, it’s a psychological tool that can shape consumer behaviour and decisions by triggering specific emotional responses. For example, in Western European culture, red is associated with critical information, usually around danger. Red lights make us stop, red flags warn us of hidden perils and we don’t cross red lines. In traditional user interface design, red is often used sparingly to highlight key actions, such as cancel or delete buttons.

However, this is another great example of why knowing your target audience is so important when designing a website. In Chinese culture, red is considered lucky and represents happiness. Buddhism and Shinto followers see red as symbolic of wisdom and virtue, with the power to ward off evil. While the most common interpretation of red in Western culture is of danger, it also represents power, passion and courage. We often assume someone wearing red clothes wants to be noticed, so using red in your branding can make you seem extroverted and “louder” than your competitors.

Using Colour As Brand Communication

Aligning your colours with your brand’s core message makes your visual identity more effective and helps users understand your brand much quicker than words alone. Understanding what your target audience wants from you is crucial for choosing the right colour scheme.

For example, a health and wellness website might use soothing green and blue tones to evoke calm and trust, encouraging users to feel secure and content in their choices. On the other hand, an e-commerce site could use red and orange to create a sense of urgency around sale prices, prompting quicker purchasing decisions. A law firm or bank will probably use a limited colour palette with maybe one or two accent colours, which suggests restraint and professionalism, while a kids’ activity centre will use multiple bright colours to convey a sense of fun and playfulness.

It’s easy to see how you can leverage colour psychology to reinforce your main selling points to customers. Returning to the example of a wellness website in calming greens, your mind instantly conjures up relaxing in fluffy robes, sipping herbal tea as gentle background music and scented candles replace the hustle and bustle of everyday life. You would be exceptionally disappointed to discover that the manicure you had booked would take place at a kiosk in a busy shopping centre where speed was the top priority. However, if the same website used a red colour scheme, it would be much more obvious that this business took a functional approach to wellbeing, which is ideal if you need to get a nail fixed on your lunch break. Clients would book expecting a fast treatment that fitted into their busy lives, and not be disappointed at all by the lack of pampering.

What Do Different Colours Mean in Web Design?

Plenty of research into colour psychology has allowed scientists to build up a profile of the different colours and their psychological effects. To give you some inspiration for your own branding, here are some key colours and the most common emotions they evoke in Western European people:

• Red: Energy, passion, urgency, bravery
• Blue: Trust, calm, professionalism, water
• Yellow: Optimism, warmth, happiness, sunshine
• Green: Growth, health, tranquillity, nature
• Purple: Creativity, luxury, mystery
• Orange: Enthusiasm, friendliness, affordability
• White: Simplicity, purity, cleanliness
• Black: Seriousness, discretion, supernatural

If you aren’t aiming your brand at Western European audiences, it’s well worth researching colour psychology relevant to the cultural context of your intended market. If you aren’t from that culture yourself, I would highly recommend hiring a UX designer who is, as they will help you avoid making basic errors or offending your users with poorly chosen colours.

Developing A Full Colour Scheme For Your Business

Branding isn’t just about picking whatever colours you want and throwing them onto a website, even if you have carefully thought about their meaning and symbolism. You’ll also need to consider exact shades and transparencies of the colours you do pick. There are 16,777,216 colours available for websites, so saying that your main brand colour is blue narrows that down to 2-3 million shades, which is not particularly helpful. Once you have your starting shade, a good colour scheme will use this specific colour as a starting point for selecting other colours so that colours can be combined easily, while also ensuring good contrast and readability.

Let’s look at the 4 main strategies for creating a harmonious colour scheme.

Complementary Schemes

Using a colour wheel, pick the opposite colour to your first choice. Colours opposite each other on the colour wheel have high contrast to each other, so create a strong visual effect. You’ll be familiar with some of the most obvious ones: red and green screams Christmas, while purple and yellow evokes the Grange Hill logo among elder millennials. However, if you experiment with tones, you can create impactful schemes from more subtle colours, such as pastel pink and chartreuse or teal and burnt orange.

Analogous Schemes

In an analogous scheme, the colours either side of the main colour are used. You’ll see combos like yellow with very soft oranges and light greens, or purple alongside deep reds and blues. This type of colour palette is often found in nature; think about the variants of green in garden, or the shades of brown on animal fur. As a result, this type of colour scheme is very easy to work with, but creates quite subtle effects.

Triadic Schemes

A triadic scheme divides the colour wheel into three. Start by placing your main colour at 12 o’clock, then read off the colours at 4 o’clock and 8 o’clock. The most obvious example is the primary colours of red, blue and yellow, but you can also use secondary and tertiary colours in this way, for example, teal, dark pink and mustard yellow work quite well together. This type of colour scheme is usually quite bold and reads as playful when used all at once. It also works well when distinguishing between two different aspects of the same brand; for example a company with a blue logo might use a red accent for their retail branding, but a yellow accent for wholesale.

Monochrome Schemes

A monochrome scheme uses one colour, so instead of picking other tones from the colour wheel, you travel in and out picking lighter and darker versions of your original colour. This can look very slick and effective, especially when you want to keep things simple. However, it can also look quite bland if handled badly, and lots of similar shades can lack contrast and therefore be hard to read.

Making Your Colour Scheme Accessible

Using the above strategies to pick your colours should help make sure they look good together, but unfortunately, this doesn’t guarantee that they’ll be readable. For example, my lovely pink and chartreuse colour scheme looks good as colour blocks, but using this combination for text is pretty horrible. Instead, it would be better to use these two colours as backgrounds, with black text on top.

I love Coolors.co for testing out palettes, fine-tuning the exact shades, and checking the contrast of various colour combinations. As the above example shows, you don’t need to ditch your whole colour scheme if the main colours don’t contrast well enough, you can add neutral colours instead to keep your favourite colours while prioritising accessibility. If users can’t figure out where to click, because call to actions, buttons or links aren’t easily differentiated from the background elements, then it doesn’t matter how great your colour scheme is; your site will not perform well. Tweaking the colour of the buttons on one client’s site contributed to significant growth in sales, so ignore the intricacy of colour psychology at your peril.

Pobody’s Nerfect

Another big issue clients frequently face when working on their colour scheme is the desire to get it absolutely perfect. Unless you are having full brand guidelines implemented across your entire business, including a print run of a million leaflets, then it’s ok to try a few different shades out before committing. We always set colour schemes centrally via CSS, so it’s easy to switch things round. You can also use A/B testing and customer feedback to see how different colour options perform before making your final choice.

Hiring a web designer is a great way to ensure your chosen colour scheme looks great in every scenario, is fully accessible and reflects the key values and overall tone of your business. If you’re feeling like your branding could do with a boost, we can help you whatever stage you’re at.

Book a free call, or send us a message to get started on your project today.