Tutorial

Website Tips & Tricks

What Colours Should I Use On My Website

There’s so much more to choosing colours for your website than aesthetics, because colour has such a powerful psychological effect on people’s emotions and decisions. It’s the strongest tool in your branding arsenal.

How to Choose Your Website Colours

You need to put some thought into this, so I’m going to give you some pointers to think about when you’re considering colours for your website and brand. When choosing a business brand palette, it’s not about your favourite colours or what your designer says is on trend. It’s about what speaks and appeals to your ideal customers, as well as what differentiates you from your competitors. Picking a colour is not an exact science. Preferences are super personal, and they can be influenced by many things, such as a person’s culture or their upbringing. The psychology behind each colour, and using the colour wheel is an incredibly useful tool in creating effective colour schemes.

The Colour Wheel

On the left-hand side of the wheel, we have the warm colours – they are strong, exciting and energetic, and they appear to advance towards you. And then in contrast, on the right-hand side, the colours are dependable, calm, and soothing. The three primary colours are yellow, red, and blue and they form the base of every single colour on the colour wheel. Then, we have the secondary colours: green, purple, and orange, which are made by mixing the two adjacent primary colours 50-50. For example, green is made from 50% blue and 50% yellow. The six tertiary colours – the rest of the colours on the wheel – are made by mixing the two adjacent secondary colours. Colours evoke an emotional response and using the right colours on your website and in your brand will communicate your brand’s message and your personality immediately. That’s even before they’ve read any copy on your website, looked at pictures or grabbed freebies. It’s the colour that’s gonna tell them what you’re all about.

The Primary Colours

Let’s start with the primary colours. Red is bold, exciting, attention-grabbing, and it’s the colour of love and passion, and of warning signs and danger. It’s very emotionally intense, so using too much of it can be very overstimulating. Dark shades of red inspire confidence and passion, whereas tints of red are more associated with caring, love, romance, and femininity. Yellow is a bright, sunny, hopeful, cheerful colour. It’s positive, warm and it’s optimistic. It’s a very visible colour and stimulates mental activity. Blue is authoritative, dependable and trustworthy. Shades of blue, such as navy, are perfect for financial and corporate websites where success, strength and authority are super-important, whereas tints of blue are more relaxed and calming.

The Secondary Colours

The secondary colours take on the qualities of the primary colours they’re made up of and also have their own qualities too. Let’s have a look at orange first. It’s vibrant, confident, fun, and energetic and it’s associated with creativity and autumn, and it’s a fabulous colour to motivate. Green, like blue, is very calming, but it has more energy because of the yellow in it, and it’s associated with nature. It represents freshness and growth, it’s the perfect colour for sustainable business. Darker shades of green are linked with wealth and leadership, and greens with more yellow, such as lime green, are more vibrant and more youthful. Bright, vibrant purples are the colour of choice for imaginative, artistic, unconventional businesses. The dark shades of purple are associated with royalty and luxury, and the paler tones evoking romance and summer. Purple takes on the qualities of both red and blue, and it can be either stimulating or calming depending on how much of each colour is added.

Neutral Colours

Neutrals are not officially on the colour wheel but they can be so powerful in branding that I can’t ignore them. Brown is made by mixing opposite colours on the wheel, for example, yellow and purple, or red and green. The resulting brown of those two colours takes on the attributes of the parent colours. But in general, brown is a rugged colour, it’s masculine and it’s associated with earth and authentic, organic businesses. Black is a really tricky colour, so I recommend that you avoid it if you can. Using black is one of the main things that I see wrong with someone’s website. If you look at a site and you know it’s off but you’re not sure why, usually it’s because they’ve used black. Black is used in a lot of themes and is used as quite a standard thing, but if you change that to a very dark version of one of your colours, like a really deep purple for example, or dark blue, then that will be much more successful. Or, if you don’t want to use a colour, you could also use a dark grey or something like that instead. White, as with black, doesn’t work for everyone as it can create a very harsh backdrop. Just adding a tiny bit of colour in with the white, to warm it up, or tie it in with your brand colours, can make a massive difference. Unless you want a very clean, modern, minimalist look, in which case white is the perfect backdrop. And finally, we can’t ignore grey! It’s the perfect neutral. It’s used by designers as a background colour because it shows off the other colours well, and doesn’t change them in the way that both black and white can.
Hopefully you now understand the theory of colour and have identified some colours you think will work for your brand. Give it some thought, play around with it and have some fun, and I know you’ll find just the right colours to really represent your business! I hope this tutorial has helped you with choosing colours for your webiste. Please feel free to add a comment below if you have any questions or send a private message through the contact form, I’d love to hear from you.

Play video

Leave a Reply

Your email address will not be published. Required fields are marked *

,,

Stay connected.

Oh, friend, it’s time to create or improve your website. 

Sign up for

Wordpress Tutorials

Design Tips

Inspiration

Freebies