cool warm white/blue light: cool/calm yellow/red light: - - PowerPoint PPT Presentation

• personal and cultural associations affect our experience of color → patterns established over time
• long-held association are often though not always universal
• cool colours (blue/green) associated with: water/sky/forest
• warm colours (yellow/red) associated with: heat of sun/fire

• yellow/red light: vibrant/stimulating
• can portray warmth as well as

danger and risk

• high arousal colours, especially

when used in saturated shades

• perceived to be closer to the viewer =

enhances perception of perspective

• white/blue light: cool/calm
• can portray tranquility
• low arousal colours, especially

when used in pastel shades

• perceived to be further away from

viewer = enhances perception of perspective

cool warm

chromodynamics

• colour affects both body and mind:
• red is known for being able to stimulate sense and raise blood pressure
• blue is known for having the opposite effect, being calming for both body and mind
• generalisation cannot be made as hue and saturation of colour will affect the effect:
• soft blues tend to be seen as calm and are associated with tranquility
• vibrant blues/turquoises can be associated with lush tropical settings and therefore more stimulating and exciting in comparison
• generally, perception relies more on previous experiences than the actual experience of seeing the colour

• associations:

fire / blood / energy / war / danger / passion / desire / love

• strong impact colour

with high visibility

• expression of

urgency / alert / error

RED

• associations:

sunshine / joy / health / enthusiasm / happiness/ creativity

• strong impact colour

with high visibility

• expression of

strength / endurance

ORANGE

• associations:

sunshine / joy / happiness / intellect / energy / caution / jealousy

• effect depending in

additional colours

• expression of pleasant

and cheerful emotion, used for highlights; if overused or in dull shades - can become unappealing

YELLOW

• associations:

nature / growth / hope / harmony / safety / fertility / money

• calm impact,

suggesting experience

• expression of restful

and calm emotions; also used for eco / green products

GREEN

• associations:

sky / water / depth / loyalty / trust / truth / intelligence / wisdom

• calm and tranquil

impact

• expression of depth,

expertise and stability

BLUE

• associations:

royalty / luxury / ambition / nobility / creativity / mystery

• impact varies with

hues

• expression of

nostalgia / romance

PURPLE

• of course, colour dynamics are much more

nuanced and complex than basic colour theory

• light, combination and context combine for

final expression and message

• cultural traditions and interpretations

influence user perception

• colour is very subjective, influenced by personal experience
• cultural traditions affect interpretations - as do shade and combination
• context affects expression and interpretations of colours presented

• colour meanings and interpretations

evolve all the time ~ some remain constant, while new associations develop

• colour associations are getting more

complex, relating to traditional understanding as well as new technical developments

• while meanings and interpretations change - certain constants will remain, especially if culturally rooted
• growing complexity of associations of colours to subjects/concepts/emotions through media overload,

• digital interfaces introduced entirely new functions and interactions - alongside common patterns of colours codes,

In traditional colour theory, these are the 3 pigment colours which can not be mixed or formed by any combination

• f other colours.

All other colours are derived from these 3 hues.

yellow red blue

• range purple green

These are the colours created by mixing the primary colours. yellow-orange red-orange red-purple blue-purple blue-green yellow-green These are the colours created by mixing the secondary colours.

• basic colour definitions

colour combinations

• in nature / life — colour varies depending on whether object is viewed incandescent, florescent or natural sunlight

• in print — full control over output via paper type, printer and ink

• on screen — effects of colour can be enhanced, deteriorated or subdued due to backlight displays

• colour schemes need to be designed with consideration of effect of combined colours
• careful selection for optimum legibility and accessibility
• classic “ NO GO “ : green/blue and red

✔

• combination of green/blue with red
• colours on opposite side of spectrum, especially at full chroma,

• green and blue are ajacent and more harmonious, less extreme pulsating effect

An explanation of colorblindness

An explanation of colorblindness is a post on The Hickensian photo courtesy of David Shrigley

• photo to illustrate colour blindness, via post on The Hickensian

colour scheme

combination of tones and shades within the same colour / hue

• colour scheme created within the range of single hue
• expression: calm
• variation achieved through difference in colour intensity/saturation, shade and tone/chroma

• warm and harmonious colour scheme
• high contrast with white, used for main text elements
• branded elements using darker chromatic shades, dominant warm yellow used for CTA and info

• colour scheme extracted via bookmarklet from http://wearepandr.com/labs/colour_bookmark
• limited colours and shades for design with addition of accent colour (white/pale blue/green)

colour scheme

