Colour Theory and Website Design

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 the following article to give you an introduction to colour theory, in particular its use in web design. I will 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

The theory of colour theory divides colours into categories such as the aforementioned primary, secondary and tertiary colours. Below I have explained each category including how they are formed and examples of each category.

Primary

Consist of red, yellow and blue. These are defined as colours that cannot be formed from any combination of other colours.

Secondary

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.

Tertiary

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 will frequently come across. I have made a list of the most common ones with an explanation of each one.

Hue

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.

Tint

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

Shade

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.

Tone

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 its time to learn of its applications in deciding colour schemes. Colour schemes are used create a palette from which web and graphic designers use to create their web designs and their posters, logos and other design efforts.

Monochromatic

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.

Complementary

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.

Triadic

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

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

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

Greens are seen as tranquil and refreshing. They are also 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.

Yellow

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.

Red

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

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

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.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>