Colour Schemes and Web Design

October 3rd, 2012 | Articles & Tutorials | Theme Author:

Colour is one of the most important elements of good Web design. Of course, different colour schemes suit different types of websites, but they are always important nonetheless.

Colour is a form of communication itself, evoking certain emotions and reactions in people. Colours have different symbolic meanings in different cultures although there are also some universal practices which should be adhered to while others should be avoided. A well-designed website will use a consistent colour scheme throughout. Some sites combine colours while others focus on a particular colour. The scheme which suits your site depends on the type of visitor you are trying to attract and the niche of the site. Here are some practical tips and information to help you get inspired.

Things to Avoid

An excess of bright colours and vividly contrasting colours should generally be avoided. Most of all, it is important to take extra care when using coloured text and coloured backgrounds. Text which is too similar in colour to the background that it’s displayed on will be uncomfortable to read and will very quickly turn your visitors off. On the other hand, text which contrasts too much with the background can lead to eyestrain and an uncomfortable viewing experience overall. Mix and match your colours carefully and use a consistent colour scheme throughout the content of your site.

Mixing Colours

In general, it is good to start off with a primary colour and design your site’s colour scheme around that. The background and largest features of a website may be in one colour while important elements of the page such as navigation menus, calls to action and various other features should be distinguished by another colour. Simple colour combinations in which there is no particularly dominant colour can also work. Mixing many colours together in your design can also convey a vivid and energetic design so long as you have consistency between the elements of the page. Things like titles, for example, should usually be in the same colour while you can use a different colour for navigation features and a colourful image for the page header.

Red, Orange and Yellow Colour Schemes

Red primarily conveys emotions of excitement, fear, strength, power and desire. Because it conveys both positive and negative emotions, it is important to use red colour schemes with care. It can suit some websites extremely well while it is unsuitable for others. When used in the right way, particularly when combined with colours like gold and silver, a primarily red colour scheme can be great for conveying a sense of luxury. If your website is advertising an upmarket venue such as a shop, restaurant or nightclub, for example, a deep shade of red is often a good one to start with.

Orange gives a similar impression to red as it is basically a lighter form of the colour. Less intense, it is often a safer colour to go for making it ideal for creative and energetic styles.

Yellow again often conveys similar impressions. A pastel-style yellow is far less intense than brighter shades of yellow, orange or red and it works particularly well with minimalistic design styles. Slightly more intense versions of both orange and yellow are ideal as backgrounds since it makes dark-coloured text stand out better without being too hard on the eyes.

Green and Blue Colour Schemes

Green and blue in most shades are almost always safe colours to use. They tend to be calming colours conveying thoughts of nature and relaxation. For websites related to health, food or nature, green is often one of the favourite colours. Web design themes inspired by nature are becoming increasingly popular and green colour themes are often one of the safest options to go for. Bright shades of green, however, have a similar effect to that of other bright colours such as yellow and orange and again can work well with minimalist or energetic design styles.

Blue colour schemes have a similar effect. They present a good safety net for Web designers and are suitable in a wide variety of different designs. Blue is a colour often associated with calm, trust and quality. As a nature-inspired colour, blue can also have a very similar effect to green. Darker blues are also good for establishing a more comfortable visual hierarchy – for example, white text on a dark blue background often creates a pleasant effect.

Purple and Pink Colour Schemes

Purple is a very heavy colour scheme to use. It is a powerful colour which is popular among websites devoted to style and fashion. Purple emphasises wealth and royalty and can also convey professionalism and a good visual hierarchy. Purple is also often associated with women as is pink making these colours ideal choices for websites which primarily target a female audience. Pink, since it is a much lighter shade of purple, is best in situations where you want to make less of a visual impact and want something a little more calming and passive.

Black Colour Schemes

Black is a stylish, elegant and very powerful colour that can convey sophistication and formality. A black colour scheme can add a degree of professionalism or mystery to your website’s design. Used as a background, black is great for enhancing the visual hierarchy of your site and emphasising the text that is printed on it. Black should also be used with care, however. A poorly designed colour scheme based around the black colour can look depressing and gloomy but when combined with bright, rich colours, black can truly win when it comes to creating sleek and imposing designs.

White Colour Schemes

Last but certainly not least, white colour schemes are the best to go for when it comes to functionality. It is a safe background colour to use and is indeed the most popular on the Web. It gives a clean and refreshing feeling and it is also feels most natural to read black text on a white background. White does not clash with any other colours used for other elements of the webpage and in pictures. If you are going for a minimalistic design, white is also the obvious choice.

No Comments


  1. Colour Schemes and Web Design | Design News

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get notified when we release new templates and other free goodies!