Web Design

Lecture 5 Design Principles

Colour

Introduction
Colour affects us in many ways
some responses may be universal,
others are cultural or even
individual.
Again we can follow a process like
the grid layout but colour has one
vey important sting to know
about.

Whoops!
Some 8% of males have a colour
deficiency, particularly in
discriminating red and green
This has led to the consideration of
so-called websafe colour palettes
which avoid colours that are
confused

Colour associations
Whenever we use a colour we will
engender a certain feeling or
association in the person viewing it
The most common associations
follow but there are some widely
differing opinions in some of the
assignments

RED
Exciting
Dramatic
Passion
Deep red = posh
Danger
Good luck - China

ORANGE
Energetic
Happy
Sunshine
Informal
Non-corporate
Attention

YELLOW
Visible
Happy
Brash
Imperial
(China)

GREEN
Nature
Soothing
Fertile
Wealth
Stability

BLUE
Space
Intelligence
Corporate
Sad
Reduces
appetite

PURPLE
Royalty
Power
Wealth
70s

WHITE
Clean
Light
Pure
Innocent
Death (Japan
& China)

BLACK
Death
Evil
Power
Elegance
Important

Colour groupings
Colours can be
grouped:
Warm colours
advance and
become the focus
Cool colours
recede and calm backgrounds

Colour Science 101

A colour can be
assigned 3 attributes:
Hue the actual
colour
Saturation the
purity
Value the
lightness

Colour Science 101

Many colours can be replicated by a
mixture of 3 primary colours
The most common primary set is
RED + GREEN + BLUE
But this is not unique and others can
be used
A secondary colour is a mixture of 2
primaries

Colour Science 101

The secondary colours are:
Cyan Magenta Yellow
R+G+B = White when using lights
but this does not work for inks or
pigments where R+G+B=Black
On computer systems each color
component ranges from 0-255

Colour Science 101

This means that we have 24 bit
colour (3 x 8 bit)
However we have only 256 grey
levels (since R=G=B for white)
More grey levels require specialist
hardware

Colour wheel
A great way to view colours is with
the use of a colour wheel
Various versions exist but the one
used here is for the RGB primaries
Note that colours opposite each
other are called complementaries

Example colour palettes

A vast range of potential designs
are possible simply by varying the
colours used
As with the grid it is helpful to do
this within some form of structure
which in this case we call a colour
palette a variety now follow

Colour and usability

Of course colour is also used as part
of the interaction of a page:
Highlighting menus and sections
Isolating a mistake or action
Balancing the design - grouping

Palette tools

Color Stream

Colour palette tools

www.colorschemedesigner.com