An explosion of colours at the colour run
An explosion of colours at the colour run

As a web designer, my aim in studying colours is to acquire the knowledge that will enable me to use and combine them to support the purposes of the website I am building. I may use understated, muted colours for quiet and subtle sites (Corporate Website). Or exciting and provocative colour combinations for a musician or a band site. My choice will of course depend on the aim of the design.

Colours have a psychological effect. They can stimulate our emotions and most of us are able to understand this at least intellectually.

While reactions to specific colours differ according to the viewer, generally most of us find that certain hues seem quieter, more static, and subdued, and that they elicit a particular emotion. Other hues are dynamic and intense and have an exciting or cheerful effect on us.

No colour ever stands alone

Colours on a web page exist in relation to the surrounding elements on the page, buttons, lines, containers, navigation. These considerations change its APPEARANCE profoundly, and they change its MEANING in the total design.

The following terms are useful in describing colours:


The name of the colour, it is the property that distinguishes one colour from another.  It is the pure colour, without the white or the black. Usually, colors with the same hue are differentiated with adjectives referring to their lightness and or colourfulness, such as ‘light blue’, ‘pastel blue’, ‘vivid blue’. Any color can be described in respect to its hue.  A dark brown would have a red and yellow value on the colour wheel.

An image with the hues cyclically shifted
An image with the hues cyclically shifted Wikipedia


The amount of dark or light it contains when compared with white or black.
Intensity: The degree of vividness or brightness. This property of colour that tells us how dark or light a colour is based on how close it is to white. If one considers red we may assign different names such as pink, violet, maroon, however we know that they all come from red.

Colour swatch - Adobe Stock
Colour swatch – Adobe Stock

Related colours (Tertiary Colours):

Colours which common hues predominates. When a secondary colour and another secondary colour have the same primary colours.

Color wheel chart - Adobe Stock
Color wheel chart – Adobe Stock

Opposing Colours (Complementary).

Colours which contain no common hue. These show the greatest contast. When they are combined , they produce a greyscale colour like white or black.

Cool colours:

Colours related to blue. These are the colours that are associated with water, sky, ice and cooler temperatures. These are RECESSIVE and tend to want to ground the design. They sit in the background of the design and can take on the properties of the surrounding colours.

Iceberg – cool colours

Warm Colours:

Colours related to orange. These are ADVANCING or dominant. Dominant colours will always try to“push through the design”. The eye will perceive dominant colours in the foreground of the design. While colours tend to advance or recede it is not necessarily inherent but will depend upon the context and what else is going on in the design.


Yellow Black Blur Background Images


If you would like a hand with a design project please Get in Touch.

teamSimon is a Sydney based digital designer. He is the Director of a boutique digital design studio, Bailey Street Design located in the vibrant inner west suburb of Newtown. Simon studied graphic design at Shillington College and specialises in web design for small and medium size businesses. Simon and his team (Toby the studio dog) are passionate about visual communication in the digital environment

If you are interested in reading about colour you may also be interested in the following posts;

What is Pantone Colour Matching System?

Tokyo Textures

Visual Design Review – Simple Things UK Magazine –

Sandstone – Colour Palette

Werner’s Nomenclature of Colours: A guide from the pre-photography age – (designfaves)

Wander Hues

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.