The Art of Colors

A few tips for user interface designers

by elisa giaccardi

Let’s warm up !

Let’s start with some basics

There are two color systems



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 .

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

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! .

Wasn’t it additive ? .

Web color wheel .

Do colors have personality ? .


What about this orange ? © Edward Burtynsky .

How about this yellow ? © Philip-Lorca diCorcia .

And what about this green ? © Cindy Sherman .

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

grouping. and emphasis • Relate visual elements • Demarcate different areas • Highlight important task-related information .Use color for identification.

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 .


Gabriel-Petit Color Theory for Digital Displays http://www.Itten. Johannes The Art of Color New York: John Wiley & .com/ Pabini.uxmatters. 1974 Pabini.uxmatters. Gabriel-Petit Applying Color Theory to Digital Displays http://www.

Slides available at .