Using Color Effectively in Computer Graphics
Lindsay W. MacDonald
University of Derby, UK
Presented by:
Sally Divita & Brian Staats
Color calibration
Eye-onehttp://usa.gretagmacbethstore.com/
Gestalt laws
Color wheelhttp://webcolorschemes.com/
http://www.colorschemer.com/
Color Picker Demo
Advertising
Rules for color use are significantly different than for information displays
Advertising: Examples Billboards Multimedia Kiosks Product packaging Web site banners
Exhibition stands TV/video Print media
Advertising: 2 Phases
1. Attract Attention (<1 minute) Use pure primary and secondary colors
on a black background Fatigues the eye, can not sustain this
2. Persuade viewer to buy Use more balanced, subdued colors Take advantage of the emotions that colors elicit
(red=passion, green=nature, blue=peace, etc.)
Advertising: Browser Safe Colors In 1999 when the article was written, the
browser safe color palette was 216 colorshttp://www.lynda.com/hex.asp#
Today, there are 4096 web safe colors http://www.ficml.org/jemimap/style/color/wheel.html
Today, phones & PDA’s are 8 bit so the old web safe color palette is valid again
www.colorbrewer.org
Dithering is reducing colors to 216, see: http://webstyleguide.com/graphics/dither.html
TextLegibility is the most important aspect
Text: Legibility Black text on light gray background is best
for word processors
Other good alternatives: black or blue on white or yellow or vice versa
Particularly bad: combos using red, green, andmagenta cause “vibrations”
Text: Legibility continued
Avoid large areas of white screenGlare is fatiguing Increases chance of flickering in peripheryReduces life of display
is a good differentiator
14 point font is suggested
Highlighting
Information
Color can increase information contentand facilitate interpretation
Information: Factors of Successful Color Use
Discernibility – how easy is it to distinguish an object from its background?
Conspicuity – how obvious is the object relative to the objects around it?
Salience – how well does the object “pop” from the overall display?
Information: Color Coding Nominal
Colors assigned to parts/states of systemDoes not indicate difference in value/orderEXAMPLE: Metro map with colored lines
OrdinalColor indicates value of 1+ variablesEXAMPLE: heatmap
Information: Constraints on Color Coding Usage
Observer’s ability to discriminate different colors
Observer’s ability to remember meanings of colors
Ergo, limit number of colors used to 5 - 7
Information: Advice
Use common or application-specific associations for ordinal coding
Include a color key
Use transparency to overlay information
Use strong colors sparingly on dull background tones
Visualization
Definition: Bringing out the meaning of data by providing graphics that help
communicate knowledge
Visualization: Color Usage
Emphasize desired information
Render an environment
Visualization: Advice
Do not use colors that do NOT add or support meaning, as this causes confusion
Try Foobar... You'll never go back to your old one again !
Visualization: Advice Saturation can relate depth
EXAMPLE: color coding planes on radar
For modeling, use only enough color to be realistic
Monitoring applications are enhanced by use of color to indicate changes in state, reserving strong colors for alarms
Imaging
Definition: Imaging displays are predominantly 1+ photorealistic images
Imaging: Advice Background neutral gray to prevent
undesirable side effects Light backgrounds make images look
darker and lower in contrast and vice versa. Text captions should be black or white Narrow white border around an image
helps isolate it and makes for more accurate color judgement
Imaging: Reproduction
Consider: The source:
The mediumHow it was digitizedHow it was encoded
The characteristics of the display Reproduction objectives
Imaging: Reproduction Problems If some variables of reproduction are
unknown, reproduction is error prone
Computers don’t provide high-quality color management capabilities for calibration
International Color Consortium (ICC) is working on resolutions www.color.org
Summary
Many factors effect color in computer graphics,
so there is a large variance
in how color is perceived
Summary: Viewing Factors
Type of display Viewing environment Visual capabilities of user Task/application requirements Relation to other displays
Summary: 5 Golden Rules
1. Consider user requirements and established expectations
2. Adhere to conventions for a domain
3. Consider all visual characteristics when designing screens
4. Use color consistently within an application
5. Use color sparingly
Article Comments
Very well written and organized – each section has practical “Color Selection Guidelines” to provide advice as to how to implement what has been discussed
Thoroughly researched
Excellent examples and supporting graphics
Color Picking Tools http://www.webweaver.nu/color.shtml
color combo suggestions color palette generator based on an image color wheel web safe colors RGB to hex converter
http://www.colorblender.comfor mixing your own blends of colors
http://tips.webdesign10.com/color-and-web-design
named colors