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 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

Colour Scheme

 

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.

Monochromatic Colour Palette

Analogous: this scheme uses hues that are next to each other on the colour wheel.

Analogous Colour Palette

Triadic: Uses three colours that are equidistant from each other on the colour wheel.

Triadic Colour Scheme

Complementary: this scheme uses hues that are opposite one and other on the colour wheel.

Complementary Colour Palette

Save

Save

Save

Save

3D Colour!

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.

Munsell System

Save

Save

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.

Meanings

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:

 

Colour Wheel of Emotions

Colour Codes

 

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.

 

#RRGGBB

 

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:

 

 

Design Seeds

 Adobe Kuler

ColourLovers

 

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.

 

Check out The Collection of pre-made branding kits for some inspiration!

 

Save

Pin It on Pinterest

Share This