Colour (US spelling Color)

Understanding the properties of colour (US spelling color) both in print and on screen is essential when ascribing colour values to elements of a design. Colour can be perceived both in terms of its physiological effect and its cultural or social significance. It is associated with various emotional states: green with envy; yellow with cowardice; and blue with melancholy.

Colour is a means of gaining attention and adding visual dynamism. It can be used to aid navigation through media. Colour can enhance visual communication imbuing it with emotional value. It can organise and categorise elements through use of a colour coding system. Colour can help unite nations as in the Olympic symbol and what it represents. The image below is from this source.

The colour wheel
The colour wheel demonstrates the organisation and inter-relationships of colours. It consists primarily of 12 colours with black representing the mixture of all colours. Image Source.

Hue (primary, secondary and tertiary colours)
Hue is another name for colour. Colours can be grouped in three distinct types: primary, secondary and tertiary. Primary hues are red, yellow and blue. Secondary hues are the equal mixtures between pairs of primaries for example: red and yellow gives orange; yellow and blue produces green; and blue and red yields violet. There are six tertiary hues or colours. A tertiary colour is formed when a primary colour is mixed with an adjacent secondary colour. There are six tertiary colours: red-orange, orange-yellow, yellow-green, blue-green, blue-violet, and red-violet.

Primary colours
Primary colours are absolute colours and not mixed from any other.

Red, yellow and blue are the staple colours used by artists they appear in the pigments of inks and paints. All other colours can be mixed from these three.

Red, green and blue are the additive primaries forming light and responsible for all the colours we see on screens. When all three are added together in equal amounts white light is formed. When added together in varying quantities they form other colours.

Magenta, yellow and cyan are known as subtractive primaries. These colours (along with black) are used in four colour lithographic printing.

Saturation describes the intensity of colour. Pure unmixed colours have maximum intensity. Adding black, grey or white to alter the colour will reduce its intensity and create tones.

Tone: colour values
Adding white or black to lighten or darken a colour creates tints and shades and alters the colour’s tonal value.

Complementary colours
Complementary colours are opposite hues on the colour wheel and provide vivid contrast. Red and green, yellow and violet, and blue and orange are complementary colours.

Colour temperature
Colours can be described as warm and cool. Red, orange and yellow are warm colours whereas blue and green are cool. Greys can also be described in terms of warm and cool depending on the tint of red or blue they contain.

Colour combinations
Many artists and designers such as Johannes Itten and Josef Albers have experimented with the use of colour. Colours are conditional and depend on the surrounding environment in which they are set. Particular pairings dramatically alter the visual perception of both the colour and the shape it defines. Colours appear to change vibrancy depending on the colour surrounding it. Colours can also appear to advance and recede. Red on yellow will appear to advance whereas blue on green will recede. Image Source.

Colour harmony
Colours with similar properties appear to form harmonious relationships. Mixing two colours to form a third provides a bridge between the two colours. Rob Carter, author of many books on fundamental design principles describes this as ‘the offspring hue resembling both parents’. This technique also creates the illusion of transparency, as if one colour is overlapping the other.

Colour emotions
Colour has many qualities that are open to emotive interpretation. Some colours are perceived as masculine or feminine, soft or hard, trendy or traditional. Colour portrays the richness of culture and evoke atmosphere.

Colour and type readability
Type readability is dependent upon sufficient contrast between the foreground and background. If the type and its background are too close on the colour wheel there won’t be sufficient contrast. Yellow on black provides a high degree of contrast whereas yellow on white is very subtle. Blue on black provides very little contrast but conversely blue on white does. The image below demonstrates the limits of the physiology of the eye in perceiving colour. The eye has increasing difficulty in distinguishing between foreground and background colours when the contrast between the two becomes very slight.

Complementary colours vibrate against each other. When applied to type and its background this will cause visual dissonance and detracts from readability.

Information designers will often use colour as a functional rather than a decorative element. Colour can be used to code sections of a book. It can gain emphasis for a particular word by either placing it in colour or within a colour bar of sufficient contrast. Colour bars can also be used to underline information or run vertically along side a number of lines of type to highlight their importance.

Cultural significance of colour
In Western cultures white is a symbol of purity and associated with weddings. Black is linked to funerals and mourning but is also the colour many of us choose to be formal or stylish. Red represents good fortune in China and is the colour used at weddings. In Western cultures red is associated with danger but also with passion. In India red is a colour of purity. Orange is the colour for Halloween in the US and also the colour associated with Irish Protestant faith. Yellow is a sacred and imperial colour in many Asian cultures. Green is the colour of Islam but a lack of fidelity in China. Blue is a holy colour in the Jewish faith; a sacred colour to Hindus for whom it represents Krishna; a colour of protection in the Middle East; and immortality in China. Purple is a symbol of royalty in European cultures. The image below portrays the rising sun of the Japanese flag.

Political significance
Political parties adopt colour as part of their identity. In many countries red is associated with left wing politics and blue with right wing politics. In 2004 orange took on a more chilling significance. Terrorists in Iraq have dressed their victims in orange as a political statement against the Iraqis being held in Guantanamo Bay who are also dressed in orange. A red cross is both the Swiss and English flag. It is the symbol of the International Red Cross. In Islamic countries it still might provoke associations with the Crusader Invasions.

Environmental factors effecting colour
Taxis and trains often use a combination of black and orange for lettering and background colours. This is a combination that works well both during the day and at night. Colour will appear to change under natural daylight conditions and as daylight fades colours become more muted. Colour again changes when subjected to electric light conditions.

Specifying colour for screen, visuals and commercial reproduction
No system of colour specification across a range of media is 100% accurate. The way colour looks on screen will be different from the same colour laser printed or lithographically reproduced. The human eye perceives colour differently. To ensure accurate colour matching you will have to be the judge and not rely on others.

There are two main ways of specifying colour in print. Cyan, Magenta, Yellow and Black (CMYK) is a four or full-colour process. K represents black as it keys in the other colours. CMYK is used to reproduce colour photographs where a likeness to reality is required. Percentage tints of cyan, magenta, yellow and black are used in various combinations to achieve a multitude of colours. The Pantone Matching System (PMS) is a system of pre-mixed special colours. Pantone colours can be printed as flat 100% colour or specified in percentage tints of the colour. A dark and light colour combination can be used in varying tints to create photographs as duotones.

Colour and the web
The Hexadecimal system is used to specify colours for the web. Colour is intrinsic to the psychology of communication on the web. Colour can be used to aid navigation. Colour is also used to represent whether links are active or visited. Not all screens will ‘see’ colour the same way and therefore testing across platform and browsers is always advisable.