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