1

CPSC 599.28/601.28Colour

Sheelagh Carpendale

References• Colin Ware. (2004) Information Visualization: Perception for

Design. Morgan Kaufmann.• Maureen Stone. (2003) A field guide to digital color. AK Peters• Bernice E. Rogowitz and Lloyd A. Treinish. (1996) How Not to

Lie with Visualization. Computers In Physics 10(3), pp 268-273. http://www.research.ibm.com/dx/proceedings/pravda/truevis.htm

• C. Brewer. (1999) Color use guidelines for data representation. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/ASApaper.html

• Andrew Glassner (1995) Principles of Digital Image Synthesis. Morgan Kaufmann Publishers.

2

Effective Colour

Materials

Aesthetics

Perception

Illustrators, cartographersArtists, designers

A few scientific principles

From: M. Stone

What is Colour?

Physical World Visual System Mental Models

Lights, surfaces, objects

Eye, optic nerve, visual

cortex

Red, green, brown

Bright, light, dark, vivid, colorful, dull

Warm, cool, bold, blah, attractive, ugly,

pleasant, jarring

Perception and Cognition

From: M. Stone

3

Physical World• Spectral Distribution

– Visible light– Power vs. wavelength

• Any source– Direct– Transmitted– Reflected– Refracted

From A Field Guide to Digital Color, © A.K. Peters, 2003

Colour The Retina

photoreceptors: rods and cones

neurons (receptive fields): intermediate neural layers – image processing

http://school.discovery.com/homeworkhelp/worldbook/atozpictures/lr001100.html

http://www.ccrs.nrcan.gc.ca/ccrs/eduref/sradar/chap2/c2p2_g2e.html

4

Cone Response

• Encode spectra as three values– Long, medium and short (LMS)– Trichromacy: only LMS is “seen”– Different spectra can “look the same”

From A Field Guide to Digital Color, © A.K. Peters, 2003

Effects of Retinal Encoding

All spectra that stimulate the same cone responseare indistinguishable

Metameric match

5

Chromaticity Diagram

RGB Chromaticity• R,G,B are points (varying lightness)• Sum of two colors lies on line• Gamut is a triangle

– White/gray/blacknear center

– Saturated colorson edges

6

Display Gamuts

From A Field Guide to Digital Color, © A.K. Peters, 2003

Projector Gamuts

From A Field Guide to Digital Color, © A.K. Peters, 2003

7

Opponent Colour

• Definition– Achromatic axis– R-G and Y-B axis– Separate lightness from chroma channels

• First level encoding– Linear combination of LMS– Before optic nerve– Basis for perception– Defines “color blindness”

Colour Blindness

• Simulates color vision deficiencies– Web service or Photoshop plug-in– Robert Dougherty and Alex Wade

• www.vischeck.com

Deuteranope Protanope Tritanope

8

http://colorvisiontesting.com

normal

protanope

deuteranope

tritanope

Colour Blindness

Genes in Vischeck

9

2D Colour Space

10

Smart Money

small-field tritanopia

Colour Blindness

11

Colour Addition• computer monitors• red, green, and blue • absence all three colors gives black, • all three gives white.

Colour Subtraction• printers ink• cyan, magenta, and yellow • absence all three colors gives white, • all three gives black.

Colour Paint

primary

secondary

tertiary

12

Perceptual Color Spaces

Lightness

Hue

Colorfulness

Unique black and whiteUniform differences

Perception & design

Munsell Atlas

Courtesy Gretag-Macbeth

13

Color Appearance

• colour constancy• colour perception

14

Color Appearance

• More than a single color– Adjacent colors (background)– Viewing environment (surround)

• Appearance effects– Adaptation– Simultaneous contrast– Spatial effects

• Color in contextColor Appearance ModelsColor Appearance Models

Mark FairchildMark Fairchild

surround

background

stimulus

Simultaneous Contrast

• Add Opponent Color– Dark adds light– Red adds green– Blue adds yellow

These samples will have both light/dark and hue contrast

15

Bezold Effect

Spreading

• Spatial frequency– The paint chip

problem– Small text, lines,

glyphs– Image colors

• Adjacent colors blendRedrawn from Foundations of Vision© Brian Wandell, Stanford University

16

What makes colour effective?• “Good ideas executed with superb craft”

—E.R. Tufte

• Effective colour needs a context– Immediate vs. studied– Anyone vs. specialist– Critical vs. contextual– Culture and expectations– Time and money

Why Should You Care?

• Poorly designed colour is confusing– Creates visual clutter– Misdirects attention

• Poor design devalues the information– Visual sophistication– Evolution of document and web design

• “Attractive things work better”—Don Norman