Using Colours on Your Website Correctly

Selecting the right colours for your website can impact the success of your website and the wrongs colours can often send your site visitors running for the hills. Website colours are just as important as selecting the right text or graphics.

Colours have many different effects on people and certain colours invoke particular emotions in people. These reactions affect your company’s image and can significantly impact your company’s brand and the response from your potential customers.

There are several things that you should consider when choosing which colours you would like to display on your website and which colours you would like to incorporate into your company’s brand and image. People associate colours with specific moods, emotions, and feelings. In fact, many scientific texts have proven that different colours and colour combinations invoke specific emotions in people such as happiness, sadness, anger, and even fear. Anything that can alter your customer’s feelings should be looked at very carefully when designing your company's image or website. You can probably already imagine the benefits of being able to control your customer’s feelings.

In the website design world, colours are usually classified as Neutral, Warm, or Cool.

Neutral colours typically include whites, grays, browns, and blacks. These colours are often associated with purity, reliability, home and family, elegance, or sophistication.  Warm colours typically include reds, yellows, oranges, and pinks. These colours are often associated with warmth, happiness, innocence, romance, and passion. These colours are often used in a combination with other colours to create a powerful effect. The warming effect of these colours makes them widely used and great for attracting attention.

Cool colours typically include blues, greens, and purples. These colours have calming effects on people and are often associated with wealth and royalty. Purples are not used nearly as much as blues or greens but purples can symbolize creativity and royalty in powerful ways.

Web Safe Colours

All types of monitors and displays present colours differently. In every type of monitor there are 216 colours that will be displayed virtually identically in all browsers. These colours are commonly known as "web safe colours". If you are looking for colour consistency and would like your colours to display identically across all monitors and browsers than you are best sticking to using these 216 colours for your design.

Colour Schemes and Combinations

Colour schemes are composed of either a single colour, complimentary colours or contrasting colors. Single colour schemes use many different shades and intensities of one single colour on a background. Complimentary colour schemes use two or more colours that complement each other to create a visually appealing look.  Contrasting colour schemes use two or more dominant colours to create an attention grabbing effect. This colour scheme should be used with caution as you will usually have greater success with one of the two previous colour schemes when marketing your company image/brand. When designing or planning your website you should really sit down and think about your target audience. Consider the impact that your desired colour scheme will have on your company image, potential customers, and the emotions that your website will evoke. The following colour guidelines should help make your website readable and visually appealing for everyone that visits.

Colour Guidelines and Suggestions

  • Text should be readable without having to squint, adjust browser resolution or contrast, or highlight text areas. Of course dark coloured text will always be more legible on light backgrounds and light coloured text will be more legible on dark coloured backgrounds.
  • Try and use colours that are attractive, pleasing to the eye, and present the effect you are looking for (remember Neutral, Warm, Cool).
  • If you want consistency across different browsers, use the 216 web safe colours only.
  • Do not use a normal colour intensity images as a background behind text. It makes it nearly impossible to read.
  • Colours should be uniform and consistent throughout your website to create a company “brand” and let your visitors know they are still on your website.
  • Select the colours that portray the image you want to give your visitors.

When you begin designing or planning your website, choose you colour scheme just as carefully as you choose other elements for your website such as graphics and content. The colours and colour schemes you choose for your website will determine the impression that your visitors get of your company and will usually mean the difference between success and closing your doors.

Back to previous page

Article Categories

join us on Facebook

Get a free SEO audit in Ottawa

Looking for printing in Ottawa?

interviews with local businesses

View our website design work and graphic design samples of work from projects we've completed