cpsc 583 colour · – quick response – critical information and conditions – memorized – 5-7...
TRANSCRIPT
![Page 1: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/1.jpg)
CPSC 583Colour
Sheelagh Carpendale
![Page 2: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/2.jpg)
References• Colin Ware. (2004) Information Visualization: Perception for
Design. Morgan Kaufmann.• Maureen Stone. (2003) A field guide to digital color. AK Peters• Bernice E. Rogowitz and Lloyd A. Treinish. (1996) How Not to
Lie with Visualization. Computers In Physics 10(3), pp 268-273. http://www.research.ibm.com/dx/proceedings/pravda/truevis.htm
• C. Brewer. (1999) Color use guidelines for data representation. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/ASApaper.html
• Andrew Glassner (1995) Principles of Digital Image Synthesis. Morgan Kaufmann Publishers.
![Page 3: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/3.jpg)
Effective Colour
Materials
Aesthetics
Perception
Illustrators, cartographersArtists, designers
A few scientific principles
From: M. Stone
![Page 4: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/4.jpg)
What is Colour?
Physical World Visual System Mental Models
Lights, surfaces, objects
Eye, optic nerve, visual
cortex
Red, green, brown
Bright, light, dark, vivid, colorful, dull
Warm, cool, bold, blah, attractive, ugly,
pleasant, jarring
Perception and Cognition
From: M. Stone
![Page 5: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/5.jpg)
Physical World• Spectral Distribution
– Visible light– Power vs. wavelength
• Any source– Direct– Transmitted– Reflected– Refracted
From A Field Guide to Digital Color, © A.K. Peters, 2003
![Page 6: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/6.jpg)
Colour The Retina
photoreceptors: rods and cones
neurons (receptive fields): intermediate neural layers – image processing
http://school.discovery.com/homeworkhelp/worldbook/atozpictures/lr001100.html
http://www.ccrs.nrcan.gc.ca/ccrs/eduref/sradar/chap2/c2p2_g2e.html
![Page 7: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/7.jpg)
Cone Response
• Encode spectra as three values– Long, medium and short (LMS)– Trichromacy: only LMS is “seen”– Different spectra can “look the same”
From A Field Guide to Digital Color, © A.K. Peters, 2003
![Page 8: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/8.jpg)
Effects of Retinal Encoding
All spectra that stimulate the same cone responseare indistinguishable
Metameric match
![Page 9: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/9.jpg)
http://www.cs.brown.edu/exploratories/freeSoftware/repository/edu/brown/cs/exploratories/applets/spectrum/metamers_guide.html
• [PDF] Elements of Color Perception - Metamerism
![Page 10: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/10.jpg)
Chromaticity Diagram
![Page 11: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/11.jpg)
RGB Chromaticity• R,G,B are points (varying lightness)• Sum of two colors lies on line• Gamut is a triangle
– White/gray/blacknear center
– Saturated colorson edges
![Page 12: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/12.jpg)
Display Gamuts
From A Field Guide to Digital Color, © A.K. Peters, 2003
![Page 13: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/13.jpg)
Projector Gamuts
From A Field Guide to Digital Color, © A.K. Peters, 2003
![Page 14: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/14.jpg)
Opponent Colour
• Definition– Achromatic axis– R-G and Y-B axis– Separate lightness from chroma channels
• First level encoding– Linear combination of LMS– Before optic nerve– Basis for perception– Defines “color blindness”
![Page 15: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/15.jpg)
Colour Blindness
• Simulates color vision deficiencies– Web service or Photoshop plug-in– Robert Dougherty and Alex Wade
• www.vischeck.com
Deuteranope Protanope Tritanopehttp://www.vischeck.com/examp
![Page 16: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/16.jpg)
http://colorvisiontesting.com
normal
protanope
deuteranope
tritanope
Colour Blindness
![Page 17: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/17.jpg)
Genes in Vischeck
![Page 18: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/18.jpg)
2D Colour Space
![Page 19: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/19.jpg)
![Page 20: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/20.jpg)
Smart Money
![Page 21: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/21.jpg)
small-field tritanopia
Colour Blindness
![Page 22: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/22.jpg)
Colour Addition• computer monitors• red, green, and blue • absence all three colors gives black, • all three gives white.
Colour Subtraction• printers ink• cyan, magenta, and yellow • absence all three colors gives white, • all three gives black.
![Page 23: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/23.jpg)
Colour Paint
primary
secondary
tertiary
![Page 24: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/24.jpg)
Perceptual Color Spaces
Lightness
Hue
Colorfulness
Unique black and whiteUniform differences
Perception & design
![Page 25: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/25.jpg)
Munsell Atlas
Courtesy Gretag-Macbeth
![Page 26: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/26.jpg)
Color Appearance
![Page 27: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/27.jpg)
Color Appearance
![Page 28: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/28.jpg)
• colour constancy• colour perception
![Page 29: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/29.jpg)
Color Appearance
• More than a single color– Adjacent colors (background)– Viewing environment (surround)
• Appearance effects– Adaptation– Simultaneous contrast– Spatial effects
• Color in contextColor Appearance Models
Mark Fairchild
surround
background
stimulus
![Page 30: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/30.jpg)
Simultaneous Contrast
• Add Opponent Color– Dark adds light– Red adds green– Blue adds yellow
These samples will have both light/dark and hue contrast
![Page 31: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/31.jpg)
Bezold Effect
http://web.missouri.edu/~hoarda/colortheory/Syllabus/Projects/Bezold_Effect/bezold_effect.
![Page 32: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/32.jpg)
http://web.missouri.edu/~hoarda/colortheory/Syllabus/Projects/Bezold_Effect/bezold_effect.html
http://www.sapdesignguild.org/resources/optical_illusions/contrast_phenomena.html
![Page 33: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/33.jpg)
![Page 34: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/34.jpg)
Spreading
• Spatial frequency– The paint chip
problem– Small text, lines,
glyphs– Image colors
• Adjacent colors blendRedrawn from Foundations of Vision© Brian Wandell, Stanford University
![Page 35: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/35.jpg)
What makes colour effective?• “Good ideas executed with superb craft”
—E.R. Tufte
• Effective colour needs a context– Immediate vs. studied– Anyone vs. specialist– Critical vs. contextual– Culture and expectations– Time and money
![Page 36: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/36.jpg)
Why Should You Care?
• Poorly designed colour is confusing– Creates visual clutter– Misdirects attention
• Poor design devalues the information– Visual sophistication– Evolution of document and web design
• “Attractive things work better”—Don Norman
![Page 37: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/37.jpg)
Information Display• Graphical presentation of information
– Charts, graphs, diagrams, maps, illustrations– Originally hand-crafted, static
• Now computer-generated, dynamic
• Colour is a key component– Colour labels and groups– Colour scales (colourmaps)– Multi-variate colour encoding– Colour shading and textures– And more…
www.nps.gov
![Page 39: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/39.jpg)
Colour Design• Goals
– Highlight, emphasize– Create regions, group– Illustrate depth, shape– Evoke nature– Decorate, make beautiful
• Colour harmony“…successful color combinations, whether these please the eye by using analogous colors, or excite the eye with contrasts.”
–Principles of Color Design, by Wucius Wong
![Page 40: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/40.jpg)
Colour Design Terminology• Hue (colour wheel)
– Red, yellow, blue (primary)– Orange, green, purple (secondary)– Opposites complement (contrast)– Adjacent are analogous– Many different colour wheels*
• *See www.handprint.com for examples• Chroma (saturation)
– Intensity or purity– Distance from gray
• Value (lightness)– Dark to light– Applies to all colours, not just gray
![Page 41: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/41.jpg)
Tints and Tones
• Tone or shade– Hue + black– Decrease saturation– Decrease lightness
• Tint– Hue + white– Decrease saturation– Increase lightness
![Page 42: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/42.jpg)
Colour
Hi-Key/Low Key Colours – choosing a value range–another way to unify
Hi-Key colour schemes –tints of colours (paler)–bright, cheerful.
Low-Key colour scheme. –Shades (tones) of colours (darker)–subdued gloomy mysterious
![Page 43: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/43.jpg)
Gradations
![Page 44: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/44.jpg)
ColourColour Triads• color scheme composed of three colours spaced equally apart on the colour wheel• tend to be uncomfortable• good visual distinction• Primary colours form one triad – ( red, blue, yellow).
• Secondary colours – (orange, green, purple)
![Page 45: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/45.jpg)
Maximum hue separation
![Page 46: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/46.jpg)
Colour
Analogous Colours–colours next to each other on the colour wheel with a common hue
–the common hue creates a feeling of unity in the design
![Page 47: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/47.jpg)
Analogous, yet distinct
![Page 48: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/48.jpg)
Colour
Complementary Colors–Complementary colors are opposite each other on the color wheel
–two pure complementary hues placed next to each other attract attention
![Page 49: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/49.jpg)
Colour
Split Complements• two colors on either side of its complement are used together. • similar to complementary colors• offers a little more variety to work with
![Page 50: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/50.jpg)
Colour
Warm and Cool Colours• two specific sets of analogous colours. Cool–blue, green and purple–cold, icy feeling
Warm–red, orange and yellow –warm, sunny feeling.
When used together–cool colours seem to move away
– warm colours move towards
![Page 51: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/51.jpg)
Colour
Monochromatic Colors– shades, tints and tones of only one color. – causes an immediate unifying or harmonious effect.
– all parts of the design have something in common,
– pulls it all together.
![Page 52: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/52.jpg)
Sequential
![Page 53: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/53.jpg)
![Page 54: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/54.jpg)
Colouring categorical data– limited number readily distinct (spatially separate colour patches)
– think about selection, association, and adjacent distinction
–Ware’s maximally discriminable colours
![Page 55: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/55.jpg)
Colour Design Principles• Control value (lightness)
– Ensure legibility– Avoid unwanted emphasis
• Use a limited hue palette– Control colour “pop out”– Define colour grouping– Avoid clutter from too many competing colours
• Use neutral backgrounds– Control impact of colour– Minimize simultaneous contrast
![Page 56: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/56.jpg)
Envisioning Information
“… avoiding catastrophe becomes the first principle in bringing color to information:Above all, do no harm.”
—E. R. Tufte
www.edwardtufte.com
![Page 57: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/57.jpg)
Fundamental Uses
• To label• To measure• To represent or to imitate reality• To enliven or decorate
![Page 58: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/58.jpg)
To Label
![Page 59: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/59.jpg)
Colour Cross-cultural naming
Appearance of colour names in languages around the world (Berlin and Kay 1969)
![Page 60: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/60.jpg)
Colour Opponent Process Theory - continued
Many lines of scientific evidence worth examining
• Naming
• Cross-Cultural naming
• Unique Hues
• Neurophysiology
• Categorical colours
![Page 61: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/61.jpg)
Color Names
• Basic names (Berlin & Kay)– Linguistic study of names– Similar names– Similar evolution– Many different languages
blackwhitegray
redgreenblue
yellow
orangepurplebrownpink
Perceptual primaries
Distinct colors = distinct names?
![Page 62: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/62.jpg)
Distinct, but hard to name
![Page 63: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/63.jpg)
Color Names Research• Selection by name
– Berk, Brownston & Kaufman, 1982– Meier, et. al. 2003
• Image recoloring– Saito, et. al.
• Labels in visualization– D’Zmura, Cowan (pop out conditions)– Healey & Booth (automatic selection)
• Web experiment– Moroney, et. al. 2003
• World Colour Survey (Kay & Cook)– http://www.icsi.berkeley.edu/wcs/
![Page 64: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/64.jpg)
Identify by Color
Information VisualizationColin Ware
![Page 65: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/65.jpg)
Product Categories
Created by Tableau - Visual Analysis for DatabasesTM
![Page 66: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/66.jpg)
Categorizing data by colour
22 colours, only ~8 distinguishable
![Page 67: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/67.jpg)
Categorizing data by colour
22 colours, only ~8 distinguishable
![Page 68: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/68.jpg)
Grouping, Highlighting
![Page 69: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/69.jpg)
Considerations for Labels• How critical is the colour encoding?
– Unique specification or is it a “hint”?– Quick response, or time for inspection?– Is there a legend, or need it be memorized?
• Contextual issues– Are there established semantics?– Grouping or ordering relationships?– Surrounding shapes and colours?
• Shape and structural issues– How big are the objects? – How many objects, and could they overlap?– Need they be readable, or only visible?
![Page 70: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/70.jpg)
Controls and Alerts• Aircraft cockpit design
– Quick response– Critical information and conditions– Memorized– 5-7 unique colors, easily distinguishable
• Highway signs– Quick response– Critical but redundant information– 10-15 colors?
• Typical color desktop– Aid to search– Redundant information– Personal and decorative– How many colors?
![Page 71: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/71.jpg)
Psychophysics of Labeling
13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465485690
Time proportional to the number of digits
13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690
Time proportional to the number of 7’s
13579345978274055249379164782541372387659727710386619874367259047362956372836491056763254378795483675456840378465785690
Both 3’s and 7’s“Pop out”
• Preattentive, “pop out”
![Page 72: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/72.jpg)
Contrast Creates Pop-out
Hue and lightness Lightness only
![Page 73: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/73.jpg)
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
![Page 74: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/74.jpg)
To Measure
![Page 75: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/75.jpg)
Heat maps
![Page 76: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/76.jpg)
Data to Color• Types of data values
– Nominal, ordinal, numeric– Qualitative, sequential, diverging
• Types of color scales– Hue scale
• Nominal (labels)• Cyclic (learned order)
– Lightness or saturation scales• Ordered scales• Lightness best for high frequency• More = darker (or more saturated)• Most accurate if quantized
![Page 77: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/77.jpg)
Color Scales• Long history in graphics and visualization
– Ware, Robertson et. al– Levkowitz et. al– Rheingans
• PRAVDA Color– Rogowitz and Treinish– IBM Research
• Cartography– Cynthia Brewer – ColorBrewer
![Page 78: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/78.jpg)
Colour scales (maps)
Rainbow (hue)- No ordering- Good name space
Greyscale/luminance/saturation- ordered
http://www.research.ibm.com/dx/proceedings/pravda/index.htm
http://www.research.ibm.com/visualanalysis/perception.html
![Page 79: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/79.jpg)
Rainbow scale- No ordering - Good name space (green part, yellow part ….)- Jet engine noise simulation
http://www.research.ibm.com/dx/proceedings/pravda/index.htm
http://www.research.ibm.com/visualanalysis/perception.html
![Page 80: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/80.jpg)
Two-Hue scale
- Easier to see small variations
http://www.research.ibm.com/dx/proceedings/pravda/index.htm
http://www.research.ibm.com/visualanalysis/perception.html
![Page 81: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/81.jpg)
Heat scale
- Ordering? (Surface Magnetic Field)
http://www.research.ibm.com/dx/proceedings/pravda/index.htm
http://www.research.ibm.com/visualanalysis/perception.html
![Page 82: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/82.jpg)
Heat scale
- Ordering? (Surface Magnetic Field)
http://www.research.ibm.com/dx/proceedings/pravda/index.htm
http://www.research.ibm.com/visualanalysis/perception.html
![Page 83: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/83.jpg)
Different Scales
Rogowitz & Treinish, “How not to lie with visualization”
![Page 84: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/84.jpg)
Density Map
Lightness scale
Lightness scalewith hue and
chroma variationHue scale with
lightness variation
![Page 85: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/85.jpg)
Phase Diagrams (hue scale)
The optical singularities of bianisotropic crystals, by M. V. Berry
Singularities occur where all colors meet
![Page 86: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/86.jpg)
Phases of the Tides
Figure 1.9. Cotidal chart. Tide phases relative to Greenwich are plotted for all the world’s oceans. Phase progresses from red to orange to yellow to green to blue to purple. The lines converge on anphidromic points, singularities on the earth’s surface where there is no defined tide. [Winfree, 1987 #1195 , p. 17].
![Page 87: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/87.jpg)
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”
![Page 88: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/88.jpg)
Thematic MapsUS Census Map
Mapping Census 2000: The Geography of U.S. Diversity
![Page 89: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/89.jpg)
Brewer’s Categories
Cynthia Brewer, Pennsylvania State University
![Page 91: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/91.jpg)
Colour and Shading
• Shape is defined by lightness (shading)• “Colour” (hue, saturation) labels
Image courtesy of Siemens
CT image (defines shape) PET color highlights tumor
![Page 92: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/92.jpg)
Colour Overlay (Temperature)3D line integral convolution to visualize 3D flow (LIC).Colour varies from red to yellow with increasing temperature
http://www-users.cs.umn.edu/~interran/3Dflow.html
Victoria Interrante and Chester Grosch, U. Minnesota
![Page 93: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/93.jpg)
Multivariate Colour Sequences
![Page 94: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/94.jpg)
Multi-dimensional Scatter plot
• Variable 1, 2 → X, Y• Variable 3, 4, 5 → R, G, B
Using Color Dimensions to Display Data Dimensions
Beatty and WareDo people interpret colour blends as sums of variables?
![Page 95: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/95.jpg)
Colour Weaves6 variables = 6 hues, which vary in brightness
Additive mixture (blend) Spatial texture (weave)
Weaving versus Blending (APGV06 and SIGGRAPH poster)Haleh Hagh-Shenas, Victoria Interrante, Christopher Healey and Sunghee Kim
![Page 96: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/96.jpg)
Brewer System
http://www.colorbrewer.org
![Page 97: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/97.jpg)
Brewer Examples
![Page 98: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/98.jpg)
To Represent orImitate Reality
![Page 99: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/99.jpg)
Illustrative Color
www.bartleby.com/107/illus520.htmlGray’s Anatomy of the Human Body Map of Point Reyes
www.nps.gov
![Page 100: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/100.jpg)
ThemeView (original)
Courtesy of Pacific Northwest National Laboratories
![Page 102: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/102.jpg)
To Enliven or Decorate
![Page 103: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/103.jpg)
Visualization of isoelectron density surfaces around molecules
Marc Levoy (1988)
Which has more information?Which would you rather look at?
![Page 104: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/104.jpg)
More Tufte Principles
• Limit the use of bright colors– Small bright areas, dull backgrounds
• Use the colors found in nature– Familiar, naturally harmonious
• Use grayed colors for backgrounds– Quiet, versatile
• Create color unity– Repeat, mingle, interweave
![Page 105: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/105.jpg)
Controlling Value
![Page 106: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/106.jpg)
Get it right in black & white
• Value– Perceived lightness/darkness– Controlling value primary rule for design
• Value defines shape– No edge without lightness difference– No shading without lightness variation
• Value difference (contrast)– Defines legibility– Controls attention– Creates layering
![Page 107: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/107.jpg)
Controls Legibility
colorusage.arc.nasa.gov
![Page 108: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/108.jpg)
Legibility
Drop Shadows
Drop ShadowDrop shadow adds edge Primary colors on black
Primary colors on black
Primary colors on blackPrimary colors on blackPrimary colors on blackPrimary colors on black
Primary colors on whitePrimary colors on white
Primary colors on whitePrimary colors on whitePrimary colors on whitePrimary colors on white
![Page 109: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/109.jpg)
ReadabilityIf you can’t use color wisely,it is best to avoid it entirelyAbove all, do no harm
If you can’t use color wisely, it is best to avoid it entirelyAbove all, do no harm.
![Page 110: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/110.jpg)
Why does the logo work?
![Page 111: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/111.jpg)
Value Control
![Page 112: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/112.jpg)
Legibility and Contrast• Legibility
– Function of contrast and spatial frequency– “Psychophysics of Reading” Legge, et. al.
• Legibility standards– 5:1 contrast for legibility (ISO standard)– 3:1 minimum legibility– 10:1 recommended for small text
• How do we specify contrast?– Ratios of foreground to background luminance– Different specifications for different patterns
![Page 113: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/113.jpg)
Contrast and Layering
Context
Context
Normal
Normal
UrgentContext
Context
Normal
Normal
Urgent Context
Context
Normal
Normal
Urgent
colorusage.arc.nasa.gov
• Value contrast creates layering
![Page 114: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/114.jpg)
What Defines Layering?• Perceptual features
– Contrast (especially lightness)– Color, shape and texture
• Task and attention– Attention affects perception
• Display characteristics– Brightness, contrast, “gamma”
Emergency
Emergency
Emergency
![Page 115: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/115.jpg)
Grid Example
Grid sits unobtrusively in the background Grid sits in foreground, obscuring map
Great Grids: How and Why? (APGV06 and SIGGRAPH poster)Maureen Stone, Lyn Bartram and Diane Gromala
![Page 116: CPSC 583 Colour · – Quick response – Critical information and conditions – Memorized – 5-7 unique colors, easily distinguishable • Highway signs – Quick response –](https://reader035.vdocument.in/reader035/viewer/2022071407/60ff1751c3ca4b34507018c7/html5/thumbnails/116.jpg)
Additional Resources
•Maureen Stone’s website– http://www.stonesc.com/Vis06
•A Field Guide to Digital Color– A.K. Peters