COLOUR & DESIGN
Colour plays an integral role in design. By understanding the basics of colour theory you can inform yourself about how your ideal client may respond to a colour scheme and how to establish a particular mood.
The Colour Wheel
The Primary colours are Red, Blue and Yellow. Most visible colors can be created with these three colours.
Secondary colours are created by mixing two primary colours:
Red & Yellow = Orange
Yellow & Blue = Green
Red & Blue = Violet
Tertiary colours are created by mixing one primary colour and one secondary colour:
Red & Violet = Red-Violet
Yellow & Green = Yellow-Green
A colour scheme is a combination of colours used to convey a certain mood or theme in a design. A colour scheme will help inform typography and design elements when designing a website or creating other marketing materials.
There are four main schemes: Monochromatic, Analogous, Triadic and Complementary. Please see below for meaning and examples using a shade of blue.
Monochromatic: this scheme uses one hue and a variety of shades and tints.
Analogous: this scheme uses hues that are next to each other on the colour wheel.
Triadic: Uses three colours that are equidistant from each other on the colour wheel.
Complementary: this scheme uses hues that are opposite one and other on the colour wheel.
Did you know that colour is 3-Dimensional? The three dimensions are:
Hue (main property of colour, the way colour is referred to, for example ‘red’ or ‘purple’.
Value (Lightness or Darkness; it’s the value on the black and white spectrum. White is on one end of the spectrum, black the other and in between are greys. White is the presence of all colour and black is the absence. Value is the luminosity – bright green is brighter than dark green, so it’s ‘value’ is higher)
Saturation (chroma) refers to the richness and intensity of colour or how pale or strong a colour is.
Colour and Emotion
We may consider colours to be ‘warm’ or ‘cool’. Warm colours include oranges and reds while cool colours include blues and greens. Using a warm colour palette will evoke a different ‘feeling’ than using a cool one. Think about what emotional response you want to cause with your colour scheme.
Cultural considerations must be taken into account. For example, for a traditional wedding, a bride may wear white, but in Asia, white is typically worn by a widow.
Red: is a powerful colour. It can cause quite an emotive reaction. It is associated with energy, urgency, love and passion. Famous Brands using red: Coca-Cola, Virgin, Red Bull.
Orange: Like red, it’s an energetic colour; enthusiastic and cheerful. Famous Brands using orange: Orange, easyjet, McDonalds.
Yellow: A fresh colour, youthful, childish. Famous Brands using yellow: Snapchat, Post-It.
Green: Very much associated with nature, health and wealth; Calm and fresh and restful. Famous Brands using Green: Harrods, Jaguar, Animal Planet.
Blue: A tranquil colour associated with confidence and security. Dark Blue is more serious and ‘Corporate’, Light Blue is friendly. Famous Brands using blue: Citibank (corporate), Twitter (lighter, friendlier).
Pink: Very feminine, soft and pretty. Famous Brands using pink: Barbie, Cosmopolitan.
Violet/Purple: Rich and luxurious but also represents spirituality. Famous Brands using Violet: Cadburys, Hallmark.
Black: Refined and elegant. Famous Brands using black: Chanel, Dior (most luxury designers).
This infographic from aalabels.com presents a colour wheel of emotion:
Colours for screen and print are represented by codes.
Colours for screen are represented by HEX codes (hexadecimal). Computer screens work in RGB (red, green, blue) colours. All three colours overlaid produces white. Hexadecimal colours are used tell the screen what percentage of Red, Green and Blue to turn on.
Hex Code – represented by # + 6 digits/letters. For example #FFFFFF is white (the colours are all at 100%), #000000 is black (the colours are all at 0%) and #FF0000 is red (only the red is at 100%).
CMYK (Cyan, Magenta, Yellow, Black) is the colour model for print. These four colours are the main ones used in most printers. The inks are blended to achieve the colours we see in print. It is very difficult to match web and print colours.
My favourite colour resources include:
Selecting a Colour Scheme for your Web Design project
It’s a good idea to pick a main primary colour for your palette and build out around it. Less is definitely more – a main colour, a secondary colour with neutral supporting shades is sufficient.