Web Design 101: Tips on Colours

Posted on May 13, 2013

In our last article, we talk about few tips on font and typography when designing your website. In this post, we will share some other tips on colours.

web design_colour

Colour Wheel

To start off, let’s discuss the importance of primary colour, secondary colour, and tertiary colour. These two terms give you the practical guidance to colour mixing and visual effects of specific colour combination. Primary colours refer to red, yellow, and blue and these three colours cannot be mixed by any combination of other colours. All other colours are derived from these three. Green, orange, and purple are the secondary colours which are formed by mixing the primary colours. Tertiary colours are yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green. These colours are formed by mixing a primary and a secondary colour. Below is an image of a colour wheel with the tertiary colours.

Example of Colour Wheel

Colour Scheme

Colour is an important aspect of your website because it can affect the entire mood, feel, etc. There are a few popular ways to create colour schemes. If you want to create a website with high contrast, vibrant and energetic look, you can choose complementary colours by choosing colours that are opposite from each other on the wheel. In contrary, if your goal is to create a harmonious website, you can choose an analogous colour scheme, which is comprised of colours that are next to each other on the colour wheel. For example, you can choose green, light green, and blue.

One important tip for you to consider is stick with 2-3 base colours for your website and also make use of tints, shades, and tones of these base colours. For more info about tints, shades, and tones, check out this website.

Colour Scheme Inspiration


Does this colour scheme look cool to you? Kuler.adobe.com is a website that features many colour schemes created by thousands of online web designers. Once you choose a scheme you like, you can even find the RGB and HEX colour so that you can fine tune it on different elements of your website such as top menu bar, vertical menu bar, font sizes and title, etc.

We hope you find the colour tips helpful. Feel free to share this blog post on your Facebook and Twitter. Stay tuned for more web design tips.