Hue, chroma, saturation, colorfulness lightness, brightness
Hue, chroma, saturation, colorfulness lightness, brightness
Hue, chroma, saturation, colorfulness lightness, brightness
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Colour + Perception<br />
CMPT 467/767<br />
Visualization<br />
Torsten Möller<br />
© Pfister/Möller
Recommended Reading<br />
© Pfister/Möller<br />
http://www.stonesc.com/<br />
2
Where / What<br />
© Pfister/Möller<br />
3<br />
Based on slide from Mazur
Contours & Texture<br />
C. Ware, “Visual Thinking for Design”
Gestalt Principles<br />
© Pfister/Möller<br />
5
Color
Hunters
Gatherers
“… avoiding catastrophe becomes<br />
the first principle in bringing color<br />
to information: Above all, do no<br />
harm.”<br />
© Pfister/Möller<br />
E. R. Tufte<br />
Tufte, “Envisioning Information”
Physics
Newton, 1666<br />
© Pfister/Möller<br />
11
Spectrum of Light<br />
© Pfister/Möller<br />
12
What are the primary colors?<br />
1)Red, Green, Blue<br />
2)Red, Yellow, Blue<br />
3)Orange, Green, Violet<br />
4)Cyan, Magenta, Yellow<br />
5)All of the above<br />
© Pfister/Möller<br />
14
Additive System (RGB)<br />
Blue<br />
Cyan<br />
Magenta<br />
Green<br />
Green<br />
Red<br />
Yellow
Subtractive System (CMYK)<br />
Cyan<br />
Blue<br />
Green<br />
Key<br />
(Black)<br />
Magenta<br />
Green<br />
Red<br />
Yellow
Visual System
Visual System<br />
• Light path<br />
– Cornea, pupil, lens, retina, optic nerve, brain<br />
• Retinal cells<br />
– Rods and cones<br />
– Unevenly distributed<br />
• Cones<br />
– Three “color receptors”<br />
– Concentrated in fovea<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
Cone Response<br />
• Encode spectra as three values<br />
• Long, medium and short (LMS)<br />
• Tri<strong>chroma</strong>cy<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller<br />
From A Field Guide to Digital Color, © A.K. Peters, 2003
Effects of Retinal Encoding<br />
• All spectra that stimulate the same cone<br />
response are indistinguishable<br />
• Metameric match<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
CIE Standard “Cones”<br />
• CIE Color Matching Functions (CMF)<br />
• CIE tristimulus values (XYZ)<br />
• Foundation for color measurement<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller<br />
From A Field Guide to Digital Color, © A.K. Peters, 2003
Opponent Color<br />
• Definition<br />
– A<strong>chroma</strong>tic axis<br />
– R-G and Y-B axis<br />
– Separate <strong>lightness</strong><br />
from <strong>chroma</strong> channels<br />
• Occurs in retina<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
Cone Response<br />
© Pfister/Möller<br />
23<br />
HyperPhysics, Georgia State University
Color-Opponent Cells<br />
© Pfister/Möller<br />
24<br />
Bear, Connors, Paradiso, “Neuroscience”
Color Opponency<br />
© Pfister/Möller<br />
25<br />
C. Ware, “Visual Thinking for Design”
Color Appearance<br />
• Depends on many factors<br />
– Adjacent colors (background)<br />
– Viewing environment (surround)<br />
– Adaptation<br />
– Spatial effects<br />
© Pfister/Möller<br />
26
Simultaneous Contrast<br />
© Pfister/Möller<br />
27
Chromatic Adaptation<br />
www.usd.edu/psyc301/coloradapt.htm<br />
© Pfister/Möller
Effect of Spatial Frequency<br />
• Smaller = less saturated<br />
• The paint chip problem<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller<br />
Redrawn from Foundations of Vision, fig 6<br />
© Brian Wandell, Stanford University
© Pfister/Möller<br />
Courtesy of Maureen Stone
© Pfister/Möller<br />
Courtesy of Maureen Stone
© Pfister/Möller<br />
Courtesy of Maureen Stone
Lightness Scales<br />
• Lightness: perceived reflectance<br />
• Brightness: perceived amount of light coming<br />
from a surface<br />
• Luminance: a measured value weighted by human<br />
spectral sensitivity<br />
– Varies with wavelength<br />
– Luminous efficiency function<br />
Green and blue lights of equal intensity<br />
have different luminance values<br />
© Pfister/Möller
L vs. Luminance<br />
© Pfister/Möller<br />
Corners of the<br />
RGB color cube<br />
Luminance of<br />
these colors<br />
L from HLS<br />
All the same<br />
Wrong!<br />
Modified from Maureen Stone
Value<br />
• Perceived <strong>lightness</strong>/darkness of a color<br />
• Scale from black to white<br />
– Power scale<br />
– Munsell value, L*<br />
• Single most important factor in color design<br />
© Pfister/Möller<br />
Courtesy of Maureen Stone
Get it right in black and white<br />
• Value alone defines shape<br />
– No edge without <strong>lightness</strong> change<br />
– No shading with out <strong>lightness</strong> variation<br />
• Value difference defines contrast<br />
– Defines legibility<br />
– Use at least 3:1 luminance contrast for text clarity<br />
– Controls attention<br />
© Pfister/Möller<br />
Modified from Maureen Stone
Drop Shadows<br />
Drop Shadow<br />
Controls Legibility<br />
Need an edge<br />
© Pfister/Möller<br />
Larry Arend, colorusage.arc.nasa.gov<br />
Courtesy of Maureen Stone
Controls Attention, Clutter<br />
Context<br />
Urgent<br />
Normal<br />
Normal<br />
Context<br />
Context<br />
Urgent<br />
Normal<br />
Normal<br />
Context<br />
© Pfister/Möller<br />
Context<br />
Urgent<br />
Normal<br />
Normal<br />
Context<br />
Courtesy of Maureen Stone
Bezold Spreading Effect<br />
© Pfister/Möller<br />
BU Lite Project<br />
41
Model “Color blindness”<br />
• Flaw in opponent processing<br />
– Red-green common (deuteranope, protanope)<br />
– Blue-yellow possible (tritanope)<br />
– Luminance channel almost “normal”<br />
• Effect is 2D color vision model<br />
– Flatten color space<br />
– Can be simulated (Brettel et. al.)<br />
– Vischeck (www.vischeck.com)<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
Color Blindness<br />
Protanope Deuteranope Tritanope<br />
No L cones No M cones No S cones<br />
Red / green<br />
deficiencies<br />
© Pfister/Möller<br />
Blue / Yellow<br />
deficiency<br />
Based on slide from Stone
Color-Blindness<br />
Normal Protanope Deuteranope Lightness<br />
© Pfister/Möller<br />
44<br />
Based on slide from Stone
www.vischeck.com<br />
© Pfister/Möller
Color Models
RGB Color Space<br />
• Additive system<br />
• Colors that can be<br />
represented by<br />
computer monitors<br />
• Not perceptually<br />
uniform<br />
© Pfister/Möller<br />
Yellow<br />
Red<br />
White<br />
Green<br />
Black<br />
48<br />
Cyan<br />
Blue<br />
C. Ware, “Visual Thinking for Design”
Lightness<br />
Perceptual Color Spaces<br />
<strong>Hue</strong><br />
Colorfulness<br />
Unique black and white © Pfister/Möller Courtesy of Maureen Stone
• <strong>Hue</strong>, Value, Chroma<br />
– 5 R 5/10 (bright red)<br />
– N 8 (light gray)<br />
• Perceptually uniform<br />
Munsell Color<br />
Munsell Renotation System<br />
maps between HVC and XYZ<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller<br />
<strong>Hue</strong><br />
Chroma<br />
Value
Munsell Atlas<br />
© Pfister/Möller<br />
Courtesy Gretag-Macbeth
Interactive Munsell Tool<br />
• From www.munsell.com<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
• <strong>Hue</strong> - what people<br />
think of color<br />
• Saturation - purity,<br />
distance from grey<br />
• Lightness - from<br />
dark to light<br />
• Not perceptually<br />
uniform<br />
HSL Color Space<br />
© Pfister/Möller<br />
53<br />
wikipedia.org
Lab Color Space<br />
• Perceptually uniform<br />
• L approximates<br />
human perception of<br />
<strong>lightness</strong><br />
• a, b approximate R/G<br />
and Y/B channels<br />
• a, b called <strong>chroma</strong><br />
© Pfister/Möller<br />
CIELAB 1976<br />
55
Lab Color Space<br />
© Pfister/Möller<br />
56<br />
Based on slide from A. Oliva
Physical<br />
World<br />
Light<br />
Energy<br />
Spectral<br />
distribution<br />
functions F<br />
(l)<br />
Color Models<br />
Visual System Mental Models<br />
Cone<br />
Response<br />
Reduce to three<br />
values (LMS)<br />
CIE tristimulus<br />
values (XYZ)<br />
Courtesy of Maureen Stone<br />
Opponent<br />
Encoding<br />
Separate<br />
Lightness,<br />
Chroma<br />
(A,R-G,Y-B)<br />
© Pfister/Möller<br />
Perceptual<br />
Models<br />
Unique<br />
White<br />
CIELAB<br />
Munsell<br />
(HVC)<br />
Appearance<br />
Models<br />
<strong>Hue</strong>, <strong>chroma</strong>,<br />
<strong>saturation</strong>,<br />
<strong>colorfulness</strong><br />
<strong>lightness</strong>,<br />
<strong>brightness</strong><br />
CIECAM02
Nominal
Small Areas<br />
© Pfister/Möller<br />
59<br />
Tableau Software
Small Areas<br />
© Pfister/Möller<br />
60<br />
Ware, “Information Visualization”
Pop-Out<br />
<strong>Hue</strong> and <strong>lightness</strong> Lightness only<br />
© Pfister/Möller<br />
Based on slide from Stone
Brightness & <strong>saturation</strong> draw<br />
attention<br />
© Pfister/Möller
Bezold Spreading Effect<br />
© Pfister/Möller<br />
63<br />
Based on slide from Stone
Large Areas<br />
Tufte, VDQI (Vol. 1), p. 77
Large Areas<br />
Tufte, VDQI (Vol. 1), p. 76
Large Areas<br />
1 = Red is bigger<br />
2 = Green is bigger<br />
3 = Both look the same<br />
Cleveland & McGill, “A Color-Caused Optical Illusion on<br />
a Statistical Graph”, 1983
Color Size Illusion<br />
© Pfister/Möller<br />
67<br />
Cleveland & McGill, “A Color-Caused Optical<br />
Illusion on a Statistical Graph”, 1983
Maps<br />
© Pfister/Möller<br />
68<br />
C. Ware, “Visual Thinking for Design”
Maps<br />
© Pfister/Möller<br />
69<br />
C. Ware, “Visual Thinking for Design”
Highlighting<br />
© Pfister/Möller<br />
Based on slide from Stone
Take-home message<br />
• Color in small regions is difficult to<br />
perceive, and bright colors in large areas<br />
appear bigger<br />
• Use bright, saturated colors for small<br />
regions, and use low <strong>saturation</strong> pastel colors<br />
for large regions and backgrounds<br />
© Pfister/Möller<br />
71
Excel<br />
© Pfister/Möller<br />
72<br />
Junk Charts
"Famous programmers from Adleman to<br />
Zimmerman", grokcode.
Primary Colors<br />
• Primary color terms are remarkably<br />
consistent across cultures [Berlin & Kay,<br />
69]<br />
© Pfister/Möller<br />
74<br />
Ware, “Information Visualization”
Colors for Categories<br />
© Pfister/Möller<br />
75<br />
Ware, “Information Visualization”
Categorical Data<br />
• Limited distinguishability (8-14)<br />
– Best with <strong>Hue</strong><br />
– Best choices from Ware:<br />
© Pfister/Möller
• Greyscale<br />
• Saturation<br />
• Brightness<br />
Ordered Data<br />
• Rainbow is a learned order!<br />
© Pfister/Möller
Maximum <strong>Hue</strong> Separation<br />
© Pfister/Möller<br />
79
Analogous, yet distinct<br />
© Pfister/Möller
Sequential<br />
© Pfister/Möller
Sharpening<br />
• Differences are perceived better when<br />
samples are similar to the background color<br />
© Pfister/Möller<br />
82
Take-home message<br />
• Only a small number of colors can be used<br />
effectively as nominal labels<br />
• Keep the number of colors for nominal data<br />
to less than eight, and use quiet medium<br />
grey backgrounds<br />
© Pfister/Möller<br />
83
Ordinal
Order These Colors<br />
Based on slide from Stasko
Order These Colors<br />
Based on slide from Stasko
Order These Colors<br />
Based on slide from Stasko
Nominal<br />
Ordinal<br />
Brewer Scales<br />
© Pfister/Möller<br />
88<br />
Cynthia Brewer, Color Use Guidelines for Data Representation
Take-home message<br />
• Lightness and <strong>saturation</strong> are effective for<br />
ordinal data because they have an implicit<br />
perceptual ordering<br />
• Show ordinal data with a discrete set of<br />
color values that change in <strong>lightness</strong> or<br />
<strong>saturation</strong><br />
© Pfister/Möller<br />
90
Quantitative
Quantitative Data - to show<br />
• Mediocre<br />
– rainbow (hue)<br />
• Good<br />
– Greyscale<br />
– Luminance<br />
– Brightness<br />
order<br />
© Pfister/Möller<br />
[www.research.ibm.com/<br />
visualanalysis/perception.html]
Rainbow colour map<br />
• Learned order<br />
• Visually segmented<br />
– Solution - isoluminant rainbow<br />
© Pfister/Möller
ensity Map<br />
Colormaps<br />
Density Map<br />
Lightness scale<br />
Lightness scale<br />
Lightness scale<br />
Lightness scale<br />
with hue and<br />
<strong>chroma</strong> variation<br />
Lightness scale<br />
with hue and<br />
<strong>chroma</strong> variation<br />
© Lightness Pfister/Möller scale<br />
with hue and<br />
<strong>chroma</strong> variation<br />
<strong>Hue</strong> scale with<br />
<strong>lightness</strong> variation<br />
<strong>Hue</strong> 94scale<br />
with<br />
<strong>lightness</strong> variation<br />
After slide from M. Stone
Rainbow Colormap<br />
© Pfister/Möller<br />
95<br />
Rogowitz and Treinish, Why should engineers and<br />
scientists be worried about color?
Rainbow Colormap<br />
© Pfister/Möller<br />
96<br />
Rogowitz and Treinish, Why should engineers and<br />
scientists be worried about color?
Rainbow Colormap<br />
• <strong>Hue</strong> is used to show<br />
ordinal data<br />
• Not perceptually<br />
linear: Equal steps in<br />
the continuous range<br />
are not perceived as<br />
equal steps<br />
• Not good for<br />
colorblind people<br />
© Pfister/Möller<br />
97
Colormaps<br />
Rainbow Saturation<br />
Rogowitz and Treinish, How Not to Lie with Visualization
Color Segmentation<br />
© Pfister/Möller<br />
100<br />
C. Ware, “Visual Thinking for Design”
Colormaps<br />
Rainbow Saturation<br />
Discrete<br />
Discrete<br />
Rogowitz and Treinish, Why should engineers and scientists be<br />
worried about color?
Colormaps<br />
Rainbow Lightness<br />
Lightness<br />
& <strong>Hue</strong><br />
Lightness<br />
& <strong>Hue</strong><br />
Rogowitz and Treinish, Why should engineers and scientists be<br />
worried about color?
Task: Find high & low anomalies<br />
© Pfister/Möller<br />
http://www.jason.oceanobs.com/html/donnees/las/2005-03_uk.html
Task: Find high & low anomalies<br />
© Pfister/Möller<br />
http://www.jason.oceanobs.com/html/donnees/las/2005-03_uk.html
Task: Understand relative height<br />
© Pfister/Möller<br />
http://www.jason.oceanobs.com/html/donnees/las/2005-03_uk.html
Task: Find height 120<br />
© Pfister/Möller<br />
http://www.jason.oceanobs.com/html/donnees/las/2005-03_uk.html
Take-home message<br />
• Quantitative data can be shown with a<br />
discrete or continuous colormap<br />
• Use colormaps with a limited hue palette<br />
and redundantly vary <strong>lightness</strong> and<br />
<strong>saturation</strong>, and use discrete colormaps for<br />
accuracy<br />
© Pfister/Möller<br />
107
Color Aesthetics
DANGER!<br />
�Inappropriate use of colour can<br />
be disasterous to the application<br />
© Pfister/Möller<br />
109
Why Should We Care?<br />
• Poorly designed color is confusing<br />
– Creates visual clutter<br />
– Misdirects attention<br />
• Poor design devalues the information<br />
– Visual sophistication<br />
– Evolution of document and web design<br />
• “Attractive things work better”<br />
– Don Norman<br />
Courtesy of Maureen Stone<br />
© Pfister/Möller
Color Unity
Natural Colors
Change language