Utilize the power of colors
to achieve maximum
“The whole world, as we experience it visually, comes
to us through the mystic realm of color.”
— Hans Hofmann, German artist
Colors have a very powerful and multi-level impact
on us. They can function in very practical ways
and help us to make sense of things, such as find
our way on a website. At the same time, they trigger
our emotions and influence the way we think and
feel. Colors are a powerful tool in Web design — if
you know how to use them.
Here I will introduce different semantic levels of
color, explain when you should make use of them,
and give some best practices of how to use colors
most effectively on the Web.
Six Semantic Levels of Color
Psychological meaning. For every color,
there is a psychological context in which it functions.
Colors arouse different emotions in us,
depending on our previous experiences and personal
These preferences are not linked to anything rational.
For example, my favorite color can be the
least favorite color of someone else at the same time.
Symbolic meaning. The symbolic function of a
color is similar to its psychological function, only
more abstract. Based on experiences, we build up associations
with different colors. While the psychological
aspect of a color just makes us feel something,
the symbolic function makes us feel something because
we link it to a significant experience.
Cultural context. Depending on the culture we
live in, colors are attached to different meanings.
Cultures teach us what colors stand for. These definitions
are shaped through different values, beliefs
The cultural context of colors is an important aspect
when using colors in an international and
multi-cultural environment. For example, Western
cultures associate the color white with purity. In
Asian cultures, mostly in China, the color white
stands for death.
Political meaning. Colors can be attached to political
opinions. As colors can have a symbolic function,
they can stand for concrete opinions.
Political parties use colors to identify themselves.
These colors come to stand not only for the organization,
but also for their political points of view, their
values and beliefs.
Traditional meaning. Colors have meanings
that are simply bound to their own tradition. Be it
that red is the color of blood, and therefore naturally
functions in an alerting way, or that blue used to be
expensive in production and therefore stands for
luxury and superiority.
Creative context. Last but not least, the impact
that colors have on us depends on the creative context
they are used in. In combination with each
other, colors change their function and significance.
They can become more or less dominant, more or
less intense, more or less meaningful.
When Do Colors Influence People?
On the Web, most information is presented to us in
a visual way. We come across audio recordings once
in a while, but most of the time we are confronted
Now imagine there was no color on the Internet
and that all websites were a mixture of black, white
and different shades of grey. How boring, right?
Colors on the Web have many functions. They
can make a design interesting and appealing, catch
our attention, help us to differentiate between
brands and products, and even influence what we
think of them. Colors influence us whenever any
kind of decision needs to be made.
Whether we exhaustively elaborate on a decision,
or make it based on inner instincts, we depend
on both factual information and our emotions. And
our emotions are highly color-sensitive.
When we use colors in Web design, we need
to be aware of their impact on our visitors and
we need to use them carefully in order to get the
most out of them.
How to Use the Power of Color
Colors influence not only how users perceive you,
but also how they act on your website and how they
react to what you offer them. There are some best
practices that will put you on the safe side and help
you to use colors to your advantage.
Colors and your target group. Define your
main target group and research what different colors
mean to them based on their symbolic, cultural and
political background. There are many studies that
have investigated the impact of colors on different
cultures. For example, the website www.informationisbeautiful.
net offers a very informative visualization
on the meaning of colors in different cultures.
Colors and your own image. Think of yourself
first and define what you want your users and customers
to think of you. Choose colors that represent
this image for your target group. The selection of
your basic colors can have a big impact on how people
will perceive you.
A color has many shades. Make sure the colors
you choose can be displayed correctly on any
digital device your users might use to visit your website.
While we can rely on Pantone to match all our
printed matters, online we depend on the inconsistent
display of RGB colors.
Colors can be overwhelming. It’s important
not to use too many different colors on your website
in order to avoid over-stimulation. Try to manage
with no more than three colors. The website
www.colorsontheweb.com suggests one primary,
one secondary and one highlight color.
Colors can be confusing. Use colors consistently.
As much as colors can work for you, they
can also work against you. And, if used inconsistently,
you can easily confuse your users rather
than support them in reaching their goals efficiently
Shades of Success
Colors have quite an impact on us and the decisions
we make. Colors differ in their meaning based on
their psychological, symbolic, cultural, political, traditional
and creative context. Colors play a central
role for our judgment and actions — especially in
visual environments like the Web.
Colors can be used for both aesthetic and practical
reasons. The aesthetic quality of your website
is high if people like your design, if they can identify
with your identity and if they remember you and
your message. The practical quality reveals if people
find what they are looking for on your website, and
if they perceive it as convenient and satisfying.
About the Author: Paul Veugen is the founder and CEO of Usabilla, a company
that builds Web-based tools to collect and share
design feedback. Usabilla’s visual surveys help marketers,
usability experts and designers collect visual
feedback on their websites, mobile websites or apps, and
are currently in use by more than 15,000 Web professionals
and globally recognized brands such as Warner,
EA, Discovery, U.S. President Barack Obama, Sony, The
N.Y. Times and Levi’s.