What creates good color design? - UW Courses Web ServerPhysical World Visual System Mental Models Lights, surfaces, objects Eye, optic nerve, visual cortex ... Cone Response Encode

Info424, UW iSchool 11/13/2007

Maureen Stone, StoneSoup Consulting 1

“What about this wheel thingy? It sounds a terribly interesting project.”

“Ah,” said the marketing girl, “well, we're having a little difficulty there.”

“Difficulty?” exclaimed Ford. “Difficulty? What do you mean, difficulty? It's the single simplest machine in the entire Universe!”

The marketing girl soured him with a look. "All right Mr. Wise guy," she said, “you're so clever, you tell us what color it should be.”

Douglas Adams, The Restaurant at the End of the Universe

Color

Envisioning Information (ch 5)Stone, Expert Color Choices

Today’s lecture

Creating color Perceiving colorMeasuring color

• CIE XYZ, xyY, CIELAB

Practicum• Color measurement demo

Tufte’s principles appliedDesigning for CVD or “color blindness”

What creates good color design?

“Good ideas executed with superb craft”—E.R. Tufte, Envisioning Information

Materials

Aesthetics

Perception



Materials: Pigments & Paints

Scattered light

The Bright Earth, Philip Ball

Materials: Dyes

Organic molecules• Biological origin (snails, bugs,

plants, etc.)• Synthetic (William Perkin)• Dyed pigments are “lakes”

Mauve, Simon Garfield

Print & Film

Layered color• CMY primaries • Film: dye layers• Print: Halftone patterns• Black for contrast

Light

Summed spectra• RGB primaries• Displays, projectors• Basis for digital color

CRT DisplayLCD Display

Perception

Materials

Aesthetics

Perception

Physical World Visual System Mental Models

Lights, surfaces, objects

Eye, optic nerve, visual

cortex

Red, green, brown

Apple, leaf, bark

Stop, go, state park

Warm, cool, neutral

Attractive, ugly, blah

Powerful, nurturing, …

Materials Perception Aesthetics

Color design




Opponent Encoding

Separate lightness, chroma

(A,R-G,Y-B)

LightEnergy

Spectral distribution functions

F(λ)

ConeResponse

Encode as three values

(L,M,S)

CIE (X,Y,Z)

Appearance Models

Color in Context

Adaptation,Background,

Size, …

CIECAM02

Perceptual Models

Color “Space”

Hue, lightnesssaturation

CIELABMunsell(HVC)

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

Visual System

Light path• Cornea, pupil, lens, retina• Optic nerve, brain

Retinal cells• Rods and cones• Unevenly distributed

Cones• Three “color receptors”• Concentrated in fovea

Inside the eye: Mayo Clinic

Simulation by Mark Fairchild

Cone Response

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

Sort of like a digital camera*


Color Exploratory

Metamerism

All spectra that stimulate the same cone responseare indistinguishable

Metameric match

CIE Color MeasurementCIE Standard ObserverCIE tristimulus values (XYZ)International standard for specifying color


All spectra that create the same tristimulus (XYZ) values “look the same”



CIE XYZ from Displays

For any RGB• Y = rYR+gYG+bYB

• YR YG YB = Maximum luminanceof the display red, green, blue

• r,g,b are linear pixel values• Similarly for X and Z

Can be expressed as a matrix

Pixel value

lum

inan

ce

CIE Chromaticity DiagramSeparate

• Colorfulness (x,y)• Brightness (Y)

XYZ = xyYProject XYZ on a plane

x = X/(X+Y+Z)y = Y/(X+Y+Z)z = Z/(X+Y+Z)1 = x+y+z

Colors that vary only in brightness project to the same pointSpectra that “look the same” project to the same point

Display gamuts create a triangle

Display Gamuts


Projector Gamuts


Pixel to Luminance Mapping(“gamma curve”)

Same image, different mappings



Color Models


Opponent Encoding


(A,R-G,Y-B)

LightEnergy


F(λ)

ConeResponse


(L,M,S)

CIE (X,Y,Z)

Appearance Models

Color in Context


Size, …

CIECAM02

Perceptual Models

Color “Space”


CIELABMunsell(HVC)

TrichromacyMetamerism

Color matchingColor measurement

Opponent Color

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

VA-Lab U Calgary

Support for Opponent Color

Unique hues—No reddish-green

Afterimages• Red-green• Blue-yellow

Color vision deficiencies• Red-green anomalies *• Blue-yellow anomalies


Opponent Encoding


(A,R-G,Y-B)

LightEnergy


F(λ)

ConeResponse


(L,M,S)

CIE (X,Y,Z)

Appearance Models

Color in Context


Size, …

CIECAM02

Perceptual Models

