Get Free Quote
Get Started
Learn SEO

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.