Using Colour in Design: Tints and Shades

If you’re new to working with colour, it can be tempting to use LOTS of colours, but by sticking with one colour you can gain a nice uniformity in your designs. To get a range of colours based around one colour, you can do two things;

1. Add white to the base colour. This creates a TINT.

2. Add black to the base colour. This creates a SHADE.

Monochromatic Colour Schemes

The monochromatic colour scheme uses variations in shades and tints of a single base colour. You can use this scheme to create a clean elegant look. The monochromatic scheme is very easy on the eyes, especially with blue or green hues.

A monochromatic colour scheme can give a site a clean and classic look, but also provides excellent opportunities to let full colour photographs dominate. Monochromatic schemes are often used for serious political and business sites such as banks and large corporations, but a quick trawl of the web will reveal some very cool and trendy sites using this scheme too.

If you’re using a monochromatic colour scheme i.e. a ONE colour scheme, you can convey an order of importance for items like a menu or a chart on the web or print by using tints or shades.

In the illustration below, I’ve set up a menu for a webpage, using Photoshop, which is based around a kind of moss-green colour. I’m using tints to show the hierarchy, with dark green at the top level, a lighter green for the main menu rollover, lighter again for the drop down menu and almost white for the menu rollover.


A few examples of websites using a monochromatic colour scheme that I like are;

1. – A vision in blue.

2. – A mossy green site from Berlin.

3. – Producing a warm orange glow.

4. – A fiery red.

Any monochromatic colour schemes out there that you like? I’d love to hear from you.

One comment

  1. Pingback: Graphic Design » Graphic Design September 11, 2007 8:01 pm

Comments are closed.