Transcript Using Color Effectively in Computer Graphics

Using Color
Effectively in
Computer Graphics
Lindsay W. MacDonald
University of Derby, UK
Presented by:
Sally Divita & Brian Staats
Color calibration
Eye-one
http://usa.gretagmacbethstore.com/
Gestalt laws
http://webcolorschemes.com/
http://www.colorschemer.com/
Color wheel
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 colors
http://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
Text
Legibility 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, and
magenta cause
“vibrations”
Text: Legibility continued

Avoid large areas of white screen
 Glare
is fatiguing
 Increases chance of flickering in periphery
 Reduces life of display
 Highlighting

is a good differentiator
14 point font is suggested
Information
Color can increase information content
and 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 system
 Does not indicate difference in value/order
 EXAMPLE: Metro map with colored lines

Ordinal
 Color
indicates value of 1+ variables
 EXAMPLE: 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
medium
 How it was digitized
 How 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.
2.
3.
4.
5.
Consider user requirements and established
expectations
Adhere to conventions for a domain
Consider all visual characteristics when designing
screens
Use color consistently
within an application
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.com
for mixing your own blends of colors

http://tips.webdesign10.com/color-and-webdesign
named colors