CSE512 :: 6 Feb Color. Jeffrey Heer University of Washington

Transcription

1 CSE512 :: 6 Feb 2014 Color Jeffrey Heer University of Washington 1

2 Color in Visualization Identify, Group, Layer, Highlight Colin Ware 2

3 Purpose of Color To label To measure To represent and imitate To enliven and decorate Above all, do no harm. - Edward Tufte 3

4 Topics Perception of Color Light, Visual system, Mental models Color in Information Visualization Nominal, Ordinal & Quantitative color encoding Guidelines for color palette design 4

5 Perception of Color 5

6 What color is this? 6

7 What color is this? Yellow 7

8 What color is this? 8

9 What color is this? Blue 9

10 What color is this? 10

11 What color is this? Teal? 11

12 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 12

13 Physicist s view Light as electromagnetic wave Wavelength Energy or Relative luminance A Field Guide to Digital Color, A.K. Peters 13

14 Emissive vs. reflective light Additive (digital displays) Subtractive (print, e-paper) 14

15 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 15

16 Retina Simple Anatomy of the Retina, Helga Kolb 16

17 As light enters our retina LMS (Long, Middle, Short) Cones Sensitive to different wavelength A Field Guide to Digital Color, Maureen Stone 17

18 As light enters our retina LMS (Long, Middle, Short) Cones Sensitive to different wavelength Integration with input stimulus A Field Guide to Digital Color, Maureen Stone 18

19 Effects of retina encoding Spectra that stimulate the same LMS response are indistinguishable (a.k.a. metamers ). Tri-stimulus Computer displays Digital scanners Digital cameras 19

20 CIE XYZ color space Standardized in 1931 to mathematically represent tri-stimulus response. Standard observer response curves 20

21 CIE XYZ color space Colin Ware 21

22 CIE chromaticity diagram Colorfulness vs. Brightness x = X/(X+Y+Z) y = Y/(X+Y+Z) y Colin Ware x 22

23 CIE chromaticity diagram Spectrum locus Purple line Mixture of two lights appears as a straight line. Courtesy of PhotoResearch, Inc. 23

24 CIE chromaticity diagram Spectrum locus Purple line Mixture of two lights appears as a straight line. Courtesy of PhotoResearch, Inc. 24

25 CIE chromaticity diagram Spectrum locus Purple line Mixture of two lights appears as a straight line. Courtesy of PhotoResearch, Inc. 25

26 CIE chromaticity diagram Spectrum locus Purple line Mixture of two lights appears as a straight line. Courtesy of PhotoResearch, Inc. 26

27 Display gamuts Typically defined by: 3 Colorants Convex region 27

28 Display gamuts Deviations from srgb specification 28

29 Color blindness Missing one or more retina cones or rods Protanope Deuteranope Luminance 29

30 VisCheck Simulates color vision deficiencies Web service or Photoshop plug-in Robert Dougherty and Alex Wade Deuteranope Protanope Tritanope 30

31 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 31

32 Primary colors? To paint all colors : Leonardo da Vinci, circa 1500 described in his notebooks a list of simple colors Yellow Blue Green Red 32

33 Opponent processing LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast L M S A R-G Y-B Fairchild 33

34 Opponent processing LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast 34

35 Opponent processing LMS are combined to create: Lightness Red-green contrast Yellow-blue contrast Experiments: No reddish green, no bluish yellow Color after images 35

36 36

37 37

38 CIE LAB and LUV color spaces Standardized in 1976 to mathematically represent opponent processing theory. Non-linear transformation of CIE XYZ 38

39 Axes of CIE LAB Correspond to opponent signals L* = Luminance a* = Red-green contrast b* = Yellow-blue contrast Scaling of axes to represent color distance JND = Just noticeable difference (~2.3 units) 39

40 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 40

41 Albert Munsell Developed the first perceptual color system based on his experience as an artist (1905). 41

42 Hue, Value, Chroma 42

43 Hue, Value, Chroma Hue 43

44 Hue, Value, Chroma Value 44

45 Hue, Value, Chroma Chroma 45

46 Munsell color system Perceptually-based Precisely reference a color Intuitive dimensions Look-up table (LUT) 46

47 Munsell color system 47

48 Perceptual brightness Color palette 48

49 Perceptual brightness Color palette HSL Lightness (Photoshop) 49

50 Perceptual brightness Color palette Luminance Y (CIE XYZ) 50

51 Perceptual brightness Color palette Munsell Value 51

52 Perceptual brightness Color palette Munsell Value L* (CIE LAB) 52

53 Perceptually-uniform color space Munsell colors in CIE LAB coordinates Mark Fairchild 53

54 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 54

55 Color Appearance If we had a perceptually-uniform color space, can we predict how we perceive colors? 55

56 Simultaneous Contrast The inner and outer thin rings are in fact the same physical purple. Donald MacLeod 56

57 57

58 58

59 Simultaneous Contrast Josef Albers 59

60 Simultaneous Contrast Josef Albers 60

61 Chromatic Adaptation 61

62 Chromatic Adaptation 62

63 Bezold effect Color appearance depends adjacent colors Color Appearance Tutorial by Maureen Stone 63

64 Crispening Perceived difference depends on background Color Appearance Models, Fairchild 64

65 Spreading Spatial frequency The paint chip problem Small text, lines, glyphs Image colors Adjacent colors blend Foundations of Vision, Brian Wandell 65

66 Color Appearance If we had a perceptually-uniform color space, can we predict how we perceive colors? Chromatic adaptation Luminance adaptation Simultaneous contrast Spatial effects Viewing angle 66

67 icam icam models (2002) Chromatic adaptation Appearance scales Color difference Crispening Spreading HDR tone mapping (see also CIECAM02) Mark Fairchild 67

68 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 68

69 Colors according to XKCD 69

70 Basic color terms Chance discovery by Brent Berlin and Paul Kay. 70

71 Basic color terms Chance discovery by Brent Berlin and Paul Kay. 71

72 Basic Color Terms Chance discovery by Brent Berlin and Paul Kay. Initial study in 1969 Surveyed speakers from 20 languages Literature from 69 languages 72

73 World color survey 73

74 World color survey 74

75 World color survey Naming information from 2616 speakers from 110 languages on 330 Munsell color chips 75

76 Results from WCS 76

77 Results from WCS 77

78 Universal (?) Basic Color Terms Basic color terms recur across languages. White Grey Black Red Yellow Green Blue Pink Brown Orange Purple 78

79 Evolution of Basic Color Terms Proposed universal evolution across languages. 79

80 Rainbow color ramp We associate and group colors together, often using the name we assign to the colors. 80

81 Rainbow color ramp We associate and group colors together, often using the name we assign to the colors. 81

82 Rainbow color ramp We associate and group colors together, often using the name we assign to the colors. 82

83 Naming affects color perception Color name boundaries Green Blue 83

84 Color naming models [Chuang et al., Heer & Stone] Model 3 million responses from XKCD survey Bins in LAB space sized by saliency: How much do people agree on color name? Orange / red boundary Modeled by entropy of p(name color) Blue / green confusion 84

85 Icicle tree with colors Naming confusion conflicts with tree structure! 85

86 Perception of Color A R-G Y-B Light Cone Response Opponent Signals Yellow Color Cognition Color Appearance Color Perception 86

87 Color in Data Visualization 87

88 Hints for the colorist Use only a few colors (~6 ideal) Colors should be distinctive and named Strive for color harmony (natural colors?) Use cultural conventions; appreciate symbolism Beware of bad interactions (red/blue etc.) Get it right in black and white Respect the color blind 88

89 Categorical Color 89

90 Gray s anatomy Superficial dissection of the right side of the neck, showing the carotid and subclavian arteries. ( 90

91 Molecular models Organic Chemistry Molecular Model Set 91

92 Resistor color codes 92

93 Allocation of the radio spectrum 93

94 Allocation of the radio spectrum 94

95 Palette Design + Color Names Minimize overlap and ambiguity of color names. 95

96 Palette Design + Color Names Minimize overlap and ambiguity of color names. 96

97 Quantitative Color 97

98 Default rainbow maps 98

99 Avoid rainbow color maps! 1. People segment colors into classes 2. Hues are not naturally ordered 3. Different lightness emphasizes certain scalar values 4. Low luminance colors (blue) hide high frequencies 99

100 Singularity in Phase (M. Berry) Phase is periodic Hue circle which is also periodic 100

101 101

102 Classing quantitative data Age-adjusted mortality rates for the United States. 102

103 Classing quantitative data 1. Equal interval (arithmetic progression) 2. Quantiles (recommended) 3. Standard deviation 4. Classification [Jenks natural breaks ] 5. Equal area 6. Minimal length boundaries 7. Minimal gaps 103

104 ColorBrewer: Color advice for maps 104

105 Quantitative color encoding Sequential color scale Constrain hue, vary luminance/saturation Map higher values to darker colors Diverging color scale Useful when data has a meaningful midpoint Use neutral color (e.g., grey) for midpoint Use saturated colors for endpoints Limit number of steps in color to

106 Sequential color scheme 106

107 Sequential color scheme 107

108 Design of sequential color scales Hue-Lightness (Recommended) Higher values mapped to darker colors ColorBrewer schemes have 3-9 steps Hue Transition Two hues Neighboring hues interpolate better Couple with change in lightness 108

109 Design of sequential data scales 109

110 Diverging color scheme 110

111 Diverging color scheme 111

112 Diverging color scheme Hue Transition Carefully 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 112

113 Diverging color scheme 113

114 Hints for the colorist Use only a few colors (~6 ideal) Colors should be distinctive and named Strive for color harmony (natural colors?) Use cultural conventions; appreciate symbolism Beware of bad interactions (red/blue etc.) Get it right in black and white Respect the color blind 114