Color : Color
Acknowledgements : Acknowledgements The presentations and assignments have been develop by the Georgia Tech HCI faculty over a period of years, and continue to evolve. Contributors include:
Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, Bruce Walker
Feedback is most welcome!
Agenda : Agenda How to characterize
How? When? Why? of use
Searching and highlighting
Color palettes
Color contrast
Color associations
Characterizing Color - HSV Model : Hue
basic color, pigment
Saturation
relative purity, brightness, or intensity of a color
Value
lightness or darkness of a color
Most commonly-used model
Characterizing Color - HSV Model Image from: Adventures in HSV Space, Darrin Cardani, dcardani@buena.com
HSV Color Model : Hue
Wavelength (red, green, yellow, blue)
Spectrum (VIBGYOR)
Saturation
Pastel versus strong (baby blue, sky blue, royal blue)
Value
amount of energy (white, light gray, dark gray, black)
Usually V = 0.299*R + 0.587*G + 0.114*B HSV Color Model
HSV Color Space : HSV Color Space Typical color selection tools
Color – Reflected and Emitted : Color – Reflected and Emitted We see the world via reflected color: light strikes a surface and is reflected to our eyes – properties of surface dictate color (printers, objects)
Subtractive color model - Cyan Magenta Yellow primaries
Colors on CRT are emitted: light is generated by phosphors and emitted
Additive color model - Red Green Blue primaries
Color : Color Monitors typically work on the RGB scheme
0–255 value each red, green, blue
Brightness is typically 0.299*R + 0.587*G + 0.114*B
R: 170 G:43 B: 211
Color : Color Use it for a purpose, not to just add some color in
Your Screen? : Your Screen?
Color Guidelines : Color Guidelines Use color sparingly – design in b/w then add color where appropriate
Thus use color as a redundant code
Helps color-blind users
For monochrome displays (not too many left :)
Use color to:
Draw attention
Facilitate searching
Communicate organization
Indicate status
Establish relationships
Color Guidelines : Color Guidelines Display color images on a black, white, or gray background
Be sure foreground colors contrast (in both brightness and hue) with background colors
Avoid using color in non-task related ways
How many small ovals? : How many small ovals?
Now how many small ovals? : Now how many small ovals?
Visual Exercise : Visual Exercise How many small objects?
How many rectangles?
How many orange objects?
How Many Small objects? : How Many Small objects?
How Many Rectangles? : How Many Rectangles?
How Many Orange objects? : How Many Orange objects?
Visual Exercise : Visual Exercise Find the red letter
Find the ‘A’
Find the Red Letter; Find the ‘A’ : Find the Red Letter; Find the ‘A’ V R Z M F G Q J C T D W W P K V L H I N E B S U O X Y V R Z M F G Q J C T D W A P K V L H I N E B S U O X Y R Z D K S W V S X
Find the Q and Z : Find the Q and Z V R Z M F G Q J C T D W A P
Color Meanings: Contextually Specific : Yellow
happy, caution, joy
Brown
warm, fall, dirt, earth
Green
go, on, safe, envy, lush, pastoral
Purple
royal, sophisticated, Barney Color Meanings: Contextually Specific Red
aggression, love
hot, warning, stop, radiation
Pink
female, cute, cotton candy
Orange
warm, autumn, Halloween
Blue
cold, off
Color Meanings: Culturally Specific : Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htm
Searching and Color : Searching and Color Search for a particular item on a display
Color generally faster
Shapes (60%)
Size (40%)
Brightness (40%)
Alpha characters (40%)
Letters (10%)
Score = Achromatic search time – color search time
Achromatic search time
An initial decrease in search time occurs as the first few colors are used, but then search times go up as more colors are added.
Accuracy and Color Coding : Accuracy and Color Coding Color is more accurate than some alternatives for coding:
Shape (202%)
Size (176%)
Intensity (32%)
Christ, R., “Review & Analysis of Color Coding for Visual Display,” Human Factors, 17(6), 1975, pp. 542-570.
Accuracy and Color Coding : Accuracy and Color Coding Redundant coding increases discrimination
Red triangle
Green square
Viewer cues on either code, results are:
Brightness & color (104%)
Size & brightness & color (61%)
Size & color (60%)
Score = Redundant – Color Only
Color Only
Color Guidelines : Color Guidelines To express difference, use high contrast colors (and vice versa)
Make sure colors do not “vibrate” These colors vibrate: they will give you a headache
Color Palettes : Color Palettes Color palette – set of colors used on one screen
Choose color palette from HSV space by varying and two of H, S, and V.
Don’t vary hue, saturation and brightness at the same time.
Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screen
Color Palettes/Suites : Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)
Color Palettes : Color Palettes Use of pastels and primaries
Varyies all of hue, saturation and value
Color Palettes : Color Palettes Redesign increased saturation of blue
All colors are primary
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Black text on white
Gray text on white
Yellow text on white
Light yellow text on white
Green text on white
Light green text on white
Blue text on white
Pale blue text on white
Dark red text on white
Red text on white
Rose text on white
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Black text on red
Gray text on red
Yellow text on red
Light yellow text on red
Green text on red
Light green text on red
Blue text on red
Pale blue text on red
Dark red text on red
Red text on red
Rose text on red
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Black text on dark blue
Gray text on dark blue
Yellow text on dark blue
Light yellow text on dark blue
Green text on dark blue
Light green text on dark blue
Blue text on dark blue
Pale blue text on dark blue
Dark red text on dark blue
Red text on dark blue
Rose text on dark blue
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Also important when colored text is shown on gray scale monitors
Exact effect depends on mapping of colors to intensities. Normally is close to
0.299*R + 0.587*G + 0.114*B
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Not enough contrast between blue text and grey, textured background
Inconsistency may cause user to puzzle over icons being different sizes
Effect of Colored Text on Colored Background : Effect of Colored Text on Colored Background Substituted black text for blue
Increased contrast Match your interest, find out what’s new online, discover our most loved services, and make your time online fun and informative. Start by clicking on “A Letter from Steve”, and come back to explore the other areas featured here.