Understanding the basics of colour theory

Intro

Trying to build or refresh a business website? You’ll need to understand the basics of colour theory. We all know that fonts, layout and images play important roles in website design, but there’s another element that often isn’t given much thought – colour. Too often, colours are chosen based on what looks pretty, without consideration of the impact those colours have on the user’s impression.  Colour often dictates the initial emotional response, significantly influencing what people look at on websites the moment they land

When chosen well, colours have the power to create a connection with your audience, reinforce your brand identity, and guide users through your site. But if chosen poorly, they’ll simply look nice. Below, we’ll cover everything you need to know about colour selection, drawing on the principles of Colour Theory as the foundation for decision-making.

Colour contrast

The psychology of colour

Colour theory, or the study of colours, may sound like an intimidating topic reserved for artists and designers, but it’s not as complicated as you might think. In fact, with just the basics, you can begin to make informed decisions that dramatically improve the look and feel of your site. Whether you’re starting from scratch or fine-tuning a few details, understanding the principles of colour theory can make all the difference.

Let’s start by exploring a few of the main tools in Colour Theory – the Colour Wheel and Colour Psychology. We’ll explore each of these in more detail later.

The colour wheel

Colour is a design tool. And one of the ways we can implement that tool is in the form of a colour wheel. A colour wheel makes it easier to see the relationships among various colours, allowing us to narrow thousands of hues into a more manageable selection.

The colour wheel is divided into three main categories: primary, secondary, and tertiary colours. You might remember from your school days that primary colours – red, blue, and yellow – are the building blocks for all other colours. They can’t be created by mixing other colours, which is what makes them so unique in the colour spectrum.

Then we have our secondary colours—green, orange, and purple—which come to life when we mix the primary colours together. Tertiary colours take this concept further by blending a primary colour with a secondary colour to produce an even more subtle hue. With countless shades available, designers can utilise a colour wheel to craft any palette, ranging from bright and energetic to gentle and calming.

Colour psychology

Colour psychology is essentially the study of how colours impact the way that we feel. This concept isn’t exactly groundbreaking; in reality, it’s been around for centuries. One of the earliest essays on colour psychology was written in 1810 by the German artist and poet Johann Wolfgang von Goethe.

The essence of the concept lies in the idea that colours can evoke emotions. For example, blue embodies tranquillity and dependability, making it ideal for brands aiming to project trustworthiness, such as PayPal, Visa, and LinkedIn.

In web design, colour makes a site visually appealing, but it can also be used to set a mood and influence behaviour. Whether you want to entertain, educate or inspire, create credibility or connection, the right palette makes all the difference.

For a more in-depth look at colour theory, have a look at the article Colour Theory for Designers by Smashing Magazine.

Colour palettes

Choosing the right colour palette for your website

When choosing a palette for your website, it’s important to select colours that complement each other and create a harmonious overall look. In my experience, I’ve found that there are no exact rules for selecting colours. In fact, sometimes breaking the “rules” you thought you knew about colours can be the secret to making an impact. That being said, the best way to begin picking a scheme or palette, is with our trusty colour wheel.

To contrast or complement?

Earlier, we discussed how helpful a colour wheel can be in selecting colours that work well together. But there is more than one way to use a colour wheel. In general, designers will use one of three schemes.

Complementary scheme

Colours that sit opposite each other on the colour wheel, such as blue and orange or purple and yellow, make for striking combinations. Combining colours in this way is ideal for making impactful statements or emphasising important actions on your site, like call-to-action buttons or promotional banners.

Analogous scheme

Adjacent colours on the wheel, like blue and green, make for a subtle and harmonious palette. Analogous schemes are perfect for establishing a soothing, unified website, making them well-suited for brands wanting to convey tranquillity and flow.

Monochromatic scheme

Monochromatic schemes involve different shades of one colour, such as a transition from light blue to navy. This creates a sleek and elegant aesthetic, providing your website with a sophisticated appearance while being easy on the eyes. A useful tool when selecting monochromatic colour schemes is Colour Blender, which allows you to create a gradient of colours between two different colours.

