Color in Information

Display
Maureen Stone
StoneSoup Consulting
Effective Color

Aesthetics

Perception

Materials
Illustrators, cartographers
Artists, designers
A few scientific principles
What is Color?

Physical World Visual System Mental Models

Lights, surfaces, Eye, optic Red, green, brown

objects nerve, visual
Bright, light, dark,
cortex
vivid, colorful, dull
Warm, cool, bold,
blah, attractive, ugly,
pleasant, jarring

Perception and Cognition

Color Models
Physical World Visual System Mental Models

Light Cone Opponent Perceptual Appearance

Energy Response Encoding Models Models
Spectral Encode as Separate Color Color in
distribution three values lightness, “Space” Context
functions (L,M,S) chroma
Hue Adaptation
F() CIE (X,Y,Z) (A,R-G,Y-B) lightness Background
saturation Size …
CIELAB CIECAM02
Munsell
(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

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*

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

Effects of Retinal Encoding
All spectra that stimulate the same cone response
are indistinguishable

Metameric match
Color Measurement
CIE Standard Observer
CIE tristimulus values (XYZ)
All spectra that stimulate the same tristimulus
(XYZ) response are indistinguishable

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

Chromaticity Diagram

Project X,Y,Z on a
plane to separate
colorfulness from
brightness
x = X/(X+Y+Z)
y = Y/(X+Y+Z)
z = Z/(X+Y+Z)
1 = x+y+z

XYZ = xyY
RGB Chromaticity
R,G,B are points (varying lightness)
Sum of two colors lies on line
Gamut is a triangle
• White/gray/black
near center
• Saturated colors
on edges
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

Pixels to Intensity
Linear
• I = kp (I = intensity, p = pixel value, k is a scalar)
• Best for computation
Non-linear
• I = kp1/
• Perceptually more uniform
• More efficient to encode as pixels
• Best for encoding and display
 Pixel to Intensity Variation

Intensity Transfer Function (ITF), or “gamma”

Color Models
Physical World Visual System Mental Models

Light Cone Opponent Perceptual Appearance

Energy Response Encoding Models Models
Spectral Encode as Separate Color Color in
distribution three values lightness, “Space” Context
functions (L,M,S) chroma
Hue, Adaptation,
F() CIE (X,Y,Z) (A,R-G,Y-B) lightness Background,
saturation Size, …
Trichromacy CIELAB CIECAM02
Metamerism Munsell
Color matching (HVC)
Color measurement
Opponent Color
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”
Vischeck
Simulates color vision deficiencies
• Web service or Photoshop plug-in
• Robert Dougherty and Alex Wade
www.vischeck.com

Deuteranope Protanope Tritanope

2D Color Space
Similar Colors

protanope deuteranope luminance

Genes in Vischeck
Smart Money
Color Models
Physical World Visual System Mental Models

Light Cone Opponent Perceptual Appearance

Energy Response Encoding Models Models
Spectral Encode as Separate Color Color in
distribution three values lightness, “Space” Context
functions (L,M,S) chroma
Hue, Adaptation,
F() CIE (X,Y,Z) (A,R-G,Y-B) lightness Background,
saturation Size, …
Separate CIELAB CIECAM02
lightness, chroma Munsell
(HVC)
Color blindness
Image encoding
Perceptual Color Spaces
Unique black and white
Uniform differences
Perception & design

Lightness

Colorfulness

Hue
Munsell Atlas

Courtesy Gretag-Macbeth
CIELAB and CIELUV
Lightness (L*) plus two color axis (a*, b*)
Non-linear function of CIE XYZ
Defined for computing color differences (reflective)

CIELUV CIELAB

From Principles of Digital Image Synthesis by Andrew Glassner. SF: Morgan Kaufmann Publishers, Fig. 2.4 & 2.5, Page 63 & 64
© 1995 by Morgan Kaufmann Publishers. Used with permission.
Psuedo-Perceptual Models
HLS, HSV, HSB
NOT perceptual models
Simple renotation of RGB
• View along gray axis
• See a hue hexagon
• L or V is grayscale pixel value
Cannot predict perceived lightness
L vs. Luminance, L*

Corners of the
RGB color cube

Luminance values

L* values

L from HLS
All the same
Lightness Scales
Lightness, brightness, luminance, and L*
• Lightness is relative, brightness absolute
• Absolute intensity is light power
Luminance is perceived intensity
• Luminance varies with wavelength
• Variation defined by luminous efficiency function
• Equivalent to CIE Y
L* is perceptually uniform lightness
Luminance & Intensity
Intensity
• Integral of spectral distribution (power)
Luminance
• Intensity modulated by wavelength sensitivity
• Integral of spectrum  luminous efficiency function

Green and blue lights of equal intensity

have different luminance values
Luminance from RGB
L = rLR+gLG+bLB
Not a fixed equation!
LR,LG,LB
• Maximum luminance of RGB primaries
• Different for different displays
• Affected by brightness & contrast controls
r,g,b
• Relative intensity values (linear)
• Depends on “gamma curve”
• Not pixel values
Color Models
Physical World Visual System Mental Models

Light Cone Opponent Perceptual Appearance

Energy Response Encoding Models Models
Spectral Encode as Separate Color Color in
distribution three values lightness, “Space” Context
functions (L,M,S) chroma
Hue, Adaptation,
F() CIE (X,Y,Z) (A,R-G,Y-B) lightness Background,
saturation Size, …
CIELAB CIECAM02
Munsell
(HVC)

Color differences
“Intuitive” color spaces
Color scales
Color Appearance
Image courtesy of John MCann
Image courtesy of John MCann
Color Appearance
More than a single color
• Adjacent colors (background)
• Viewing environment (surround)
Appearance effects
• Adaptation
surround
• Simultaneous contrast
• Spatial effects
Color in context
stimulus

Color Appearance Models background

Mark Fairchild
Simultaneous Contrast
Add Opponent Color
• Dark adds light
• Red adds green
• Blue adds yellow

These samples will have both

light/dark and hue contrast
Affects Lightness Scale
Bezold Effect
Crispening
Perceived difference depends on background

From Fairchild, Color Appearance Models

Spreading
Spatial frequency
• The paint chip problem
• Small text, lines, glyphs
• Image colors

Adjacent colors blend

Redrawn from Foundations of Vision

© Brian Wandell, Stanford University
Color Models
Physical World Visual System Mental Models

Light Cone Opponent Perceptual Appearance

Energy Response Encoding Models Models
Spectral Encode as Separate Color Color in
distribution three values lightness, “Space” Context
functions (L,M,S) chroma
Hue, Adaptation,
F() CIE (X,Y,Z) (A,R-G,Y-B) lightness Background,
saturation Size, …
CIELAB CIECAM02
Munsell
(HVC) Adaptation
Contrast effects
Image appearance
Complex matching
Effective Color

Aesthetics

Perception

Materials
What makes color effective?
“Good ideas executed with superb craft”
—E.R. Tufte

Effective color needs a context

• Immediate vs. studied
• Anyone vs. specialist
• Critical vs. contextual
• Culture and expectations
• Time and money
Why Should You Care?
Poorly designed color 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
Information Display
Graphical presentation of information
• Charts, graphs, diagrams, maps, illustrations
• Originally hand-crafted, static
• Now computer-generated, dynamic
Color is a key component
• Color labels and groups
• Color scales (colormaps)
• Multi-variate color encoding
• Color shading and textures
• And more…

www.nps.gov
“Color” includes Gray

Maps courtesy of the National Park Service (www.nps.gov)

Color Design
Goals
• Highlight, emphasize
• Create regions, group
• Illustrate depth, shape
• Evoke nature
• Decorate, make beautiful
Color harmony
“…successful color combinations, whether these please the
eye by using analogous colors, or excite the eye with
contrasts.”
–Principles of Color Design, by Wucius Wong
Color Design Terminology
Hue (color wheel)
• Red, yellow, blue (primary)
• Orange, green, purple (secondary)
• Opposites complement (contrast)
• Adjacent are analogous
• Many different color wheels*
*See www.handprint.com for examples

Chroma (saturation)
• Intensity or purity
• Distance from gray

Value (lightness)
• Dark to light
• Applies to all colors, not just gray
Tints and Tones
Tone or shade
• Hue + black
• Decrease saturation
• Decrease lightness
Tint
• Hue + white
• Decrease saturation
• Increase lightness
Gradations
Color Design Principles
Control value (lightness)
• Ensure legibility
• Avoid unwanted emphasis
Use a limited hue palette
• Control color “pop out”
• Define color grouping
• Avoid clutter from too many competing colors
Use neutral backgrounds
• Control impact of color
• Minimize simultaneous contrast
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 label
To measure
To represent or to imitate reality
To enliven or decorate
To Label
Identify by Color

Information Visualization
Colin Ware
Product Categories

Created by Tableau - Visual Analysis for DatabasesTM

Grouping, Highlighting
Considerations for Labels
How critical is the color encoding?
• Unique specification or is it a “hint”?
• Quick response, or time for inspection?
• Is there a legend, or need it be memorized?
Contextual issues
• Are there established semantics?
• Grouping or ordering relationships?
• Surrounding shapes and colors?
Shape and structural issues
• How big are the objects?
• How many objects, and could they overlap?
• Need they be readable, or only visible?
Controls and Alerts
Aircraft cockpit design
• Quick response
• Critical information and conditions
• Memorized
• 5-7 unique colors, easily distinguishable
Highway signs
• Quick response
• Critical but redundant information
• 10-15 colors?
Typical color desktop
• Aid to search
• Redundant information
• Personal and decorative
• How many colors?
Psychophysics of Labeling
Preattentive, “pop out”

13579345978274055 13579345978274055 13579345978274055

24937916478254137 24937916478254137 24937916478254137
23876597277103866 23876597277103866 23876597277103866
19874367259047362 19874367259047362 19874367259047362
95637283649105676 95637283649105676 95637283649105676
32543787954836754 32543787954836754 32543787954836754
56840378465485690 56840378465785690 56840378465785690
Time proportional to Time proportional to Both 3’s and 7’s
the number of digits the number of 7’s “Pop out”
Contrast Creates Pop-out

Hue and lightness Lightness only

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
Radio Spectrum Map (33 colors)

http://www.cybergeography.org/atlas/us_spectrum_map.pdf
Distinguishable on Inspection
Tableau Color Example
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
Tableau Colors

www.tableausoftware.com
Maximum hue separation
Analogous, yet distinct
Sequential
Color Names
Basic names (Berlin & Kay) black
• Linguistic study of names white
gray
• Similar names Perceptual
• Similar evolution primaries red
green
• Many different languages
blue
yellow
orange
purple
brown
Distinct colors = distinct names? pink
Distinct, but hard to name
Color Names Research
Selection by name
• Berk, Brownston & Kaufman, 1982
• Meier, et. al. 2003
Image recoloring
• Saito, et. al.
Labels in visualization
• D’Zmura, Cowan (pop out conditions)
• Healey & Booth (automatic selection)
Web experiment
• Moroney, et. al. 2003
World Color Survey (Kay & Cook)
• http://www.icsi.berkeley.edu/wcs/
To Measure
Data to Color
Types of data values
• Nominal, ordinal, numeric
• Qualitative, sequential, diverging
Types of color scales
• Hue scale
– Nominal (labels)
– Cyclic (learned order)
• Lightness or saturation scales
– Ordered scales
– Lightness best for high frequency
– More = darker (or more saturated)
– Most accurate if quantized
Color Scales
Long history in graphics and visualization
• Ware, Robertson et. al
• Levkowitz et. al
• Rheingans
PRAVDA Color
• Rogowitz and Treinish
• IBM Research
Cartography
• Cynthia Brewer
• ColorBrewer
Different Scales

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

Density Map

Lightness scale

Lightness scale
with hue and
chroma variation
Hue scale with
lightness variation
Phase Diagrams (hue scale)
Singularities occur where all colors meet

The optical singularities of bianisotropic crystals, by M. V. Berry

Phases of the Tides

Figure 1.9. Cotidal chart. Tide phases relative to Greenwich are plotted for all the
world’s oceans. Phase progresses from red to orange to yellow to green to blue to
purple. The lines converge on anphidromic points, singularities on the earth’s
surface where there is no defined tide. [Winfree, 1987 #1195 , p. 17].
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”
Thematic Maps
US Census Map

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

Brewer’s Categories

Cynthia Brewer, Pennsylvania State University

Color Brewer

www.colorbrewer.org
Tableau Color Example
Color scales for encoding data
• Displayed as charts and graphs
• Quantized or continuous
Issues
• Color ramps based on Brewer’s principles
• Not single hue/chroma varying in lightness
• Create a ramp of the “same color”
• Legible different than distinguishable
• Center, balance of diverging ramps
Heat Map (default ramp)
Skewed Data

Slightly negative

www.tableausoftware.com
Full Range
Skewed Data

www.tableausoftware.com
Stepped
Skewed Data

www.tableausoftware.com
Threshold
Skewed Data

www.tableausoftware.com
Color and Shading
Shape is defined by lightness (shading)
“Color” (hue, saturation) labels

CT image (defines shape) PET color highlights tumor

Image courtesy of Siemens

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

Victoria Interrante and Chester Grosch, U. Minnesota

http://www-users.cs.umn.edu/~interran/3Dflow.html
Multivariate Color Sequences
Multi-dimensional Scatter plot

Variable 1, 2  X, Y
Variable 3, 4, 5  R, G, B

Using Color Dimensions to

Do people interpret color blends as Display Data Dimensions
sums of variables? Beatty and Ware
Color Weaves
6 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
Brewer System

http://www.colorbrewer.org
Brewer Examples
To Represent or
Imitate Reality
Illustrative Color

Gray’s Anatomy of the Human Body Map of Point Reyes

www.bartleby.com/107/illus520.html www.nps.gov
ThemeView (original)

Courtesy of Pacific Northwest National Laboratories

ThemeScape (commercial)

Courtesy of Cartia
To Enliven or Decorate
 Which has more information?
Which would you rather look at?

Visualization of isoelectron density

surfaces around molecules
Marc Levoy (1988)
More Tufte Principles
Limit the use of bright colors
• Small bright areas, dull backgrounds
Use the colors found in nature
• Familiar, naturally harmonious
Use grayed colors for backgrounds
• Quiet, versatile
Create color unity
• Repeat, mingle, interweave
Controlling Value
Get it right in black & white
Value
• Perceived lightness/darkness
• Controlling value primary rule for design
Value defines shape
• No edge without lightness difference
• No shading without lightness variation
Value difference (contrast)
• Defines legibility
• Controls attention
• Creates layering
Controls Legibility

colorusage.arc.nasa.gov
Legibility

Drop Shadows
Drop Shadow
Drop shadow adds edge Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on black
Primary colors on white Primary colors on black
Primary colors on white Primary colors on black
Primary colors on white
Primary colors on white
Primary colors on white
Primary colors on white
Readability
If you can’t use color wisely,
it is best to avoid it entirely
Above all, do no harm

If you can’t use color wisely,

it is best to avoid it entirely
Above all, do no harm.
Why does the logo work?
Value Control
Legibility and Contrast
Legibility
• Function of contrast and spatial frequency
• “Psychophysics of Reading” Legge, et. al.
Legibility standards
• 5:1 contrast for legibility (ISO standard)
• 3:1 minimum legibility
• 10:1 recommended for small text
How do we specify contrast?
• Ratios of foreground to background luminance
• Different specifications for different patterns
Contrast and Layering
Value contrast creates layering

Urgent Urgent Urgent

Context Context Context
Normal Normal Normal

Normal Normal Normal

Context Context Context

colorusage.arc.nasa.gov
What Defines Layering?
Perceptual features
• Contrast (especially lightness) Emergency
• Color, shape and texture
Emergency
Task and attention
• Attention affects perception Emergency
Display characteristics
• Brightness, contrast, “gamma”
Contrast
General formulation
• Luminance difference (Lf , Lb)
• Depends on adaptation and size
Small symbols, solid background (Weber)
• C = (Lf –Lb)/Lb
• Adapted to background
Textures, high frequency patterns (Michelson)
• C = (Lf –Lb)/(Lf +Lb)
• Adapted to average

Luminance is intensity
modulated by wavelength sensitivity
Contrast (continued)
Contrast using L* L* is the same as Munsell Value,
computed as a function of L
• 1 is ideally visible
• 10 is easily visible
• 20 is legible for text
Reasons to use a light background
• More like a reflective surface
• Contrast metrics are more accurate
• Easier to look at in mixed environment
Dark background better for dark environments
Grid Example

Grid sits unobtrusively in the background Grid sits in foreground, obscuring map

Great Grids: How and Why? (APGV06 and SIGGRAPH poster)

Maureen Stone, Lyn Bartram and Diane Gromala
Additional Resources

My website
• http://www.stonesc.com/Vis06
• Final copy of slides, references
A Field Guide to Digital Color
• A.K. Peters