The importance of color in web design
February 5, 2014
Colour selection is one of the key element of building a strong brand, creating a website design, or developing marketing materials. There are many factors to consider including emotional responses and popular perceptions and impacts of particular colours and shades.
Colour is information. Just as with print designs, such as those for flyer design, or business cards, web design use color to create hierarchy, draw the eye, and add texture Colours evoke particular associations and emotions in our minds. Here is a summery of some of those associations:
Yellow:
cheerful, upbeat, sunny, happy, intense, luminous, friendly, young.
Orange:
energetic, playful, happy, loud, vital, glowing, warm, sensual, retro, inviting. When darkened to deep rust: sensual, earthy, spicy, ethnic. When lightened to peach or coral: upscale, soft, nurturing and healthy.
Red:
hot, powerful, bold, exiting, aggressive, dynamic, passionate, angry, attention demanding, rebellious, radical. When deepened to shades and tones: rich, lush, elegant, refined. When lightened to Hot Pink: energetic, youthful, trendy, vibrant, shocking, faddish. When lightened to paler pink: soft, feminine, romantic, tender, sweet, sentimental, delicate.
Purple:
rich, elegant, creative, confident, spiritual, daring, futuristic, sensual. When deepened to a darker purple: regal, majestic. When lightened to lavender: soft, gentle, nostalgic. When mixed with gray: sophisticated, subtle.
Blue:
Calm, tranquil, traditional, cool, clean, fresh, free, reliable, restful, meditative, cold. When deepened to darker blues: powerful, credible, authoritarian. When lightened to pale blues: soft, serene. When tinged with green (like teal) upscale, rich, unique, appealing to both genders. When tinged with purple: warm, trendy, energetic.
Green:
natural, clean, fresh, healthy, hopeful, growing, youthful, abundant, rebirth, spring, woodsy. When deepened to darker greens: richness, security, safety, prestige. When lightened: calm, soothing.
Brown:
durable, earthy, rustic, organic, healthy, ethnic, solid, timeless, stable, reliable, drab, antiquity. When lightened to sand and beige: natural, classic.
White:
pure, clean, pristine, innocent, bright, hygienic, healthy, minimalist, cold. When deepened to off-whites: warm, friendly, calm.
Black:
sophistication, elegance, chick, modern, dramatic, powerful, mysterious, ominous, sad, depression, despair, death.
Types of color scheme
Single colour themes make use of different shades of a single selected colour on a plain white or black background. This creates a simple look but it can appear very elegant and classy if executed by a skilled designer.
Complementary colour themes make use of two or more colours that work well together and look pleasing to most people when combined. There are lots of theories about colour wheels and so on but this is generally easier to do by eye. Often one or two colours will be selected as dominant and others will be added to complement or enhance it.
Contrasting colour themes use multiple dominant colours to create a very striking and eye catching effect, but this must be done carefully to avoid unpleasant clashes or eye-straining combinations that make content difficult to read.
Website Colour Key Guidelines
- Make sure text is readable – dark enough colours on light backgrounds, and vice versa
- Select colours that will give the right impression and evoke the desired mood in your visitors
- Remember to use one of the 216 “web safe” colours in order to ensure your site displays in the same shades regardless of the type of display device it is being shown on
- Don’t use normal images as backgrounds for text as this makes it impossible to read – if you must use image backgrounds, fade them out to watermark levels for readability
- Keep your colour scheme uniform across all your website’s pages to create a solid look and feel and a uniform brand presence for your visitors
How to select your colour
Firstly , understand what each colour stands for. Some questions to ask yourself:
- What color represents your brand’s personality?
- What color suits the characteristics of your product/service?
- What color does your competitor(s) use?
Colors aren’t tied to any particular industry — though some may be better suited for some services/products than others. You should aim to pick a color that will represent your brand’s personality best. One that will give your customers the right impression the first time they see it.
You aren’t limited to one color. Some brands like eBay choose to go with many colors to represent variety — but you can also choose a couple of colors that work well together.
Consider differences in cultural interpretations of your color. For example in the Western world, white is considered the color of purity and peace, however, in some parts of Asia white is the color of death. Make sure the color you select will give the right impressions in the markets you’re present in.
Pick a color opposite to that of your main competitor. The color of your main competitor is probably the most important point to consider. If you’re the first in a new industry or market segment, then you have first picks. Choose the color that represents your product and its personality. If you’re second, then that first choice may already be taken. Instead of picking the same or similar color, pick the opposite. Pick blue if your competitor has red, pick purple if they have yellow, etc. A brand’s strength lies in its ability to stand out. Picking the same color to that of your key competitor makes you a me-too product. Instead, you want to separate yourself from the competitor, you want to show that you’re different