Image and Date Visualisation: Using Colour Systems

(Reference taken from: Steane, J. 2014, The Principles & Process of Interactive Design. London, Bloomsbury)

Colour can both harmonize and organize graphic elements and information. Using colours based on a working knowledge of the colour wheel will provide your design with balance, harmony and organization. The basic colour schemes are explained below.

Monochromatic schemes are created by taking a single colour and adding neutral colours to create shades. Monochromatic schemes are harmonious and easy on the eye, but are weaker at highlighting areas of interest. Analogous schemes are harmonious in the same way as monochromatic, but they have the benefit of being to accent the highlight areas of interest.

Complementary schemes use pairs of colour that are opposite each other in the colour wheel. they are good for highlighting features, and work best when one colour is more dominant than the other where the less dominant colour is used as the accent colour.

Split complementary schemes are made from three colours. Choose a colour then select colours from either side of its natural complementary colour. Split commentary schemes create impact, but are often hard to balance. Triadic schemes are created by choosing three colours complementary, triadic schemes are dynamic, but difficult to balance, and often work best when one colour is dominant.

Adjacent Colours

Although colour values can be set, their appearance will change depending on their surroundings, in particular adjacent colours. In general, colours appear brighter on dark backgrounds and are more muted when placed next to a colour of a similar hue.

Colour Scheme Creation 

In Adobe Illustrator, you can use the ‘Colour Guide’ panel (accessible from the Window menu) to help you find colour schemes based on you current fill colour. Alternatively, use online resources to find or create colour schemes:

Colour Scheme Designer

Kuler Adobe


Colour Guide Adobe Illustrator

The Tommy Portfolio Site


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s