Color “Space”


CIELABMunsell(HVC)


After images

Color blindness

Perceptual Color Spaces

Lightness

Hue

Colorfulness

Unique black and whiteUniform differences

Perception & design

CIELAB

Lightness (L*) plus two color axis (a*, b*)Non-linear function of CIE XYZ∆E defined for computing color differences



Color Models


Opponent Encoding


(A,R-G,Y-B)

LightEnergy


F(λ)

ConeResponse


(L,M,S)

CIE (X,Y,Z)

Appearance Models

Color in Context


Size, …

CIECAM02

Perceptual Models

Color “Space”


CIELABMunsell(HVC)

“Intuitive” colorColor differences

Color design

The Magic Number 3

Trichromacy & Metamerism• Three cones (color receptors)• Encode any color as 3 numbers• Color representation & measurement

Opponent & perceptual color• Lightness (luminance) + 2 chroma• L* a* b*• Hue, saturation, value

Color reproduction• Mix 3 “primary colors” (e.g. R,G,B)• Match subset of all colors (gamut)

Color Appearance

yellow

Beyond three values

Demo

Aesthetics

Materials

Aesthetics

Perception

“Good painting, good coloring, is comparable to good cooking. Even a good cooking recipe demands tasting and repeated tasting while it is being followed. And the best tasting still depends on a cook with taste.”

—Josef Albers



Effective Color Design

Use color for a purpose• Identify your information & messages• Identify its function• Assign relative importance• Map colors accordingly

Design using contrast & analogy• Contrast emphasizes• Analogy groups• Legibility, attention & layering

Design, test, evaluatePractice, practice, practice

Envisioning Information

“… avoiding catastrophe becomes the first principle in bringing color to information:Above all, do no harm.”

—E. R. Tufte

www.edwardtufte.com

Fundamental Uses

To labelTo measureTo represent or to imitate realityTo enliven or decorate

Color and Function

To label• Primarily hue variation• Associated with color names

To measure• Vary lightness & chroma• Map to data distribution• Color scales, ramps, maps

Color and Function

To evoke nature• Metaphor, symbolic• Illustration: distilled experience

Color and Function

To decorate, beautify• Emotional design• Visceral & reflective



Contrast and Analogy

Hue, chroma, value Value only

Contrast & Analogy• Contrast (difference) separates• Analogy (similarity) groups

Get it right in black & white

Value defines shape• No edge without lightness difference• No shading without lightness variation

Value difference (contrast)• Defines legibility• Controls attention• Creates layering

Creates robustness• Across viewers• Across media

In brief“Get it right in black & white”Use neutral backgrounds

• Grays or near gray• RGB all nearly equal• Prefer light backgrounds

Avoid overly saturated colors• RGB: No values are zero• Exception: yellow

Use hue contrast sparingly• Small differences are fine• If many hues, then use

similar value, saturation

To Label

Identify by Color

Created by Tableau - Visual Analysis for DatabasesTM

Cluster Calendar

Jarke van Wijk, Edward van Selow Cluster and Calendar based Visualization of Time Series Data



Grouping, Highlighting Psychophysics of Labeling

13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465485690

Time proportional to the number of digits

13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690

Time proportional to the number of 7’s

13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690

Both 3’s and 7’s“Pop out”

Preattentive, “pop out”

Pop-out vs. Distinguishable

Pop-out• Typically, 5-6 distinct values simultaneously• Up to 9 under controlled conditions

Distinguishable• 20 easily for reasonable sized stimuli• More if in a controlled context• Usually need a legend

Color Names

Basic names (Berlin & Kay)• Linguistic study of names across 20 languages• Found 11 basic names, similar linguistic evolution

– Black, white, gray– Red, green, blue, yellow– Orange, purple, brown, pink

Controversy about original hypothesisRecent work by Kay et. al.

• Redefines as constraints, modulated by language• World Color Survey

Recommended by Colin Ware for labels

World Color SurveyWCS Database

• 330 Munsell chips• 24 native speakers of 110 languages • Asked to name each chip

http://www.icsi.berkeley.edu/wcs/

“grue”

Ber

inm

oEnglis

h

Lang

uage

, thou

ght a

nd co

lor: r

ecen

t dev

elopm

ents.

Paul

Kay a

nd T

erry

Regie

r.



Tableau Color Example

Categorical color palettes• How many? Algorithmic?• Basic colors (regular and pastel)• Extensible? Customizable?

Color appearance• As a function of size• As a function of background

Robust and reliable color names

Color “Sketches”

Categorical Colors

10 basic colors• Simple names• Increase number with

lightness variation

Designed to balance• Legibly colored dots, lines

and text• But not too gaudy for bars• Tasteful, yet colorful

Tableau names

Basic names (11)• Black, white, gray• Red, green, blue, yellow• Orange, purple, brown,

pink

Tableau names (10)• Minus black & white• Plus teal• Yellow => gold

Palette-based UI

1. Select whole palettes2. Individual colors from different palettes3. Standard color picker



Many, many RGB/HSV/HSL Color Tools

eyedroppereyedropper

To Measure

Data to Color

Types of data values• Nominal, ordinal, numeric• Qualitative, sequential, diverging

Color scale depends on data type• Nominal like labeling (hue)• Numeric scales need an order (saturation, brightness)• Only approximate; best if quantized

Long history in Vis research, cartography

Different Scales, Different Views

Rogowitz & Treinish, “How not to lie with visualization”

Density Map

Lightness scale

Lightness scalewith hue and

chroma variationHue scale with

lightness variation

Usually a bad idea

Brewer Scales

Nominal scales• Distinct hues, but similar emphasis

Sequential scale• Vary in lightness and saturation• Vary slightly in hue

Diverging scale• Complementary sequential scales• Neutral at “zero”



Color Brewer

www.colorbrewer.org

Tableau Color Example

Color sequences• What colors, what sequences?• Continuous or quantized? (and how?)• Work at all sizes, and in isolation

Real numeric data• All distributions, including outliers• Can’t visualize the histogram• Much harder than colorizing an image

UI to encourage good practice• UI must be simple, not intimidating• Users not expert in color or statistics

Ramp Design

Start with Brewer ramps• Available as RGB• Not calibrated

Modify• For sRGB• Eliminate darkest colors• Reduce hue shift

Interpolate• Custom Python code• CIELAB, RGB• Piecewise linear

From ColorBrewer

Sequential Ramps

Diverging Ramps Data Distribution

Mapping Census 2000: The Geography of U.S. Diversity



Heat Map (default ramp)

Skewed Data

www.tableausoftware.com

Slightly negative

Full Range

Skewed Data


Stepped

Skewed Data


Threshold

Skewed Data


Quantitative UI

StoneSoup Consulting, 2005



Multivariate Color Sequences

Multi-dimensional Scatter plot

Variable 1, 2 → X, YVariable 3, 4, 5 → R, G, B

Using Color Dimensions to Display Data Dimensions

Beatty and Ware

Color Weaves6 variables = 6 hues, which vary in brightness

Additive mixture (blend) Spatial texture (weave)

Weaving versus Blending (APGV06 and SIGGRAPH poster)Haleh Hagh-Shenas, Victoria Interrante, Christopher Healey and Sunghee Kim

How well does it work?

Brewer color scheme

From The Economist

MultispectralColor Imaging

http://hubblesite.org/sci.d.tech/behind_the_pictures/

Color and Shading

Shape is defined by lightness (shading)“Color” (hue, saturation) labels

Image courtesy of Siemens

CT image (defines shape) PET color highlights tumor



Color Overlay (Temperature)3D line integral convolution to visualize 3D flow (LIC).Color varies from red to yellow with increasing temperature

http://www-users.cs.umn.edu/~interran/3Dflow.html

Victoria Interrante and Chester Grosch, U. Minnesota

To Represent orImitate Reality

Illustrative Color

www.bartleby.com/107/illus520.htmlGray’s Anatomy of the Human Body Map of Point Reyes

www.nps.gov

To Enliven or Decorate

Visualization of isoelectron density surfaces around molecules

Marc Levoy (1988)

Which has more information?Which would you rather look at?

Color Vision Deficiencies (CVD)

Non-standard cone (SML) response• Genetic• Medical• Mild to missing

Three modes• L-weak (protanope)• M-weak (deuteranope)• S-weak (tritanope)

Modeled in opponent space• Achromatic axis• R-G and Y-B axis



Incidence of CVD

Monochromacy - 0.003%Dichromacy

• Protanopia 1%• Deuteranopia 1.1%• Tritanopia 0.002%

Anomalous trichromacy• Protanomaly 1%• Deuteranomaly 4.9%• Tritanomaly -

Total - 8.005%

R. W. G. Hunt. Measuring Colour. Fountain Press,1998.

Vischeck

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

Deuteranope Protanope Tritanope

vischeck.com

Smart Money iPhone

Double encode: Shapes or textures

www.iloveux.com



Similar colors are the real problem

protanope deuteranope luminance

Accommodation

No color set that works for all viewersEven accommodating most common is limiting

Options:• Minimize dependency on color• Double encode• Provide choices/customization

STOP

Documents

What creates good color design? - UW Courses Web ServerPhysical World Visual System Mental Models Lights, surfaces, objects Eye, optic nerve, visual cortex ... Cone Response Encode