Web Design Color Theory

IMD09117 and IMD09118 Web Design
and Development Unit 8
Colour

Names of colour
Version A Unit 8 ©2008 Napier University
Names of colours enter the language
slowly
We can differentiate millions of shades
Names for about thirty colours
Colours tend to be acquired in a
sequence

Names of colour
All languages have black and white

Names of colour
Next colour acquired is red

Names of colour
The next two are green and yellow

Names of colour
The next is blue

Names of colour
The next is blue
The next is brown

Names of colour
The next is blue
The next is brown
The next four are purple, pink,orange
and grey

Names of colour
There are cultural differences
An African tribe has 6 reds and no green
Highland Scots have one word for green
and blue
Italian 3 blue, French 2 brown
Inuit 7 white no brown
New Guinea tribe only black and white

Characteristics of colour
Primary colours - red, yellow and blue
Secondary colours - green, orange and
violet
Tertiary colours - primary and adjacent
secondary
12 colours making a colour wheel

Complementary or contrasting colours -
opposite on the colour wheel
Compete - active and energetic
Hard to look at for long periods of time
Can create balance
Can be used to highlight areas of screen

Use of contrasting colours is popular in
websites
http://www.costaricanrentals.com/

Harmonious or analogous colours lie
near each other on colour wheel
Pleasing and tranquil
Adding more colours nearby can add
more complexity
http://www.lukew.com/kdtu/
http://www.metisassoc.com/main/index.htm
http://newark1.com/castlepoint1/

Monotones use a single neutral colour
such as grey or beige in varying tints and
shades.
Tints add white, shades add black
http://www.thewhitecompany.com/

Monochromatic schemes use one colour
Hard to create interest
http://www.linkdup.com/
http://www.bbc.co.uk/science/humanbody/mind/
http://www.worqx.com/color/palette.htm
http://www.colorschemer.com/

Perceiving colour
Retina made up of rods and cones
Rods are light sensitive
Cones (blue, green, red) see colour
Colour difference green and red then
between yellow and blue then all three
for luminescence

Perceiving colour

Perceiving colour
Looks at colours in relation to their
background

Perceiving colour
http://members.lycos.nl/amazingart/E/32.html

Perceiving colour
The eye detects edges- boundaries
between light and dark
Dark characters light background good
Colour blindness 8% of men and 1% of
women
So don’t make colour sole source of info

Perceiving colour
Can you read this text easily?

Colour meanings
Red
Orange
Yellow
Green
Blue

Colour meanings
Violet
Black
White
Neutral
http://www.mariaclaudiacortes.com/colors/Colors.html

Colour meanings
calming – activating
masculine – feminine
simple – luxurious
cosy – technical
functional – romantic

Colour meanings
static – dynamic
spartan – extravagant
formal – playful
cool – warm
carefree - sincere

Colour temperatures
Cool colours: blue, green and violet
Blue the coolest
Recede and contemplative
Good for background

Colour temperatures
Warm colours: red, orange and yellow
Orange the warmest
Active, dynamic and tend to advance
Preferred by children
http://www.boxingforfitness.com.au/
http://www.poplabs.com/
http://www.eeleen.com/

Colour temperatures
Violet and green can appear warm or
cool depending on what they are next to
Most interfaces are cool-coloured
Warm colours can cause congestion
Warm colours for navigation systems

Colour associations
Market research on washing powder
Colour meanings
Hotel chain
Different cultures
http://joehallock.com/edu/COM498/associations.html

Colour associations
The Mexican Cage, Mona Hatoum, 2002. The friendly colours of the cage work in
contrast with the unfriendly nature of the cage.

Colour in the interface
Think about contrasting or harmonious
Pick dominant colour
Limited colour palette adds sophistication
and organisation
Use accents and colour themes

Depth cueing and layering
http://webexhibits.org/colorart/contrast.html

Colour contrasts
Pure colour contrast
Warm-cold contrast

Colour contrasts
Simultaneous contrast
Quantity contrast

Colour contrasts
Light-dark contrast
Complementary contrast

Colour contrasts
Quality contrast

Colour contrasts
Enough contrast between text and
foreground
Avoid overcontrast

Colour contrasts
Red and blue not good
40% operators suffer eyestrain
Colour changes to represent status
changes
Slower reading from screen colour, font
and resolution all effect this

Summary
Names of colours enter the language
slowly in a strict sequence but with
cultural differences.
The colour wheel contains primary,
secondary and tertiary colours.
Complementary colours are on the
opposite sides whilst harmonious are
close together.

Summary
Mono colour schemes are based on
tints and shades of one colour only.
The eye uses rods and cones to
perceive colour. Defective cones can
cause colour blindness.
Colours have emotions and
associations that are personal, cultural
and deep-rooted. Colours can be warm
or cool.

Summary
There should be a dominant colour in
your interface design. Layering can be
used for depth-cueing. Contrast should
be enough but not excessive.
Colour contrasts can be by: pure
colour, warm-cold, simultaneous,
quantity, light-dark, complementary or
quality

Web Design Color Theory

Recommandé

Recommandé

Contenu connexe

Plus de Graeme Smith

Plus de Graeme Smith (20)

Dernier

Dernier (20)

Web Design Color Theory