What creates good color design?

Transcription

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. Color Envisioning Information (ch 5) Stone, Expert Color Choices Douglas Adams, The Restaurant at the End of the Universe Today s lecture Creating color Perceiving color Measuring color CIE XYZ, xyy, CIELAB Practicum Color measurement demo Tufte s principles applied Designing for CVD or color blindness What creates good color design? Good ideas executed with superb craft E.R. Tufte, Envisioning Information Aesthetics Perception Materials Maureen Stone, StoneSoup Consulting 1

2 Materials: Pigments & Paints Scattered light Materials: Dyes Organic molecules Biological origin (snails, bugs, plants, etc.) Synthetic (William Perkin) Dyed pigments are lakes The Bright Earth, Philip Ball 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 LCD Display CRT Display Perception Materials Perception Aesthetics Physical World Visual System Mental Models Aesthetics Lights, surfaces, objects Eye, optic nerve, visual cortex Red, green, brown Apple, leaf, bark Stop, go, state park Perception Warm, cool, neutral Attractive, ugly, blah Materials Color design Powerful, nurturing, Maureen Stone, StoneSoup Consulting 2

3 Physical World Physical World Visual System Mental Models Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Perceptual Models Color Space Hue, lightness saturation CIELAB Munsell (HVC) Appearance Models Color in Context Adaptation, Background, Size, CIECAM02 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 Cone Response Color Exploratory Light path Cornea, pupil, lens, retina Optic nerve, brain Retinal cells Rods and cones Unevenly distributed Cones Three color receptors Concentrated in fovea Simulation by Mark Fairchild 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* Inside the eye: Mayo Clinic From A Field Guide to Digital Color, A.K. Peters, 2003 Metamerism CIE Color Measurement All spectra that stimulate the same cone response are indistinguishable Metameric match CIE Standard Observer CIE tristimulus values (XYZ) International standard for specifying color All spectra that create the same tristimulus (XYZ) values look the same From A Field Guide to Digital Color, A.K. Peters, 2003 Maureen Stone, StoneSoup Consulting 3

4 CIE XYZ from Displays For any RGB Y = ry R +gy G +by B Y R Y G Y B = Maximum luminance of the display red, green, blue r,g,b are linear pixel values Similarly for X and Z Can be expressed as a matrix CIE Chromaticity Diagram Separate Colorfulness (x,y) Brightness (Y) XYZ = xyy Project XYZ on a plane x = X/(X+Y+Z) y = Y/(X+Y+Z) z = Z/(X+Y+Z) 1 = x+y+z luminance Pixel value Colors that vary only in brightness project to the same point Spectra that look the same project to the same point Display Gamuts Display gamuts create a triangle From A Field Guide to Digital Color, A.K. Peters, 2003 Projector Gamuts Pixel to Luminance Mapping ( gamma curve ) Same image, different mappings From A Field Guide to Digital Color, A.K. Peters, 2003 Maureen Stone, StoneSoup Consulting 4

5 Color Models Physical World Visual System Mental Models Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Trichromacy Metamerism Color matching Color measurement Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Perceptual Models Color Space Hue, lightness saturation CIELAB Munsell (HVC) Appearance Models Color in Context Adaptation, Background, Size, CIECAM02 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 Physical World Visual System Mental Models Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Separate lightness, chroma After images Color blindness Perceptual Models Color Space Hue, lightness saturation CIELAB Munsell (HVC) Appearance Models Color in Context Adaptation, Background, Size, CIECAM02 Perceptual Color Spaces Unique black and white Uniform differences Perception & design CIELAB Lightness (L*) plus two color axis (a*, b*) Non-linear function of CIE XYZ E defined for computing color differences Lightness Colorfulness Hue Maureen Stone, StoneSoup Consulting 5

6 Color Models Physical World Visual System Mental Models Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Perceptual Models Color Space Hue, lightness saturation CIELAB Munsell (HVC) Intuitive color Color differences Color design Appearance Models Color in Context Adaptation, Background, Size, CIECAM02 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 Demo Beyond three values Aesthetics 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 Materials Maureen Stone, StoneSoup Consulting 6

