Using Color Effectively in Computer Graphics

Document Sample
Using Color Effectively in Computer Graphics Powered By Docstoc
					           Using Color
           Effectively in
           Computer Graphics
Lindsay W. MacDonald
University of Derby, UK

                               Presented by:

           Sally Divita & Brian Staats
       Color calibration

Gestalt laws
  Color wheel

 Color Picker Demo

Rules for color use are significantly different
        than for information displays
    Advertising: Examples
   Billboards
   Multimedia Kiosks
                           Exhibition stands
   Product packaging      TV/video
   Web site banners       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

   Today, there are 4096 web safe colors

   Today, phones & PDA’s are 8 bit so the
    old web safe color palette is valid again

Dithering is reducing colors to 216, see:
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
    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

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
     Colorsassigned 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

   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
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

   Monitoring applications are enhanced by
    use of color to indicate changes in state,
    reserving strong colors for alarms

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
 The source:
     Themedium
     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

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
2.   Adhere to conventions for a domain
3.   Consider all visual characteristics when designing
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
        color combo suggestions
        color palette generator based on an image
        color wheel
        web safe colors
        RGB to hex converter

        for mixing your own blends of colors

        named colors

Shared By: