The Art Of Colors

of 55 /55
The Art of Colors A few tips for user interface designers by elisa giaccardi [email protected]



Transcript of The Art Of Colors

The Art of ColorsA few tips for user interface designers

by elisa [email protected]

Let’s warm up !

Let’s 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 ?


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

Brilliancehow lightor darka color is

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


What are these ? primary


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!

Wasn’t 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 ?

It’s about relationships

Dynamic relationship

Dynamic-static relationship

Static relationship

It’s a matter of contrast

It’s about balance

Think with your eyes !

Color palette tips & tools

Strive for harmony

Be mindful of contrast effects

Understand color dominance

Rules of thumbfor 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, JohannesThe Art of ColorNew York: John Wiley & Sons, 1974

Pabini, Gabriel-PetitColor Theory for Digital Displays

Pabini, Gabriel-PetitApplying Color Theory to Digital Displays

Slides available at