If you have ever designed a website, chances are you’ve put a lot of thought into layout, text, and navigation. But there is another important element of a successful websites that even an amateur web designer needs to take into account in order to create a dynamic, engaging website that gives your viewers exactly the message you are intending to give: the colour scheme.

If your website is focused on sales, you want the colour scheme of your website to serve as the perfect backdrop for the type of products you are selling. If the website is for personal promotion, you want the colours to indicate to viewers the kind of person that you are. While colours have many associations in our society, you have to take into account popular web colour schemes and associations before setting up the dominant colours in your website. Let’s look at a few of the most popular website colour schemes:

White

While white can seem basic and maybe even boring, a few very modern companies have reclaimed white as the cool, eye-appealing colour of the future. Google and Apple are just two companies that use white-focused colour palettes almost exclusively. Using white can give a very professional image to your website, but one word of warning: a white website that is not very professionally designed can look more amateur than one of another colour, so use white only if you are sure you can use it well. Also, be sure that your product line will look good against a white background. If you are selling handmade prints, white is a good neutral background, but if you are offering custom wedding bands, white may be too light and washed-out.

Black

Another sleek, sexy colour option is deep, glossy black. Black is not as dark or depressing as you might think, especially if you add some glamour with flashes of sparkle or glitter. Having an all black website conjures images of exclusive nightclubs, glamorous events, and Hollywood exclusivity—perfect if you are selling accessories for a fun night on the town, but less on-point if you are offering good diamonds. Black can look too somber for anything geared towards children, babies, or mothers, but can toughen up a site to help it appeal to teens or young men.

Blue

Blue is neutral, universally liked, and easy on the eyes, so it is no surprise that it is one of the most universally popular website colours. Blue can work for just about any kind of product or business, although it does connote a certain coolness that would be out of place if you were advertising, say, a pottery painting store. If you are selling products geared for babies, using only blue might send the message that you only offer stuff for boys. Additionally, because blue is so popular, beware of choosing particular shades of blue that have very strong associations with popular websites—such as the moderate greenish-blue known as 3B5998 used for Facebook. (Fun fact: Facebook’s predominant colour is blue because founder Mark Zuckerburg is colourblind and can see blue better than any other colour.) You may also want to avoid the colour known as 4099FF—which you might be familiar with as the shade used by Twitter. Blue is a great colour for a jewellery website that specialises in good diamonds—the cool tone will pick up on all the flashes of colour in the stones.

Green

While green is a soothing, neutral colour that would be good for many types of website, its strong cultural connotation is that of environmental friendliness. Use a colour scheme of green, beige and other earth tones to convey the image that your products are organic, eco-friendly, or made with recycled materials. This effect is subtle—studies have shown that adding even a hint of green to a food label makes customers think the product is fresher and more natural. So even a tint of green on your website will have browsers subconsciously assuming that your products are more natural—and can be a great way to bring that fact to their attention. That being said, if your website has nothing to do with earth-friendliness, using too much green might seem jarring or out of place.

Yellow

Between yellow road signs, yellow pages, yellow Post-it notes, and yellow cabs, the colour yellow has taken on an aura of functionality and practicality that make it a great fit for certain kinds of websites—but less ideal for others. Yellow connotes practical, efficient life solutions that grab your attention like a caution sign, making it perfect for a site offering a practical solution to an everyday problem. Yellow is often used with its complementary colour, bright blue, which together form a fun, sunny colour scheme perfect for anything summery and cheerful. A more muted yellow, paired with creams and browns, can be a subtly elegant colour scheme for a website about food, vintage fashion, or beer.

Red

Red is a strong bold colour, but it can become overwhelming if it is overused in a website design. If you do opt for a strong burst of red, keep the rest of the design simple to really let the colour shine. The eye-catching qualities of red make it a perfect way to promote an art or graphic design business. Deeper red hues are said to stimulate the appetite, making them good backgrounds for a site about food, especially one dedicated to bold food like BBQ! Even deeper wine and burgundy shades are an elegant, unexpected twist on basic black, perfect for high-end products. If you are selling jewellery like good diamonds or wedding bands, deep reds can remind customers of the plush red velvet of a jewellery box.

Orange

Orange is another happy colour and can be used to show exuberance and joy. Like the other warm colours on the colour wheel it can also evoke hunger and make people think of food. Make sure to choose your website’s colours wisely in order to make the best visual impression you can. Users will get a good feeling of who you are just from your colours so it’s an important and valuable decision in the website creation process.

Purple

Purple has a majestic and royal quality to it and is a great choice for showing power and importance. It also has a creative feel to it and can be used to show off creative features.

While you ponder which colours will be the most effective for your website, you must also consider the limitations that crop up when viewing colours within a web browser. Browsers are capable of showing 256 browser-safe colours, but unfortunately, not all web browsers share the same browser-safe colour pallet. Consistently, the browsers share approximately 216 of the same colours, so it is wise to design your site’s main features within those limits.

If you choose to go outside of the browser-safe 216 pallet, the viewer’s browser is forced to render dots of colour (called dithering) that are most closely related to the colour chosen, in order to create an approximate match. While this will be okay in some displays, other displays will display an image distorted by dots. There is a bright side however, because today most modern displays are capable of rendering more than 16 million colours.

However that may be, it is the exception rather than the rule, as much of the world is surfing the internet with equipment that is in need of updating.My professional advice is to always keep the needs of the viewer in mind and to always stick to the browser-safe 216 spectrum for all major site design elements.

The colour scheme options are widely varied, but don’t become overwhelmed. Keep it simple. Keep it clean. Here are a few of your options:

Monochromatic

This colour scheme has one base colour and any number of tints (lightens the base colour) and shades (darkens the base colour) of that colour.

Analogous

This colour scheme is made up of colours that are adjacent to one another on the colour wheel.

Complimentary

This colour scheme is made up of colours that are opposite to one another on the colour wheel.

Here’s a quick tip to achieve the all-important balance of using colour in site design: Use light colours for the background and all large design elements, because light colours will not overshadow your content. Balanced with light colours, warm colours create a visual emphasis and make particular features stand out.

Need a little help or advice?