COLOR PSYCHOLOGY IN

WEB DESIGN BIG

WEBSITES CASE STUDIES
BY ADRIANA IN DESIGN ON MAY 25, 2011 8 COMMENTS

I think its no secret that colors have the ability of influencing people through psychological changes and that
they are highly associated by viewers with certain emotions and meanings. Wherever we look, we see colors!
But in this busy everyday life, he hardly stop to analyze the purpose of that color we take it as it is, but we
unconsciously associate it with an emotion.

Today we will talk about the use of colors in website designs. When we say web design, we are thinking of
backgrounds, navigation, logos, buttons and all the graphics the visitors encounter at their first glimpse on a
website page.
Usually, the purpose of a website is to sell something, to get the visitor interested, to satisfy his information need
and to make him come back. When youre on the Internet, you dont get to be face to face with your buyer or
your visitor, so you dont have the chance to apply the strategy of face to face selling. The Internet is a visual
and psychological medium, so you have to transmit the information differently. The copy of the website has by
far the biggest psychological impact on the visitor so it becomes the most important communication tool for you.

As you may have expected, the primary color in the Coca Cola website design is red, the background is light
gray and white which it gives it a better visibility and contrast. Red is color associated with the feelings of
excitement and energy and the happiness promotion goes hand in hand with this color.
Choosing the right colors is a very important aspect when creating a website, because the colors and the graphics
are the first thing your visitor sees. Meaning, the background color, the color of the header, the color of the text,
the headlines all have a psychological impact on the websites visitor.

The IBM website has a very professional color scheme which includes colors like blue, gray and white. The cool
colors give the website a serious, business aspect, creating an impression of seriousness and professionalism.
Needless to say that any designer should know quite a bit about the psychology of colors and the way a color or
a certain combination of colors instinctively influences the visitors first impression.

You will find on the web all sort of lists with universal color associations, but that doesnt mean that there cant
be any exceptions you will also find personal color schemes, as well as color associations with obvious cultural
influences. In that regard, the first question you need to answer when you are choosing a color is What is my
target audience?. If the answer is your target audience is international, the following step is to turn to universal
color associations.

The reason Im saying this, is that some cultures have different symbolism and association of colors and you
have to consider this aspect when creating a website design for a specific audience. For example, many Russian
people may still have a negative association with the color red, as a symbol of Communism; white portrays
purity in Western culture, but its a symbol of death in some Eastern cultures; yellow signifies sadness in Greece,
jealousy in France but is sacred to the Chinese.

McDonalds is widely recognized by the colors red and yellow in its logo. The website also keeps these colors,
the predominant color in the MC website design being red, a color that suggests excitement and is commonly
used in the fast food industry as it makes the people eat faster. To give it a serious, formal note, we will also find
in the color scheme some black, light gray and white.
You may already know that all the colors are divided into two basic categories or groups: the colors in the red
area of the color spectrum are also known as warm colors (such as red, orange and yellow) and the colors you
find in the blue area are also known as cool colors (such as blue, purple and green). While the warm colors
evoke emotions which range from warmth, comfort and coziness to aggression and anger, the cool colors
describe feelings from calmness and tranquility to sadness and indifference.

Colors are seen as warm or cool mainly because of long-held (and often universal) associations. Yellow,
orange and red are associated with the heat of sun and fire; blue, green and violet with the coolness of leaves,
sea and the sky. Warm colors seem closer to the viewer than cool colors, but vivid cool colors can overwhelm
light and subtle warm colors. Using warm colors for foreground and cool colors for background enhances the
perception of depth.
Source: Pantone, Inc.

TYPE OF PSYCHOLOGICAL EMOTIONS

EACH COLOR INVOKES:
Red is mostly associated with love, passion, excitement, danger, action, warning, adventure, desire, impulse,
heat, fire, stop, anger and intensity.
Orange is most commonly associated with comfort, warmth, creativity, fun, youth, enthusiasm, celebration and
in website designs, this color is also associated with affordability.

The color scheme on the Orange website includes orange (obviously), gray and white. The orange present in the
logo of the company is also present in some elements of the page, giving it a creative and energy feel, while the
gray gives it a more serious and professional note.
Yellow its an attention grabber, it suggests warmth and its associated with liveliness, energy, curiosity, joy,
playfulness, optimism, sunlight, gold, idealism, but it can also create feelings of frustration, anger and illness.
Its a fatiguing color to the eye, thats why you will never see a bright yellow website but its a great color for
important details or call to actions.
Green is most often associated with nature, health, life, harmony, tranquility, good luck, money, optimism,
durability, freshness. Its also a symbol of fertility, jealousy and it has a calming effect and it relieves stress.

The color scheme in the Animal Planet website design includes colors such as green, black, gray and white.
While white and green are two colors included in the logo, the black and the grays have the purpose of giving
the website a serious, professional look.
Blue is the color preferred by most people, especially by men. It is associated with calmness, serenity,
peacefulness, security, stability, honor, trust, professionalism, success, seriousness and power.
Purple has been traditionally associated with power, royalty, nobility, wealth, luxury, wisdom, spirituality,
magic, mystery, dreams, fantasy as well as with ambiguity and uncertainty.
Pink is usually associated with tenderness, romance, love, youth, innocence, softness and its known to have a
calming effect. The effects of this color may vary depending on the intensity of the color (strong, light, deep etc.)

Now tell me if
youve ever seen a website more pink than this one! If you did, I will eat my keyboard! Pink is a color mostly

associated with young girls, youth, innocence, romance in all, its a girlish color! For as long as I can
remember, when I thought of Barbie I saw pink before my eyes, so for me, Barbie invented pink!
Brown is a natural color, which is associated with relaxation, endurance, reliability, confidence, warmth,
comfort, security and its considered to be conventional and sometimes sophisticated.
Grey is mostly associated with neutrality, indifference and it leaves the impression of seriousness and
conservatism.
White is commonly associated with purity and innocence. Its also associated with cleanliness, simplicity and
newness.
Black is considered, especially in the design industry, a stylish and elegant color. It is also associated with
sophistication, strength, mystery, depth, gloom, death, unhappiness, evil and sexuality.
So after you decide on the ambiance you want to achieve for your website, you have to choose the best colors to
portray it. For beginners, its best that you stick to simple schemes. Choose the easiest color combination and
limit your color scheme to a variation of one, two or at most three colors. If you dont have a good background
in web design, its really a difficult task to create a gorgeous website by employing a larger number of colors
than that. You will risk to make your website design look amateurish, chaotic and disjointed.

Well guys, this is no simple color scheme website design, thats for sure! This is a vertical scroll (a long scroll if
I might say) website, with pages uniting to one another, each page being in a different color, obviously. This is a
vividly colored design, which gives you a sense of joy and playfulness.
As a general rule, every color that you use in the design of your web page should usually appear in more than
one place on that page. Some designers even extract one color from the logo and uses it in navigational graphics,
text links and another color from the logo to use for background, headers, dividing rules and so on. Its known
that repetition of the color is a sure way to unify a web page.

Guardian.co.uk

Remember what I told you about simple color schemes? About sticking to only a few colors? Well, this is a
website that bends all the rules! It has a different color scheme on each one of its categories and when you
switch the page, even the color of the logo changes to match the categorys color scheme. See how News are red,
Business is blue, Life&Style is brown, Travel is blue, Environment is green. The homepages predominant color
is blue, making the site look serious, professional newsworthy.
You will see that most websites repeat the same colors throughout the entire website for visual consistency. Most
of you may consider this repetition boring, but it actually has the purpose of reassuring the visitors that they are
still in the same website as the home page.

Nevertheless, whether you use a simple scheme or a multitude of colors, remember that the different color
should have a close value and saturation, they should express the same mood and they should appear to be a part
of a unified color scheme.

Lets try now to make a quick analyze on some more websites of widely known companies and lets see if they
took into account color psychology in their web design, how they implemented color techniques and what
message they are trying to send.

Pepsi

The Pepsi website is overwhelmingly blue. The Pepsi logo contains the colors red, white and blue which we can
find in the header, the side bar and the other elements of the website. The background of the website is another
variation of blue, with bubbles coming from below, making it look like sparkling water. The brand is trying to
position itself as a refreshing drink, trying to associate that with the colors used in the website design. Moreover,
blue is the statement color, known world wide and associated with Pepsi, so it seems only natural that this would
be the main color of the website.

Carlsberg

I just love that slogan: Carlsberg, probably the best beer in the world. Well, the website of probably the best
beer in the world has to live up to its name. This is a website destined for adults, the color scheme includes black
a strong, yet stylish color, green used to relief stress, also suggesting freshness, nature and love for life and
white, to create a beautiful contrast with the dark colors. But as we move on to the other pages of the website, we
are welcomed with clean white, gray and a touch of green (to match the logo), giving us a feeling of a clean and
relaxing experience.

NBA

As you can see,

the colors blue, red and white present in the NBA logo are also present in other elements of the page. Blue is
known to be a color widely preferred by men and it suggest success and power, while red is associated with
action, passion and excitement. Being a sports website, you can see a lot of information displayed on the page,
making it somewhat difficult to concentrate on one thing. I find surprising the wooden background on this type
of website, because wood is normally associated with comfort, relaxation, but what can I say, it looks great!

10

Nike

The color scheme in the Nike website includes green, white and orange. Green is a great color, highly associated
with nature, health (including sports) and life. Orange is a color associated with energy, fun, enthusiasm all in
a great relationship with sports and, implicitly, the products the site is presenting.

Ikea

11

The Ikea website gives me a sense of warmth and familiarity, pretty much as the actual place does. The header of
its website is designed with yellow as the predominant color, making it an attention grabber and suggesting
playfulness and energy. The copy is colored in blue, which we can also find in the header, giving a sense of
calmness and stability. The background of the website is white and pretty simple, as the body of the site, making
it easy to access the information.

Nivea

Now this is a brand with history. Meaning it celebrates success, professionalism and trust. The representative
colors of the Nivea brand are blue and white, which we can also find in its website design. Blue is a color
preferred both by men and women, and it is associated with calmness, security, professionalism and trust. White
is a symbol of clean and pure. Nivea states by the colors of its design that it is a trust worthy brand with great
skincare products for every day life.

12

Sony

The thing about the Sony website is that it makes me feel like its something out of the box. I see a lot of black,
shades of gray, which give me the feeling of depth, sophistication, style and professionalism. And theres that
blue on the text, thats really something creative, because they could of had it white, like the logo, for example
it really stands out and gives a plus of professionalism to the overall design.

Nestle

Nestle is a huge company with a heavy background in the food industry. This is a company that always
promoted a healthy life with its products. The Nestle website has the logo and the slogan in gray and the rest of

13

the design in a white-gray-blue color scheme, which gives you a feeling of calmness and security and making
you think that this is a serious, reliable company.

Apple

The Apple website is the most clean website design Ive ever seen. Notice the all white background, suggesting
simplicity and newness and the glossy gray header which make us associate the website with something stylish
but in the same time serious and elegant. The combination of gray, white and black here is done in a magnificent
way.

14

3 Time Tested Ways To Pick The

Perfect Website Color Combination

Stephanie Hamilton
December 30, 2011
Color communicates with the viewer on an emotional level.
Without them being aware, the colors you choose for your web design stir up different moods with the
user. Color is the most immediate way of creating a good first impression. The challenge is to
combine color while giving the website a unified and polished look.
There are numerous methods for choosing a color combination. Here are three of my favorite ways to
choose a color palette for a web design project.

Method 1 - Start with a blank canvas

The first method is to build a color palette from scratch.
Its helpful to use a tool for this. Here are a few that I have used:

Adobe Kuler

COLOURlovers

ColoRotate

Color Scheme Designer

How many colors should be used?

Although there is not a hard and fast rule, the more colors you use, the harder it becomes to
established a unified design. To borrow from interior and fashion design, the 60-30-10 rule states that
three colors should be used in varying degrees (60%, 30%, 10%) to create the perfect harmony.

The primary color should cover about 60% of the space and create the overall unifying theme of the
design.

The 30% should contrast with the 60% to create a visually striking effect.

The 10% is an accent color, which should complement either your primary or secondary color.

15

16

Experiment and use as many or as few colors as you like. You might start with 5 colors and then add
or subtract based on how you progress through the design.

Using Tints & Shades

In scenarios where you have to use more than three-five colors, tints and shades can be used. An
example may be content-rich web pages where you need to visually separate side bars, captions, and
tables from other content. The result will unify the design without the need for a fourth or fifth color.

Tints and shades can be used to provide additional color options without clashing with your existing
color scheme.

Method 2 Start with an image

Photos can be a great source of inspiration when it comes to choosing your color scheme.
When incorporating images into the design, whether they be stock images, original photography or
graphic design, coordinate colors between them and the layout. This will create a unified design. It
may be that the photograph inspired the design, and in this case fitting the images into the design
should be simple. We tend to borrow color inspiration from photographs instead of the other way
around.

17

Photographs are
often color inspiration for web design, as is the case of the above website. Our eyes recognize the
color relation by instinct, which in turn provides a strong connection for the user. When you borrow a
smaller amount of color inspiration from a photo, additional parts of the layout are brought to our
attention. In the case of Live Africa, the logo has much more emphasis.

In the above
example, large amounts of color coordination is used between the main photograph and the rest of the
website. You can see the color scheme from the photograph permeates all other elements which
creates a unified visual identity.

18

Blue, browns, and other earth tones have been borrowed and successfully translated into the design
of the Africa Oasis Projects website. The colors along with the texture of the website form an
emotional impression on the visitor while giving them a glimpse into the projects mission.

Method 3 Start with the business goals

Color can also be used to elicit an action in someone.
If the websites goal is to sell something, choose colors that will inspire a an emotion in your site
visitor.
Market researchers and brand managers have used color psychology to influence product
engagement. Examples of this in practice include restaurants that are usually red and orange, banks
and financial institutions are often blue, while luxury products are typically packaged in black.

19

Discount/coupon sites tend to utilize bright color schemes. The color scheme on Groupon translates
into a sense of urgency. These sites are about grabbing a deal at the last minute, and bright colors
contribute to this game-like appeal.

Hotel websites usually have a colour scheme of white, blue, black or green because of the symbolic
connotations of these colors. Warm colors are also used as they create a comfortable feeling for the
visitor. The website for Hotel Missoni uses bold colors and illustrates how color has to fit within the
color scheme established by the image. The use of background images means the design cant be
physically separated. The result is a unique looking website with a subdued layout.

College websites have a large amount of content to squeeze on the site, which can make it a
challenge to design. The Camden Military Academy used strong, universal colors that connotes trust
and dependability. The design uses three colors blue, red, and yellow, with tints used to differentiate
content. The 60-30-10 rule can be seen here: Roughly 60% of the site is a shade of yellow, 30% in the
form of blue, and 10% in the form of red.

20

Carefully selected color combinations along with tints and shades will evoke different reactions,
moods, and feelings in the minds of your viewer. The best way to develop your color sense is to view
lots of designs.
What methods do you use to pick the perfect website color combination?
About the Author: Stephanie Hamilton is a freelance Graphic and Web Designer by day and a
blogger by night. Holding a BFA in Graphic Design, she has several years of experience designing the
latest in print and building better user interfaces and websites. She also enjoys writing as a creative
outlet and blogs regularly for her business and others. You can visit her website here or follow her on
Twitter for the latest updates.

21