Using Colour in Web Design
Your logo and site are more than just a collection of text, images and white space. Somewhere in there are the colours you choose. It may seem trivial, but the colours 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 colour yellow can denote a spiritual feeling, it is the harshest colour on the eyes, and is likely to send you running for cover.
People use colour to categorise 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 colours to gather important information about your company. Similarly, many companies use colour in their web design to help users identify and categorise their brand with just one glance. In fact, for some companies, the colour in their logo is the basis for their entire branding strategy (think IBM Blue). Use it wisely.
The Hidden Meaning Behind colours
You know what colours you like, but do you know what your favorite colours mean? You may want to brush up on the hidden meaning behind colours before designing your company material.
- Blue — Blue is currently the most popular colour 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 colour 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 colour.
- 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 symbolises cowardice and deceit. Research what this colour 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 symbolises growth, freshness and safety. Darker shades of green are often associated with money and wealth. It is the most restful colour for the human eye.
- Orange — As many 'on sale' products have orange stickers attached to them, people have come to associate this colour with affordability. Bright orange is hard for the eyes to process and is not recommended as a background colour 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 symbolises luxury, power, wisdom and ambition. Lighter shades of this colour are said to evoke romantic and nostalgic feelings.
- Black — Considered the negation of colour, black is conservative. It can be serious and conventional or mysterious and sophisticated. The colour black usually has a negative connotation (black humor, blacklist, etc.).
- White — The colour white is associated with innocence, purity and goodness. From a marketing perspective, white often denotes cleanliness, dairy or low-fat.
Selecting colours for your Web Site Design
When designing your site, we recommend finding a colour palette that you feel works and then sticking with it. Don't try and mix colours from different colour palettes because it's likely the colours 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 colours together?
Keep in mind that the human eye requires contrasts to be able to read something clearly. Don't pick web design colours 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 colour Wheel
Remember in elementary school when your teacher broke out the colour circles and told you all about the different degrees of colour? She was on to something.
What does the colour wheel have to do with your web site branding strategy? Every colour is suited for a specific purpose; it's your job to make sure the colours you pick match the goals of your company.
Be careful when trying to combine colours from different colour spectrums – it could confuse the user or make your logo and/or site appear too 'busy' or cluttered. We recommend combining colours from the same level of the colour wheel.
- Warm colours — Warm colours are made with reds, pinks, oranges, yellows, golds, browns or some combination thereof. Generally, warm colours 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 colours by using the lighter side of the warm colour spectrum, like pale pinks and yellows.
- Cool colours — Cool colours are made from blues, greens, purples, grays, silvers and whites and are more commonly associated with spring and summer. If warm colours denote violent, cool colours 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 colours — The warmth or coolness of some colours can vary depending on the particular hue. For example, purples and greens are considered intermediary colours, because depending on how much red or yellow they contain (in relation to blue) they can be perceived differently. Less blue equals a warmer colour; more blue indicates a cooler colour.
The Power of colour
We know choosing colours for your web site and logo may seem trivial, but its impact can be huge. colour has a lot of meaning attached to it — using your colours appropriately will reassure consumers and help establish customer loyalty. Conversely, choose the wrong colours and you can easily find yourself 'saying' things you never intended to!
The colours you choose can help brand your company in the following ways:
categorise Your Company
Not sure how the web design colours you choose can help categorise your company? Think about your last trip to the grocery store. What colours 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 colour can help to categorise a company.
Colour usage is important because it gives consumers visual clues to help them sort and categorise what they are seeing. If your company uses bright, playful colours 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 colour scheme. Deep grays, pastel blues and black are often associated with more 'dignified' or 'elegant' products. Some colours better represent spring, while others denote winter. The wrong colour 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 colours have psychological and cultural meanings that have long been ingrained in your user. If you try and use a colour differently than what they associate your company with, it is likely your campaign will not be successful. Use your colours to set the mood and tone of your company. Use cooler colours to promote a calm, serious image or warm colours for an energetic, exciting feel.
Consumers become emotionally attached to certain colours. As a result, different colours 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 colour itself often becomes associated with a certain company or brand. If the colour you've targeted is associated with one of your competitors, don't use it! UPS has used their colour to brand themselves as a no-nonsense company. Most people associated UPS with their brown trucks and uniform and since the colour brown portrays reliability, it is a colour perfectly suited for them.
Attention Grabbing
One of the most obvious things designers can use colour for is to grab their customer's attention. People know that using bright colours like reds or oranges are known to catch people's eye. As a result, a lot of marketers choose these colours and saturate the market.
A good way to grab attention is to use seb site design colours that currently aren't being used in your industry. An unknown colour 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 colour, so watch out!
International Web Design Concerns
Depending upon the culture, colours 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 colour in the United States but some cultures believe the colour blue depicts defeat, trouble, depression or sadness. When selecting colours, it's important that the colour portrays the message and the image of your company in all languages. The success of your company could depend on it.