Other great tools are Adobe Color or Paletton, which can help you create custom colour palettes based on colour theory principles. Colour scheme extractors, such as Color Space, can be used to pull a colour scheme out of an image or photograph.

Emotions

Emotional impact & colour choices

Knowing what type of colour scheme you’d like to use is a great first step, but choosing individual colours requires an understanding of emotion and perception. You may not be able to reinvent your brand’s identity, but you can use colour psychology to choose colours that align with your brand, while working for your website.

Red: energy

Red symbolises energy, passion, and urgency. It captures attention, particularly in call-to-action buttons or alerts. Moderation is key, though, as excessive red can overwhelm users.
Brands that use red: Coca-Cola, Netflix, YouTube

Blue: trust

Blue inspires a sense of calm, stability, and trust. It’s a preferred choice in sectors where reliability and professionalism are key, such as banking and technology. A blue colour scheme makes users feel safe and comfortable as they navigate your site.
Brands that use blue: PayPal, Visa, Facebook

Yellow: optimism

Yellow exudes warmth, positivity, and clarity. It’s perfect for brands in creative or child-oriented fields, providing a friendly and cheerful vibe. To balance its brightness, combine it with darker shades.
Brands that use yellow: McDonald’s, IKEA, Snapchat

Green: harmony

Green represents growth, renewal, and balance. It’s an ideal colour for brands related to sustainability, wellness, or prosperity. Green schemes produce a refreshing, stable atmosphere.
Brands that use green: Starbucks, Land Rover, Greenpeace

Purple: innovation

Purple merges blue’s calmness with red’s vibrancy, creating a hue that radiates creativity and opulence. This colour is ideal for brands aiming to express sophistication and innovation.
Brands that use purple: Cadbury, Hallmark, Wimbledon

Orange: adventure

Combining bold red with joyful yellow, orange is a colour of warmth and vitality. It suits playful, adventurous brands and is great for attracting attention without the same urgency as red.
Brands that use orange: Fanta, Nickelodeon, Harley-Davidson

When you have an understanding of colour harmony and the feelings that different colours evoke, you can create a website that not only looks the part but also resonates with your audience.

Contrast

Shadow is another way you can use colour to create depth and dimension on a website. Drop shadows add a sense of depth and separation between different elements on the page, which makes them great for buttons, images, and other elements you might want to stand out.

Another technique is to use shadows on text to create contrast and emphasis. Text shadows can be used to make text more readable and legible, especially when they sit over images or colourful backgrounds. Just be sure to use them sparingly. Too little can result in a flat, boring design, but too much shadow can be confusing and hard to navigate.

Use the WebAIM Contrast Checker tool to help test your contrast ratios and make sure your site is accessible to everyone.

Colourful Websites

Real-world examples of effective colour use

Theory is great, but it’s always much more helpful to see concepts in action. With that in mind, let’s look at a few websites that my team have created recently and how we utilised colour to create impact.

Bringing the energy with Gather & Gather

When we partnered with Gather & Gather, their goal was to revolutionise the food and drink industry. Their midnight green/teal logo radiated boldness and creativity, aligning with their identity as pioneers in their space.

We boosted the energy by incorporating bursts of yellow and pink. Yellow symbolises energy and innovation, while pink adds a touch of fun and daring. These selections were intentional; they embody Gather & Gather’s own description: “brave, bold, and curious adventurers in food and drink.”

Getting unreal with the GenITeam

Creating a new website design for game development firm, GenITeam, meant thinking outside the box. Like any business, credibility and professionalism matter, but in the tech industry, boring doesn’t cut it.

We opted for purple on the website, conveying creativity and innovation. Forgoing the traditional white background for something more impactful, we aimed to make the website reflect a similar experience to gaming, allowing you to become immersed in the content.

Confidence first with Medicine Drop

As with any business in the healthcare industry, Medicine Drop relies on customers being able to identify their website as a legitimate, trustworthy business. Combining navy and teal, the completed website invoked feelings of calm, stability and trust alongside sustainability and wellness. The result is a website design that looks right at home alongside some of the nation’s most established pharmacies.

You can read more about this project in our Medicine Drop Case Study.