color - github pages · josef albers 53. 17 simultaneous contrast josef albers 54 bezold effect 62....
TRANSCRIPT
![Page 1: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/1.jpg)
1
Color
Maneesh Agrawala
CS 448B: VisualizationWinter 2020
1
2
![Page 2: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/2.jpg)
2
Color
3
Color in VisualizationIdentify, Group, Layer, Highlight
Colin Ware
4
![Page 3: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/3.jpg)
3
Purpose of ColorTo labelTo measureTo represent and imitateTo enliven and decorate
“Above all, do no harm.”- Edward Tufte
5
TopicsColor PerceptionColor NamingUsing Color in Visualization
6
![Page 4: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/4.jpg)
4
Color PerceptionPhysical World, Visual System, Mental Models
7
Physical WorldLight is radiation in range of wavelengths
Light of single wavelength is monochromatic
10
![Page 5: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/5.jpg)
5
Most Colors not Monochromatic
Curves describe spectral composition of stimulus
12
Retina
Simple Anatomy of the Retina, Helga Kolb
15
![Page 6: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/6.jpg)
6
As light enters our retina…LMS (Long, Middle, Short) ConesSensitive to different wavelength
A Field Guide to Digital Color, Maureen Stone
18
Cone Response Integrate cone response with input
spectra
19
![Page 7: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/7.jpg)
7
Integrate cone response with input spectra
Computing Cone Response
20
CIE XYZ Color SpaceStandardized in 1931 to mathematically
represent tri-stimulus response
“Standard observer” response curves
22
![Page 8: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/8.jpg)
8
Opponent processingLMS are linearly combined to create:
LightnessRed-green contrastYellow-blue contrast
A R-G Y-B
+++ +++ +
- -
Fairchild
L M S
24
Opponent processingLMS are combined to create:
LightnessRed-green contrastYellow-blue contrast
Experiments:No reddish green, no bluish yellowColor after images
26
![Page 9: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/9.jpg)
9
28
29
![Page 10: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/10.jpg)
10
CIE LUV and LAB color spacesStandardized in 1976 to mathematically
represent opponent processing theory
CIELABCIELUV
33
Axes of CIE LABCorrespond to opponent signalsL* = Luminance a* = Red-green contrastb* = Yellow-blue contrast
Scaling of axes to represent “color distance”JND = Just noticeable difference (~2.3 units)
34
![Page 11: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/11.jpg)
11
Courtesy Gretag-Macbeth
Munsell AtlasDeveloped the first perceptual color system based on his
experience as an artist (1905)
35
Hue, Value, Chroma
36
![Page 12: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/12.jpg)
12
Hue, Value, Chroma
Hue
37
Hue, Value, Chroma
Value
38
![Page 13: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/13.jpg)
13
Hue, Value, Chroma
Chroma
39
Psuedo-Perceptual ModelsHLS, HSV, HSBNOT perceptual modelsSimple re-notation of RGB
! View along gray axis! See a hue hexagon! L or V is grayscale pixel value
Cannot predict perceived lightness
41
![Page 14: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/14.jpg)
14
Perceptual brightness
Color palette
HSL Lightness(Photoshop)
42
Perceptual brightness
Color palette
Luminance Y(CIE XYZ)
43
![Page 15: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/15.jpg)
15
Perceptual brightness
Color palette
Munsell ValueL* (CIE LAB)
44
“In order to use color effectively it is necessary to recognize that
it deceives continually.”
- Josef Albers, Interaction of Color
49
![Page 16: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/16.jpg)
16
Simultaneous ContrastThe inner and outer thin rings are the
physical purple
Donald MacLeod
50
Simultaneous Contrast
Josef Albers
53
![Page 17: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/17.jpg)
17
Simultaneous Contrast
Josef Albers
54
Bezold Effect
62
![Page 18: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/18.jpg)
18
Crispening
Perceived difference depends on background
From Fairchild, Color Appearance Models
63
Spreading
Adjacent colors blend
Spatial frequency! The paint chip problem! Small text, lines, glyphs! Image colors
Redrawn from Foundations of Vision© Brian Wandell, Stanford University
64
![Page 19: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/19.jpg)
19
Announcements
70
Final projectNew visualization research or data analysis project
! Research: Pose problem, Implement creative solution! Data analysis: Analyze dataset in depth & make a visual explainer
Deliverables! Research: Implementation of solution! Data analysis/explainer: Article with multiple interactive
visualizations! 6-8 page paper
Schedule! Project proposal: Wed 2/19! Design review and feedback: 3/9 and 3/11 ! Final presentation: 3/16 (7-9pm) Location: TBD! Final code and writeup: 3/18 11:59pm
Grading! Groups of up to 3 people, graded individually! Clearly report responsibilities of each member
71
![Page 20: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/20.jpg)
20
THE BROWN INSTITUTE FOR MEDIA INNOVATION
Sean Rameswaram
Join us for a talk and conversation with Brown Institute Director, Professor Maneesh Agrawala,featuring
The Brown Institute is excited to welcome Sean Rameswaram, host of Today, Explained, Vox’s daily explainerpodcast. As advertised by Vox, Today, Explained is your all killer, no filler, Monday to Friday news. Sean, aveteran of the podcast space, will discuss Vox’s novel approach to their daily show and will join BrownInstitute Director Maneesh Agrawala in conversation about the state of podcasts. Before joining Vox to hostits daily news podcast, Sean was a correspondent for Radiolab's More Perfect. He has also made radio forthe CBC, NPR, and WNYC, where he hosted the fondly remembered Sideshow podcast for Studio 360.
RSVP: http://bit.ly/bimi_Rameswaram
72
Color Naming
73
![Page 21: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/21.jpg)
21
What color is this?
74
What color is this?
“Yellow”
75
![Page 22: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/22.jpg)
22
What color is this?
76
What color is this?
“Blue”
77
![Page 23: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/23.jpg)
23
What color is this?
78
What color is this?
“Teal” ?
79
![Page 24: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/24.jpg)
24
Colors according to XKCD…
80
Basic color termsChance discovery by Brent Berlin and Paul Kay
81
![Page 25: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/25.jpg)
25
Basic color termsChance discovery by Brent Berlin and Paul Kay
82
Basic Color TermsChance discovery by Brent Berlin and Paul Kay
Initial study in 1969Surveyed speakers from 20 languagesLiterature from 69 languages
83
![Page 26: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/26.jpg)
26
World color survey
84
World color survey
85
![Page 27: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/27.jpg)
27
World color survey
Naming information from 2616 speakers from 110 languages on 330 Munsell color chips
86
Results from WCS (South Pacific)
87
![Page 28: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/28.jpg)
28
Results from WCS (Mexico)
88
Universal (?) Basic Color TermsBasic color terms recur across languages
White
Grey
Black
Red
Yellow
Green
Blue
Pink
Orange
Brown
Purple
89
![Page 29: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/29.jpg)
29
Evolution of Basic Color TermsProposed universal evolution across
languages
90
Rainbow color rampWe associate and group colors together, often using
the name we assign to the colors
91
![Page 30: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/30.jpg)
30
Rainbow color rampWe associate and group colors together, often using
the name we assign to the colors
92
Rainbow color rampWe associate and group colors together, often using
the name we assign to the colors
93
![Page 31: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/31.jpg)
31
Naming affects color perceptionColor name boundaries
Green Blue
94
Color naming models
Model 3 million responses from XKCD survey
Bins in LAB spacesized by saliency:How much do peopleagree on color name?
Modeled by entropyof p(name | color)
[Heer & Stone]
Blue / greenconfusion
Orange / redboundary
95
![Page 32: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/32.jpg)
32
Palette Design + Color NamesMinimize overlap and ambiguity of color names
http://vis.stanford.edu/color-names
96
Palette Design + Color NamesMinimize overlap and ambiguity of color names
http://vis.stanford.edu/color-names
97
![Page 33: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/33.jpg)
33
Using Color in Visualization
99
Gray’s Anatomy
Superficial dissection of the right side of the neck, showing the carotid and subclavian arteries
http://www.bartleby.com/107/illus520.html
101
![Page 34: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/34.jpg)
34
Molecular Models
Organic Chemistry Molecular Model Sethttp://www.indigo.com/models/gphmodel/62003.html
102
Product Categories
Created by Tableau - Visual Analysis for DatabasesTM
103
![Page 35: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/35.jpg)
35
Grouping, Highlighting
104
Mapping Data to Color (Rainbows)
123
![Page 36: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/36.jpg)
36
Avoid rainbow color maps!
1. Hues are not naturally ordered2. People segment colors into classes, perceptual banding3. Naïve rainbows unfriendly to color blind viewers4. Low luminance colors (blue) hide high frequencies
124
www.colorbrewer.org
Color Brewer
130
![Page 37: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/37.jpg)
37
131
Classing quantitative data
Age-adjusted mortality rates for the United States
Common option: break into 5 or 7 quantiles
132
![Page 38: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/38.jpg)
38
Classing Quantitative DataEqual interval (arithmetic progression)Quantiles (recommended)Standard deviationsClustering (Jenks’ natural breaks / 1D K-Means)
Minimize within group varianceMaximize between group variance
133
Quantitative color encodingSequential color scale
Ramp in luminance, possibly also hueTypically higher values map to darker colors
Diverging color scaleUseful when data has a meaningful “midpoint”Use neutral color (e.g., grey) for midpointUse saturated colors for endpoints
Limit number of steps in color to 3-9
134
![Page 39: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/39.jpg)
39
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Sequential Scale Single Hue
Ramp primarily in luminance, subtle hue difference
138
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
Sequential Scale Multi HueRamp luminance & hue in perceptual color spaceAvoid contrasts subject to color blindness!
139
![Page 40: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/40.jpg)
40
Viridis, https://bids.github.io/colormap/
Sequential Scale Multi Hue
140
Diverging color scheme
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html
141
![Page 41: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/41.jpg)
41
Diverging color scheme
143
Diverging color schemeHue TransitionCarefully handle midpoint
! Critical class– Low, Average, High– ‘Average’ should be gray
! Critical breakpoint– Defining value e.g. 0– Positive & negative should use different hues
Extremes saturated, middle desaturated
144
![Page 42: Color - GitHub Pages · Josef Albers 53. 17 Simultaneous Contrast Josef Albers 54 Bezold Effect 62. 18 Crispening Perceived difference depends on background From Fairchild, Color](https://reader033.vdocument.in/reader033/viewer/2022051814/6039e8ba7729e860235a35d1/html5/thumbnails/42.jpg)
42
Summary: Color Design PrinciplesControl value (darkness/lightness)
! Ensure legibility! Avoid unwanted emphasis
Use a limited hue palette (~6 colors)! Control color “pop out”! Be aware of perceptual color grouping! Avoid clutter from too many competing colors
Use neutral backgrounds! Control impact of color! Minimize simultaneous contrast
147