Colour and Design

November 20 2012

Colour and Typography are two of the most important elements in design.
When you harmoniously combine them all, you attract a quicker attention to the subject, reinforce impact and recognition, help in establishing powerful identities and brand.
For example when designing the accounts section of an annual report, it's probably not a good idea to use the colour 'red' to highlight some of the numbers, since the red colour in accounting means a negative number, while black is positive. 

Colours change according to their surrounding:

A large rectangle and a narrow line (or type) of the same colour will seem to have different values when placed against a white background: the colour in the line will look darker than it does in the rectangle, because it’s surrounded by much brighter white space. 

When two shades of the same colour, one dark and one light, are paired with each other, the darker shade will look darker and the lighter shade will appear to be lighter: a pink rose will seem to be paler against a purple background. 

Larger colour spaces will affect the smaller ones: if a small square of medium yellow is surrounded by a larger area of black, the yellow square will seem to be brighter than when surrounded by white. Any colour will appear lighter against a darker colour and vice versa.

Outlining a colour in a darker shade will enhance the enclosed colour, helping to keep a colour from “spreading” into surrounding areas. On the other hand, a lighter outline will cause a colour to spread to adjacent colours, and reduce the strength of the enclosed colour.

There’s also the illusion how dark colours surrounding light ones will make the lighter area appear smaller than it is if it were the opposite (dark surrounded by light). It’s why you should always bump up the text size if you insist on using white text against a black background.


Colour psychology

While perceptions of color are rather subjective, and have different meanings in various cultures, some colours affect us in a similar way. The human eye sees warm colours before cool hues. Cool colours appear to recede, while warm colours appear to advance, however the degree of saturation can make a difference.

  • RED: With its aggressive, stimulating and sexy nature, assertive attention and provoking action, the red is impossible to ignore.
  • PINK: Depending on its saturation or value, pink evokes varied mood swings. Magenta and fuchsia are perceived as sensual and theatrical. But water-down the red in lighter pinks and the raw sensuality of red is replaced with gentle romanticism.
  • ORANGE: Inheriting some of the drama of red, orange is tempered by the friendly humour of yellow. It’s the colour that stimulates the appetite and radiates with warmth and vitality.
  • YELLOW: Yellow and black is the most unignorable colour combination in nature – tigers, stinging bees – it’s the colour that says: you’d better pay attention to me.
  • BROWN: Rustic, durable, wholesome and deliciously rich are just some of the traits of the colour that’s often associated with earth and home, substance and stability.
  • BLUE: Ever noticed how many corporations and financial institutions use blue in their brands? That’s because blue is seen as dependable and committed. It is also the colour we often associate with calm and serenity. Darken the blue and you’ll add an instant authority, credibility and power to it.
  • GREEN: Because of its association with nature and foliage, green in design can be used almost like a neutral colour: greens never clash with red or pink roses, yellow sunflowers, lilacs or bluebells.
  • PURPLE: It’s perhaps the most enigmatic and complex colour, with the range of meanings – from royal to elegant to spiritual to mysterious. Purple is often favoured by very creative and eccentric people who are not afraid of appearing daring.
  • WHITE: Not surprisingly white communicates purity, sense of clarity and simplicity. White is also perceived by the human eye as a bright colour, that’s why it works so well in contrast with all other colours.
  • BLACK: People see black as the most dramatic, heavy, powerful, classic colour with an up-scale look. Because of its extreme contrast to white, black and white is the quintessential combination of depth and clarity, power and innocence.

DON’T be afraid to experiment with colour combinations,  sometimes even the most forbidden combinations work. 



type and colour

Readability when combining colour with type is very important. It’s true that we mainly deal with the black type on white paper/page background, and that a black text on a light background is the easiest to read. However, it doesn’t mean that colour and type don’t mix. When used well, colour can add an emphasis to your message.

Pay attention to the relative values and saturation of colours when a background colour interacts with coloured type. The contrast between type and background diminishes when their values move closer to each other, and the type becomes less legible. The contrast between the type colour and the background colour must be considerable to ensure that the type remains visible.

When using reversed out text, it’s often advisable to make the text a little heavier, as the dark background tends to optically reduce the weight of the text.