Understanding Color: Perception, Models, and Design - Prof. Marilyn Ostergren, Study notes of Information Technology

Download Understanding Color: Perception, Models, and Design - Prof. Marilyn Ostergren and more Study notes Information Technology in PDF only on Docsity! Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 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.” Douglas Adams, The Restaurant at the End of the Universe Color Envisioning Information (ch 5) Stone, Expert Color Choices 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 Materials Aesthetics Perception Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 2 Materials: Pigments & Paints Scattered light The Bright Earth, Philip Ball Materials: Dyes Organic molecules • Biological origin (snails, bugs, plants, etc.) • Synthetic (William Perkin) • Dyed pigments are “lakes” 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 CRT DisplayLCD Display Perception Materials Aesthetics Perception Physical World Visual System Mental Models Lights, surfaces, objects Eye, optic nerve, visual cortex Red, green, brown Apple, leaf, bark Stop, go, state park Warm, cool, neutral Attractive, ugly, blah Powerful, nurturing, … Materials Perception Aesthetics Color design Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 5 Color Models Physical World Visual System Mental Models Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Appearance Models Color in Context Adaptation, Background, Size, … CIECAM02 Perceptual Models Color “Space” Hue, lightness saturation CIELAB Munsell (HVC) Trichromacy Metamerism Color matching Color measurement 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 Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Appearance Models Color in Context Adaptation, Background, Size, … CIECAM02 Perceptual Models Color “Space” Hue, lightness saturation CIELAB Munsell (HVC) Separate lightness, chroma After images Color blindness Perceptual Color Spaces Lightness Hue Colorfulness 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 Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 6 Color Models Physical World Visual System Mental Models Opponent Encoding Separate lightness, chroma (A,R-G,Y-B) Light Energy Spectral distribution functions F(λ) Cone Response Encode as three values (L,M,S) CIE (X,Y,Z) Appearance Models Color in Context Adaptation, Background, Size, … CIECAM02 Perceptual Models Color “Space” Hue, lightness saturation CIELAB Munsell (HVC) “Intuitive” color Color differences Color design 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 Beyond three values Demo Aesthetics Materials 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 Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 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 www.edwardtufte.com 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 Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 10 Tableau Color Example 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 Color “Sketches” 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 Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 11 Many, many RGB/HSV/HSL Color Tools eyedropper To Measure Data to Color 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 Different Scales, Different Views Rogowitz & Treinish, “How not to lie with visualization” Density Map Lightness scale Lightness scale with hue and chroma variation Hue scale with lightness variation 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” Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 12 Color Brewer www.colorbrewer.org 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 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 Sequential Ramps Diverging Ramps Data Distribution Mapping Census 2000: The Geography of U.S. Diversity Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 15 Color Overlay (Temperature) 3D line integral convolution to visualize 3D flow (LIC). Color varies from red to yellow with increasing temperature http://www-users.cs.umn.edu/~interran/3Dflow.html Victoria Interrante and Chester Grosch, U. Minnesota To Represent or Imitate Reality Illustrative Color www.bartleby.com/107/illus520.html Gray’s Anatomy of the Human Body Map of Point Reyes www.nps.gov To Enliven or Decorate 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 Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 16 Incidence of CVD Monochromacy - 0.003% Dichromacy • Protanopia 1% • Deuteranopia 1.1% • Tritanopia 0.002% Anomalous trichromacy • Protanomaly 1% • Deuteranomaly 4.9% • Tritanomaly - Total - 8.005% R. W. G. Hunt. Measuring Colour. Fountain Press,1998. Vischeck Simulates dichromatic color vision deficiencies • Web service or Photoshop plug-in • Robert Dougherty and Alex Wade Deuteranope Protanope Tritanope vischeck.com Smart Money iPhone Double encode: Shapes or textures www.iloveux.com Info424, UW iSchool 11/13/2007 Maureen Stone, StoneSoup Consulting 17 Similar colors are the real problem protanope deuteranope luminance 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