According to Marketo, a product’s colour influences 60 to 80 percent of a customer’s purchasing decision.

Brand colours can alter everything from your logo to a website landing page. With the right combination of colours, you can attract potential customers toward your content. This can even help boost conversions on your company website.

By learning the 3 colours rule, you can make the most of your brand colour scheme across your website design. Discover how to make the most of your website colours with this guide to colour theory.


Types of Colours

Before we discuss the 3 colour rule, it’s important we discuss a bit about colour theory first.

So, what is colour theory? At a basic level, colour theory covers how colours interact with one another in design. This includes how they complement one another, contrast, and the vibrancy of these colours.


How we see colours relative to one another refers to complementation.

Colours that are at the opposite ends of the colour spectrum balance one another. This creates a visually appealing effect that draws the eyes. Otherwise, the eyes strain to find this balance.

Many colour schemes for websites use either a triadic or compound colour scheme (more on this below). These two colour schemes use complementing colours to create a sophisticated design.


By dividing elements with contrasting colours, you can focus a reader’s attention on specific portions of the page.

For example, you can match a black background with white text (or vice versa) to make sure the text stands out. This can also improve readability and user experience.

Without contrast, one element fades into the other. Colours too close together on the colour spectrum cause a strain on the eyes. This makes it difficult to read text and focus on content.

To use colour theory to your advantage, match contrasting colours.


Website colours also depend on vibrancy, which can encourage different emotional responses.

For example, bright colours such as yellow and white can communicate excitement. Meanwhile, darker colours such as black and a deep red relax the eyes and direct attention towards text content.

Types of Colour Schemes

There are three common structures for colour schemes. These include analogous, triadic, and compound. Before we dive into these different types of colour schemes, let’s discuss the colour basics first.

Primary Colours

The true primary colours of digital media and print are Cyan, Magenta and Yellow – CMY (commonly simplified as Blue, Red, and Yellow) . Any other colour is derived from a combination of these three.

Then, you can further alter these colours by changing shades, tints, and brightness.


An analogous colour scheme is made up of three colours that sit closely on the spectrum. The colours are so similar that they unite the design elements together.

These colour schemes communicate a cohesiveness without feeling monotonous.


To create a triadic colour scheme, draw a triangle with sides of equal lengths on the colour wheel. The colours at each point of the triangle will differ but still create a balanced colour scheme.


A compound colour scheme uses two complementary colours and two contrasting colours. This allows you to use different colours while still creating balance.

Colour Psychology

Different colours can elicit different emotional responses. According to this study, people make up their mind about a product within the first 90 seconds.

Between 62 to the full 90 seconds are used assessing the colours.

Knowing how each colour influences customers can also help you develop effective web colour schemes for your company.

Make the most of your website design with these hottest trends of 2019.


Red communicates power, passion, and importance. Like the blood running through our veins, it also implies life and energy.

This colour works well for attracting attention, which is why it’s often used in warning signs and alarms. Using it in a call-to-action button can encourage customers to complete a conversion action.

However, red also communicates danger and anger. It should be used to add a pop of colour to content, instead of all over.


The colour orange is unique, friendly, and energetic. A very versatile colour, it’s often used to engage web visitors. As a secondary colour, it can help add movement and energy to a page.

Orange is effective for communicating a light-hearted mood. It’s also good for relaying creativity.


Yellow is a happy, bright colour used to communicate enthusiasm.

Different shades of yellow can also feel comforting and antique (specifically for golden hues).


Green promotes growth and stability. It’s also associated with the environment and finances.

This colour is also good at creating a balance between warm and cool colours on the wheel.


While dark blue feels reliable, lighter blues promote openness and calm serenity.

This colour can help exude trust and reliability between companies and customers.


Darker shades of purple exude mystery and royalty. Purple also communicates romance and luxury.


Black is a timeless, sophisticated classic. It also communicates power.


White is clean and simple. It’s the perfect accent colour for other content on the page.

The 3 Colours Rule

Despite the name, the 3 colours rule is considered more of a guideline than law.

To make the most of the 3 colours rule when choosing colour schemes for websites, choose one primary colour first. Then, complement it with two sidekick colours.

Limiting your colour scheme to just three colours allows you to make the most of simplicity. That way, you can also keep your website colours consistent. This helps develop brand consistency and brand loyalty.

With the 3 colours rule, you can develop a brand that customers will recognize on sight. With a consistent brand, they’ll also be able to recognize your brand on different marketing materials, social media, and of course, your website.

Colour Theory & The 3 Colours Rule

With this guide to colour theory and the 3 colours rule, you can make the most of your website colours. That way, your company brand colour scheme helps attract attention and boost sales.

Discover more helpful web design, SEO, and PPC tips on our blog.