Colour Theory and Website Design


Colour theory is a fundamental concept used by web and graphic designers alike.

Ever wondered how interior designers create colour schemes for their rooms?

You can be sure they are using their knowledge of colour theory.

Knowing just a small amount about this subject will help you in many more ways than you might realize.

I have written this article to give you an introduction to colour theory, in particular for its use in web design.

I’ll be covering some common terms associated with colour theory in addition to examples of websites that utilize different colours to portray different meanings.

Colour Wheel

The colour wheel, also known as the colour circle, is an arrangement of colours based on their hues.

The colour wheel is designed to show different colours’ relationships i.e. primary, secondary, tertiary (I’ll be explaining these terms in the next section).

Artists and designers alike have used the colour wheel at one time or another to create various design schemes for a wide variety of projects.

This is why it is important to familiarize yourself with the concept of colour theory and the terms associated with it.

You can make use of your newly acquired knowledge in the fields of web design and graphic design.

You could even use it to give you inspiration for a colour scheme for a room in your house; be it the bedroom that hasn’t been painted since you moved in or the living room that has become a truly boring place to be.

Colour Categories

Colour theory divides colours into categories such as primary, secondary and tertiary (which we mentioned above).

Below I have explained each category including how they are formed and examples of each category:


Consist of red, yellow and blue.

These are defined as colours that cannot be formed from any combination of other colours.


Consist of green, purple and orange.

These colours are formed from the mixture of two primary colours. For example: mixing red and blue produces purple etc.


These colours are formed by mixing together a primary and a secondary colour.

For example: mixing yellow with green produces yellow-green.

Colour Terms

In order to familiarize yourself further with colour theory there are some common terms that you’ll frequently come across.

Here I’ve made a list of the most common ones with an explanation of each one:


Hue is the term given to each colour of the spectrum.

Another way of thinking about it is that hues are colours that have not been mixed with white or black.


A tint is a colour or hue that has white added to it in varying degrees to make it lighter.


The opposite of a tint, a shade is a hue/colour that has black added to it in varying degrees making it darker in colour.


In the middle of these two terms, a tone is a hue/colour that is mixed with grey.

Colour Schemes

Now that you’ve become more familiar with colour theory, it’s time to learn it’s applications in deciding colour schemes.

Colour schemes are used to create a palette from which web and graphic designers work within to create their web designs, their posters, logos and other designs.


Monochromatic colour schemes are formed using a single hue/colour of different tints and shades.

These colours go well together and are appealing to the eye.

These types of colour schemes are used to create balance and simplicity while looking clean and elegant.

However, a drawback of this scheme is the lack of emphasis on any particular colour which results in a lack of contrast which can be a deterrent if you wish some aspects, of your website for example, to stand out.


A complementary colour scheme is achieved by choosing two hues/colours on opposite ends of the colour wheel.

These colour schemes produce high contrasting results which attracts users visually.

Contrasting warm and cold colours works very well for creating contrast.

For example: by choosing a colour scheme of a warm red colour and a cool green colour you create a vibrant, dramatic effect.

That said, it is not wise to use a complementary scheme in large amounts in particular with text; a green background with red text on your website will make your audience wince and leave your site as quickly as they have arrived.


A triadic colour scheme is formed by choosing three hues/colours that are evenly spaced around the colour wheel.

This type of colour scheme offers a vibrant and contrasting result while still retaining a form of balance and harmony.

To best make use of this colour scheme in your designs it is wise to have one dominating colour that is used more than the other two colours.


Analogous color schemes are created by using hues/colours that are located next to each other on the colour wheel.

This is a particularly harmonious colour scheme.

While it is similar to the monochromatic colour scheme it produces richer results when used effectively.

As these colours are beside each other on the colour wheel they match well and provide little contrast.

Again it is recommended with this colour scheme that you choose one dominant colour and leave the other two for accents.

Colours – their meanings and website examples


Blue is seen as a trustworthy and dependable colour.

The use of blue can create a sense of order.

Research has found blue to be the most popular colour used in design for education.

Lots of professional companies choose blues not only in their websites but in their logos also.

Think about it: Facebook, Twitter, LinkedIn, Skype, Behance, Mashable.

What do all of these have in common? The colour blue!


Green is seen as a tranquil and refreshing colour.

It is also seen as a sign of growth, healing, abundance and prosperity.

Shades of green are used to create a balanced and harmonizing effect.

As a result of greens being associated with nature and vitality it is a popular choice for health and beauty.


Yellows convey happiness, energy and optimism.

It can also spark creativity and stimulate the mind.

Yellows are bright and energizing warm colours.

Because of the vibrancy of yellow, it can be hard on the eyes if used in large amounts and consequently is seldom used as a dominant website colour.


Shades of red can have many connotations if you think about it.

Danger signs are red to keep us away from certain things that could harm us.

The red traffic light means STOP.

Red also encourages action and confidence.

Using red in web design to make certain important areas stand out can work to great effect if not over used.


Black symbolizes a number of things such as elegance, strength, formality and authority.

Many websites use black in their web designs to great effect.

They use black to convey a sense of luxury and professionalism.


White is a clean and neutral colour.

It can indicate cleanliness in medical type websites and simplicity in technological websites.

Some web designers use little colour other than white to create very professional looking websites.


So that covers the very basiscs of colour theory to get you started with your next design project. Creating an effective colour palette to work from will result in a more professional and appealing design.

I hope you found this article useful and if you have any comments or questions, just let me know.

If you enjoyed this article why not share it?

Leave a comment

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