combination of adjacent colours

• combination of colours near each other on colour spectrum
• expression: harmony
• similar to monochromatic colour scheme but with additional shades, for a more nuanced colour scheme

• expanded analogous colour scheme
• harmonious and vibrant impact

• colour scheme extracted via bookmarklet from http://wearepandr.com/labs/colour_bookmark
• colour range selected uses adjacent colours for impact and harmony

colour scheme

combination of 2 colours from opposite sides of the colour spectrum combination of 4 colours (each pair adjacent to each other) from opposite sides of the colour spectrum

• combination of colours near each other on colour spectrum
• expression: harmony
• similar to monochromatic colour scheme but with additional shades, for a more nuanced colour scheme

• expanded complementary colour scheme
• main 2 colours used for CTA and interaction

• purple as dominant colour within colour scheme, varying into blues
• variations of shades with addition of red accent

colour scheme

combination of 3 colours evenly spaced around the colour wheel

• combination of 3 colours - spots on colour circle form even sided triangle
• expression: vibrance / memorability

• colour scheme of 3 colours combined, with varying shades spanning into adjacent colours
• subdued / desaturated tones, complemented by natural colours for warm and friendly feel

• natural tones for all background for soft feel
• accentuatued by mutiple colours

colour scheme

combination of colours,

• ften 2 groups of similar hues,

chosen specifically from the colour spectrum

• combination of colours specifically chosen, usually 2-3 groups of selected tones
• expression:

• colour scheme of 2 main colours (dark pink & teal) combined with natural cream and soft greys
• subdued / desaturated tones with the natural tones convey a friendly and elegant image

• colours used as suited to content:

• text colour in strong contrast with backgorund colour
• > contributes to overall impression
• > remain user-friendly and accessible with good legibility

• colour scheme of multiple colours in vibrant combinations
• dark grey with suitable chroma creates impact and impression
• colour chosen within set hues

• colour scheme varies - using complementary as well as triadic and compound approaches
• page elements grouped with custom colours

• colour scheme of multiple colours in soft shaded combinations
• warm grey allows soft colours to stand out

• colour scheme of multiple colours in soft shaded combinations
• warm grey allows soft colours to stand out

• effect and interpretation of colour emphasized
• r changed by values
• good colour schemes combine carefully

selected colours by shade, tone and brightness for maximum impact

• screen display will influence decisions due to

nature of light used

• pure colour value
• colour value changed towards shade of grey,

affecting chroma

• colour value changed by addition of black/white

• consider desired effect and select carefully
• colour combination for overall colour scheme needs to show sufficient contrast for clarity
• saturation and brightness will influence effect of chosen colours

saturation brightness hue

• colour pickers in graphics apps allow for fine selection of any shade
• adjustments made via colour picker, edited via adjustments

colours in code

caniuse.com

• before going into production - consider browser compatibility

colours in code

color: #FFB000; color: rgb(255,176,0);

HEX: RGB: ! NOTE: HSB != HSV || HSL

cannot be used in code

• for coding, check compatibility first:

• lder browser primarily HEX + RGB (only)
• app colour pickers by default do not show correct values for HSL

colours in code

COLORS by mattpatenaude.com HSL COLOR PICKER by Brandon Mathis hslpicker.com

Chris Coyier - HSLa Explorer

css-tricks.com/examples/HSLaExplorer

image credits:

• photo: RED : vulcano - via theatlanctic.com
• photo: ORANGE : pumkin on leaves, by pink sherbert on Flickr
• photo: YELLOW : autumn leaves, via Flickr
• photo: GREEN : Photomicrography, via The Big Picture (Boston.com)
• photo: BLUE : waves, by somebody_, via Flickr
• photo: PURPLE : flower close up, by cobalt123 via Flickr
• photo: colour splash, via theinspirationgrid.com
• photo: coloured plastic, via Frank Chimero on gimmebar.com
• photo: “image the green is red” by David Shrigley, via “An explanation of colorblindness” by Jon Hicks
• Life, magazine illustration by Coles Phillips, 1927

site references

• An explanation of colour blindness, Jon Hicks
• colour bookmarklet - wearepandr.com/labs/colour_bookmark
• Symbolicons - symbolicons.com
• Adaptd - adaptd.com
• Kaleidoscope App - kaleidoscopeapp.com
• Gift Rocket - giftrocket.com
• You Know Who Design, Sarah Parmenter - youknowwhodesign.com
• duoh! - duoh.com
• Veerle’s blog - veerle.duoh.com

Prisca Schmarsow

prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea