Using Color in Web Design


Your logo and site are more than just a collection of text, images
and white space. Somewhere in there are the colors you choose. It may
seem trivial, but the colors you select to represent your company will
influence your audiences’ perception of you and will determine if they
stick around to investigate further. How much time would you spend on a
site that’s background came up in bright yellow? You probably wouldn’t
even wait for the images to load. Why? Because while, in small doses,
the color yellow can denote a spiritual feeling, it is the harshest
color on the eyes, and is likely to send you running for cover.

People use color to categorize objects in their everyday lives. Green
means go. A yellow bus is a school bus. A light blue box is a Tiffany’s
box. Therefore, it’s only logical that your customers are using your
colors to gather important information about your company. Similarly,
many companies use color in their web design to help users identify and
categorize their brand with just one glance. In fact, for some
companies, the color in their logo is the basis for their entire
branding strategy (think IBM Blue). Use it wisely.

The Hidden Meaning Behind Colors

You know what colors you like, but do you know what your favorite
colors mean? You may want to brush up on the hidden meaning behind
colors before designing your company material.

  • Blue — Blue is currently the most popular color for
    companies to use in their branding strategies. It represents calmness,
    hope and stability. Research says that people are apt to immediately
    trust information coming from sites that are blue and to pay attention
    to blue logos.
  • Red — Numerous studies have claimed that people
    working in red rooms work faster. Why? Because the color red is said to
    increase blood pressure and heart rate. That might be perfect if you’re
    trying to work your employees to death, but if you’re trying to attract
    customers, moderate your use of this powerful color.
  • Yellow — Used in small amounts, yellow is inviting,
    sunshine, cheerful and the number one attention getter. However, it has
    conflicting symbolism. To some it denotes happiness and joy, and to
    others it symbolizes cowardice and deceit. Research what this color
    means to your target audience before plastering it all over your site.
  • Green — In the United States, green means go. It is
    associated with movement, nature and fertility. It symbolizes growth,
    freshness and safety. Darker shades of green are often associated with
    money and wealth. It is the most restful color for the human eye.
  • Orange — As many ‘on sale’ products have orange
    stickers attached to them, people have come to associate this color with
    affordability. Bright orange is hard for the eyes to process and is not
    recommended as a background color for your site, though it can be very
    effective for logos. Small amounts of orange can help create a ‘fun’
    atmosphere, so use it sparingly.
  • Purple — Purple is associated with royalty. It
    symbolizes luxury, power, wisdom and ambition. Lighter shades of this
    color are said to evoke romantic and nostalgic feelings.
  • Black — Considered the negation of color, black is
    conservative. It can be serious and conventional or mysterious and
    sophisticated. The color black usually has a negative connotation
    (black humor, blacklist, etc.).
  • White — The color white is associated with
    innocence, purity and goodness. From a marketing perspective, white
    often denotes cleanliness, dairy or low-fat.

Selecting Colors for your Web Site Design

When designing your site, we recommend finding a color palette that
you feel works and then sticking with it. Don’t try and mix colors from
different color palettes because it’s likely the colors will not blend
as well as you’re imagining. This may cause your logo or site to look
disjointed. For a palette to work well in a web site design there should
be some type of unifying attribute. What ties your colors together?

Keep in mind that the human eye requires contrasts to be able to read
something clearly. Don’t pick web design colors that will be hard to
read when placed together. For example, dark text on a dark background
probably will not work. Try opting for a light background and dark text,
or a dark background and light text. The difference in tones will
visually interest your consumer’s mind and make them want to focus in to
read your text.

Bringing Back the Color Wheel

Remember in elementary school when your teacher broke out the color
circles and told you all about the different degrees of color? She was
on to something.

What does the color wheel have to do with your web site branding
strategy? Every color is suited for a specific purpose; it’s your job to
make sure the colors you pick match the goals of your company.

Be careful when trying to combine colors from different color
spectrums – it could confuse the user or make your logo and/or site
appear too ‘busy’ or cluttered. We recommend combining colors from the
same level of the color wheel.

  • Warm Colors — Warm colors are made with reds,
    pinks, oranges, yellows, golds, browns or some combination thereof.
    Generally, warm colors tend to be more exciting and aggressive. They can
    connote feelings from simple optimism to strong violence, and as a
    result many people prefer them in small doses. Designers can ‘tone
    down’ warm colors by using the lighter side of the warm color spectrum,
    like pale pinks and yellows.
  • Cool Colors — Cool colors are made from blues,
    greens, purples, grays, silvers and whites and are more commonly
    associated with spring and summer. If warm colors denote violent, cool
    colors are said to promote a soothing effect. Blues, greens and purples
    give the impression of comfort and nurturing, making them excellent
    choices for marketers.
  • Intermediary Colors — The warmth or coolness of
    some colors can vary depending on the particular hue. For example,
    purples and greens are considered intermediary colors, because depending
    on how much red or yellow they contain (in relation to blue) they can
    be perceived differently. Less blue equals a warmer color; more blue
    indicates a cooler color.

The Power of Color

We know choosing colors for your web site and logo may seem trivial,
but its impact can be huge. Color has a lot of meaning attached to it —
using your colors appropriately will reassure consumers and help
establish customer loyalty. Conversely, choose the wrong colors and you
can easily find yourself ‘saying’ things you never intended to!

The colors you choose can help brand your company in the following ways:

Categorize Your Company

Not sure how the web design colors you choose can help categorize
your company? Think about your last trip to the grocery store. What
colors did you see as you were walking down the grocery aisle? We can
guess there were red or orange signs that told you a sale was going on,
green signs to point you in the direction of the nearest ATM and tan
signs to show you where the bakery was. Remember the old black and white
labels that would immediately tell customers they were looking at a
generic label item? These are all examples of how color can help to
categorize a company.

Color usage is important because it gives consumers visual clues to
help them sort and categorize what they are seeing. If your company uses
bright, playful colors like bright orange, red, or royal blue, your
consumers may think you are selling products geared toward children.
That can be great if you’re selling toys for toddlers, but if you’re
selling office supplies for large corporations, you may want to revise
your color scheme. Deep grays, pastel blues and black are often
associated with more ‘dignified’ or ‘elegant’ products. Some colors
better represent spring, while others denote winter. The wrong color can
give your consumer an entirely different impression of your company
than the one you’re after. So choose wisely.

Set the Mood

What is your company’s personality? Is it formal, exclusive and
higher priced? Or is it friendly, casual and affordable? Certain colors
have psychological and cultural meanings that have long been ingrained
in your user. If you try and use a color differently than what they
associate your company with, it is likely your campaign will not be
successful. Use your colors to set the mood and tone of your company.
Use cooler colors to promote a calm, serious image or warm colors for an
energetic, exciting feel.

Consumers become emotionally attached to certain colors. As a result,
different colors can convey different feelings, such as the season, or
time of day. Let’s head back to the grocery store, green means pine or
menthol; blue means mint or icy fresh; and red is found in strawberries
and apples. Would you eat something that was blue? How about purple?
Neither would your user.

In some cases, a particular color itself often becomes associated
with a certain company or brand. If the color you’ve targeted is
associated with one of your competitors, don’t use it! UPS has used
their color to brand themselves as a no-nonsense company. Most people
associated UPS with their brown trucks and uniform and since the color
brown portrays reliability, it is a color perfectly suited for them.

Attention Grabbing

One of the most obvious things designers can use color for is to grab
their customer’s attention. People know that using bright colors like
reds or oranges are known to catch people’s eye. As a result, a lot of
marketers choose these colors and saturate the market.

A good way to grab attention is to use seb site design colors that
currently aren’t being used in your industry. An unknown color could
help set your company apart from your competition and make people take
notice. Of course, there could be a reason no one else is using that
color, so watch out!

International Web Design Concerns

Depending upon the culture, colors can have very different meanings
and actually cause problems for your site. For example, green represents
movement, nature and fertility in the United States, but in other
countries green is associated with inexperience, envy and misfortune.
It’s said that in China green hats mean a man’s wife is cheating on him.
Blue may be the most popularly used color in the United States but some
cultures believe the color blue depicts defeat, trouble, depression or
sadness. When selecting colors, it’s important that the color portrays
the message and the image of your company in all languages. The success
of your company could depend on it.



8F, omi Bldg. 3-19-1 Shibuya
Shibuya, Tokyo 150-0002 JAPAN
+81-3-5468-3860