The Art of Colors A few tips for user interface designers by elisa giaccardi [email_address]

Lets warm up !

Lets start with some basics

There are two color systems

Additive Subtractive red + green + blue = white magenta + yellow + cyan = black

UI designers use the additive system

What is this jargon ? hue brilliance saturation

• Hue

name and properties of a color that enables it to be perceived

• Brilliance

how light or dark a color is

• Saturation

the level and mixture of white , black , grey or complimentary included in colors

What are these ? primary secondary tertiary colors

Learn the color wheel

Another way to visualize

Another way to visualize

Primary colors

Secondary colors

Tertiary colors

Analogous colors

Opposite colors are complementary

Combinations of opposite or analogous colors are harmonic

Now you know the jargon too!

Wasnt it additive ?

Web color wheel

Do colors have personality ?

Edward Burtynsky What about this orange ?

Philip-Lorca diCorcia How about this yellow ?

Cindy Sherman And what about this green ?

Its about relationships

Dynamic relationship

Dynamic-static relationship

Static relationship

Its a matter of contrast

Its about balance

Think with your eyes !

Color palette tips & tools

Strive for harmony

Be mindful of contrast effects

Understand color dominance

Rules of thumb for UI designers

Ensure text readability through contrast

• Avoid the use of textures and pattern for backgrounds behind texts

• Avoid contrasts that cause eye fatigue

• Avoid color combinations that cause illusions when positioned together

Enhance user experience

• Establish conventions and use color consistently

• Use color both to support users tasks and for branding

• Use color to enhance aesthetic appeal and user satisfaction

Use color for identification, grouping, and emphasis

• Relate visual elements

• Demarcate different areas

• Highlight important task-related information

Use color associations in expressing state information

• Be consistent with job-related color associations

• Learn about cultural color associations

Indicate availability using color or value

• For links

• For controls

• For icons

• For windows

Some good readings

• Itten, Johannes

• The Art of Color

• New York: John Wiley & Sons, 1974

• Pabini, Gabriel-Petit

• Color Theory for Digital Displays

• http://www.uxmatters.com/

• Pabini, Gabriel-Petit

• Applying Color Theory to Digital Displays

• http://www.uxmatters.com/

Slides available at