7 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, evaluate Practice, practice, practice Envisioning Information avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm. E. R. Tufte Fundamental Uses To label To measure To represent or to imitate reality To 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 Maureen Stone, StoneSoup Consulting 7

8 Contrast and Analogy 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 Hue, chroma, value Value only 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 Cluster Calendar Created by Tableau - Visual Analysis for Databases TM Jarke van Wijk, Edward van Selow Cluster and Calendar based Visualization of Time Series Data Maureen Stone, StoneSoup Consulting 8

9 Grouping, Highlighting Psychophysics of Labeling Preattentive, pop out Time proportional to the number of digits Time proportional to the number of 7 s Both 3 s and 7 s 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 hypothesis Recent work by Kay et. al. Redefines as constraints, modulated by language World Color Survey Recommended by Colin Ware for labels World Color Survey WCS Database 330 Munsell chips 24 native speakers of 110 languages Asked to name each chip Berinmo English grue Language, thought and color: recent developments. Paul Kay and Terry Regier. Maureen Stone, StoneSoup Consulting 9

10 Tableau Color Example Color Sketches 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 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 palettes 2. Individual colors from different palettes 3. Standard color picker Maureen Stone, StoneSoup Consulting 10

11 Many, many RGB/HSV/HSL Color Tools To Measure eyedropper Data to Color Different Scales, Different Views 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 Rogowitz & Treinish, How not to lie with visualization Density Map Lightness scale 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 Lightness scale with hue and chroma variation Hue scale with lightness variation Maureen Stone, StoneSoup Consulting 11

12 Color Brewer 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 Sequential Ramps 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 Diverging Ramps Data Distribution Mapping Census 2000: The Geography of U.S. Diversity Maureen Stone, StoneSoup Consulting 12

13 Heat Map (default ramp) Full Range Skewed Data Skewed Data Slightly negative Stepped Threshold Skewed Data Skewed Data Quantitative UI StoneSoup Consulting, 2005 Maureen Stone, StoneSoup Consulting 13

14 Multi-dimensional Scatter plot Multivariate Color Sequences Variable 1, 2 X, Y Variable 3, 4, 5 R, G, B Using Color Dimensions to Display Data Dimensions Beatty and Ware Color Weaves How well does it work? 6 variables = 6 hues, which vary in brightness Brewer color scheme Additive mixture (blend) Spatial texture (weave) Weaving versus Blending (APGV06 and SIGGRAPH poster) Haleh Hagh-Shenas, Victoria Interrante, Christopher Healey and Sunghee Kim From The Economist Multispectral Color Imaging 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 Maureen Stone, StoneSoup Consulting 14

15 Color Overlay (Temperature) 3D line integral convolution to visualize 3D flow (LIC). Color varies from red to yellow with increasing temperature To Represent or Imitate Reality Victoria Interrante and Chester Grosch, U. Minnesota Illustrative Color To Enliven or Decorate Gray s Anatomy of the Human Body Map of Point Reyes 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 Maureen Stone, StoneSoup Consulting 15

16 Incidence of CVD Monochromacy % Dichromacy Protanopia 1% Deuteranopia 1.1% Tritanopia 0.002% Anomalous trichromacy Protanomaly 1% Deuteranomaly 4.9% Tritanomaly - Total % Vischeck Simulates dichromatic color vision deficiencies Web service or Photoshop plug-in Robert Dougherty and Alex Wade vischeck.com R. W. G. Hunt. Measuring Colour. Fountain Press,1998. Deuteranope Protanope Tritanope Smart Money iphone Double encode: Shapes or textures Maureen Stone, StoneSoup Consulting 16

17 Similar colors are the real problem Accommodation No color set that works for all viewers Even accommodating most common is limiting Options: Minimize dependency on color Double encode Provide choices/customization STOP protanope deuteranope luminance Maureen Stone, StoneSoup Consulting 17