How to choose the right colours for your brand & website

Believe it or not, colour choice can have a huge impact on the success of your website. This is because we all have pre-conceived notions about what certain colours signify. Red for example can be used for passion or danger, while blue is mostly often used to promote trust in large corporations like banks and councils. Making sure you understand the underlying meanings of colours is essential to giving your users the right web experience. This blog will walk you through basic meanings, rules and how to make the best choice for your brand.

Basic colour theory

The image above from The Interaction Design Foundation shows the 6 different types of colour scheme. The most common you’ll see, particularly in web design, are analogous and complementary.

Analogous colour schemes use one core colour, and then colours close to that in the colour wheel are used to build a scheme. This gives a very clean, subtle look like the examples listed in this link.

Complementary colour schemes work the opposite way, picking a main colour and then choosing colours from the opposite side of the colour wheel to build out the scheme. These colour schemes tend to be more dramatic and bold, like this gorgeous pink and green example from Rock, Paper Plant.

It’s up to you whether your brand is better suited to the mellow, cohesive colours of an analogous scheme, or a more daring and bold complementary. Our suggestion would be to choose an initial colour that feels most like your brand, and then experiment using tools like coolors.co until you find a scheme that feels right.

Basic psychological principles of popular colours

  1. Red: energy, danger and passion. Red is a fantastic colour choice for making people take immediate action - a red button always feels more important than a green one. You’ll see a lot of red in e-commerce websites (particularly those trying to be extra pushy) and from brands that want you to subscribe.

  2. Orange: the colour of optimism, joy and happiness. Orange is largely seen as a “fun” colour all around the world. Using orange in your web design is a great way to show you don’t take yourself too seriously and that you’re business isn’t stuffy and corporate.

  3. Yellow: the sunshine colour, yellow is associated with happiness, vibrancy and joy. Yellow is super cheerful and accessible (though watch out when using it with white text - it can get tricky to read). This is a great website colour to use for service providersas it show’s you’re happy to help!

  4. Green: nature, calm and healing. Green has come to mean all things health and eco-consciousness, so is perfect for brands with focusses in those areas. Green is a friendly colour that will invite users into your site.

  5. Blue: the most versatile and universally used. Blue has been shown to inspire feelings of trust and authority, which explains why it’s used so often in baking, housing and big business. Blue is a great colour to use for accountants and professional services.

  6. Purple: witchy, creative and confident, purple is a unique colour choice for a website and commands attention. Tread carefully when creating complementary colour schemes with purple - it can be notorious for clashing!

  7. Pink: fun, creativity and exuberance. Pink is the hot colour of the moment being embraced by businesses in all industries. It’s easy to pair with other colours, and adds a real sense of fun and vibrancy to a business.

  8. Brown: earthy, wholesome and rich. Brown is a comforting colour, particularly when used in web design. It gives websites a natural, down-to-earth vibe and work incredibly well with anything retro or vintage inspired (remember your nan’s 70’s curtains??)

  9. Black: modern, sleek, simplicity. Black is a great minimalist colour that works incredibly well for luxury and high-end brands like Jo Malone. Black can be paired with just white for the perfect minimalist vibe, or with another bright for a real pop.

  10. White: minimalism, transparency, ease. Sometimes the best choice of colour for a sleek and minimal website is no colour at all. White is a neutral shade, which means it can easily be combined with other colours for a rich colour scheme.

  11. Grey: authority, maturity, business. Grey is no-nonsense, it means business.

 

Our favourite resources for building an appropriate brand colour palette

coolors.co

We love this simple colour palette generator. We find it works best if you have an idea of your main colour, and you can then build complimentary or analogous themes around it. We also love using the trending palettes section to find inspiration for our next project!

Pinterest

It requires no real introduction, but when it comes to colour inspiration nothing beats a bit of Pinterest.

 

 

We hope you found this blog useful, and as always, feel free to reach out on Instagram or at hiya@luckynightstudio.co.uk if you have any questions. Until next time dreamy biz babes!

Louise & Naomi

Previous
Previous

How colours and palettes work in Squarespace

Next
Next

Studio update! Where we’ve been and where we’re planning on going in 2023