7 Ways to Use Colour Effectively in Website Design

When designing websites, the clever use of colour can make or break a design. Used badly, colour can make a site look garish, incoherent and just plain tacky. Used cleverly, it creates attractive web designs that draws readers in and helps them to understand the content and structure of the site.

Last Updated Please share our content if it is helpful

Follow these seven steps to create web designs that are attractive, effective and easy-to-use.


1: AppropriateĀ Use of Colour

No one colour scheme is right or wrong. What is important, is that you use colour to create the type of web design that is right for the customer's business and that works for their typical reader.

Evoke the Appropriate Emotions

Different types of colours invoke different emotions:

  • warmer colours (those with red, orange or brown undertones) make you feel welcomed and are appropriate for food and hospitality sites
  • greys and cooler colours (those with blue and green undertones) are more businesslike
  • bright, vibrant colours create feelings of energy and impulsiveness and are appropriate for younger people and some sales sites where you wish to encourage a "buy now" feel
  • muted colours create feelings of calmness and are more appropriate for older viewers and for sites where you wish people to carefully read your content
  • the current trend for flat websites uses a flat colour-palette that can give sites a modern, if cool, feel
The warm tones of the photo and the more muted, but still warm, tones of the masthead background

Web design for a company based near Thetford, Norfolk, that is subletting apartments in Rome. Note that the rich oranges and golds of the photo create a warm, convivial feeling; as seen below, the black undertones create a feeling of luxuriousness. Had this photo been taken during the daytime, the impact would have been very different.

 

Evoke Appropriate Connotations

Individual colours have specific connotations; most can have both positive and negative connotations.

  • white = pure, clean
  • black - luxury, power, masculine, death
  • grey - business, sleek
  • blue = safe, confident, trustworthy, serene, masculine
  • purple = luxury, spirituality, royalty
  • pink = feminine, romantic
  • red = passion, anger, danger, energy
  • orange = fun, energy, warning (traffic lights), Halloween
  • yellow = sun, summertime, sickly, cowardice
  • green = nature, organic, environmental, envy

Tip: these connotations can sometimes vary between cultures - hence why your choice must be right for the typical reader. For example, in western culture, black is the traditional colour of mourning, whereas different cultures associate mourning with blue (Korea), white (China), yellow (Egypt), purple (Thailand) or grey (Papua New Guinea).

Greys and blues are used to create trust

Web design for a company helping customers to self-build their own home. In spite of their eco-friendly credentials, the customer opted for a blue and grey colour-scheme to create a business-like, trustworthy feeling.

 

Use Appropriate Tints and Shades

Within any base colour, the tint (amount of white added) or shading (the amount of black added) creates a huge difference.

For monochrome colour schemes, this is an effective way of creating visual variety without risking clashing colours.

Tip: if you are wanting to have several varieties of a given colour, then it is generally best to use tints and shades rather than having two different base colours. This is because any colour can look different depending upon the device it is viewed on - even depending upon the angle of the screen on the same device. When we first started out in web design, we selected what appeared to be two complimentary varieties of blue. When viewed on a different PC, however, one was a purple-blue, the other a murky turquoise-blue. Not very attractive!

Shades and tints of a base colour

Microsoft Expression is useful for finding lighter tints and darker shades of a base colour.

 
 
 

Example: Warm Tints Create a Welcome Feel

The old website for this guest house based near Bury St Edmunds, Suffolk, looked cold and uninviting. It used a minimalist approach with white space around the top image and a cold shade of green for the menu bar.

This is appropriate for some businesses but not for a guest house that prides itself on its warm, friendly welcome.

Old website - white background made the site look cold

Old web design - white space created a cold feel

Website redesign with warmer sky and background

Website redesign - warm tints draw the reader in. Notice the feeling of warmth created by having the lights on in the bedroom photo.

The blue sky of the old site made the whole photo seem cold.

Using Macromedia (Photoshop would be just as good), we added a semi-transparent turquoise-blue wash to the sky. (#0099ff; with a colour transparency of 27%.)

The blue wash over the sky warms up the photo

Old and new sites - the turquoise wash over the sky in the redesign warms up the photo.

For the background images, we made the garden photo semi-opaque so that the details of the foliage would not overpower the rest of the website. This made it look somewhat washed out.

Using Macromedia, we added a semi-transparent warm green wash. (#669900; with a radial gradient of 40% and then an overall colour transparency of 80%.) We added an additional radial gradient layer of colour to the top-center.

The colour-wash warms up the garden photo

The colour-wash warms up the garden photo.

 
 
 

Example: Gray Images Create Classic Look

Our first redesign attempt used coloured images and a solid blue background (as per the customer's request).

In order to create a more elegant look in keeping with a classical ballet school, we then set each of the top images to grayscale. We also changed the block of blue colour to a radial blue and purple gradient.

First web design attempt used coloured images

First redesign attempt: colour images are fine but not as elegantly classical as greyscale images.

Our redesign used grayscale images

Second redesign: grayscale images and a blue-purple gradient create a more elegant feel.

 

2: Use Colour Consistently Throughout the Web Design

One thing that can make your websites look more professional is to ensure that all of your images blend together with the dominant colour theme. Sometimes you can be lucky enough to select images with the appropriate accent colours; other times you will need to edit them to produce a more professional feel.

 
 
 

Example: Edit Images to Ensure a Consistent Look and Feel

Compare the non-edited and the edited images for this therapist website.

We used Macromedia to cut out the heavy chunks of blue, red, orange and purple in the photos and replace them with green or neutral shades.

We also ensured that the text colour was consistent throughout.

Web design with unedited images

Unedited, the images for this web design are discordant - reds, oranges, blues and purples clash with the overall green colour scheme.

Web design where the images were altered in Macromedia

In this web design, the images were altered using Macromedia.

 
 
 

Example: Use Colour Overlay to Blend Non-Harmonious Images Together

The customer requested images with colour in them as they thought this would lift the subject matter. (Their charity deals with traumatic cases). As can be seen from the image on the left, however, this gave the site a non-harmonious feel.

We therefore produced a colour overlay to go over most photos; the warm tone of the overlay warmed up the website. (#ffcc99; at 30%). The overlay disappeared on hover leaving the natural image. We also converted portions of the two larger images to sepia tone to blend them and create a warmer feel.

First web design attempt for UK charity

First web design attempt for Medical Justice, a UK charity

Our redesign used coloured overlays

Website redesign with coloured overlays and blending sepia photos

 

3: Tie Different Sections of the Website Together

Good web design has consistent elements that run throughout. Often, these elements are subtle, such as the design of the call-to-action buttons. (See 6 below.)

One of the important means of creating a quality look-and-feel is to ensure that different sections on the same page tie together visually. To do this, we use repeating background images or else create a solid background that is a lighter tint of the base colour.

Tip: the custom colour selector of packages such as Macromedia enables you to select one of a range of lighter tints or darker shades of a base colour. We find this a convenient tool for finding the hex codes when creating Wordpress websites.

Tip: within Macromedia or Photoshop, creating a semi-transparent image over a white background effectively creates lighter tints.

 
 
 

Example: Mix Complimentary Background Images and Shades Throughout Website

C U There is a Norfolk business, based near Thetford, that runs wellbeing tours to Italy. A feature of their web design was the glorious photo of the ceiling of the Dome of St Peters, Rome.

We used this for the background header image and then used a complimentary shade for the tour footer sections.

Tip: Note how the brown text compliments the overall colour-scheme and contributes to the warm, welcoming feel of the site.

Top background image

The top masthead section uses the background image to great effect.

Tour page footer section

The warm tone of the footer background compliments the top background image.

Throughout the website, important sections of text were framed with this image. Continuing the theme, it makes an effective footer background for the home page image gallery and testimonial section.

Tip: Note that selecting photos with warm tones to them compliments the warm feel of the background.

background image used to frame key sections of text

The background image is used to frame key sections of text.

Home footer section

The background image makes an effective footer for the home page.

 

4: Use to Aid Navigation Through Complex Sites

Many systems use colour to quickly convey information without visitors having to read every detail. Examples are tube maps, traffic lights and electrical wiring.

For complex websites, consider using colour to aid the user's navigation around the site and to give them an immediate reminder of where they are.

 
 
 

Example: Colour-Coded Menus and Pages

Medical Justice are a UK charity who needed their website to assist detainees needing help as well as providing complex information for volunteers. Their old site was hard to navigate.

When redesigning their website, we therefore introduced a system of colour codes for both menus and pages:

Blue for About pages

Blue for About pages

Green for Get Involved pages

Green for Get Involved pages

Red for Help pages

Red for Help pages

Purple for healthcare information pages

Purple for Healthcare Information pages

With the exception of the top menu bar, everything on the page was colour-coded. Visitors therefore knew instantly which group of pages they were on.

Within the top menu bar, the drop-down sections for each part of the site were also colour-coded.

 
 
 

Example: Visual Reference of Steps Taken

Justintensive is an Ipswich-based business offering to coordinate driving lessons and tests. To help visitors realize how the system worked, we developed a traffic light system of arrows.

Page 1

The home page shows what steps you need to take to book driving lessons.

Step 2 - course page

On the course page, the red arrow shows that you must Choose What; other options are greyed out.

Step 3 - Form

The orange and green arrows show you are now choosing where and when you wish to have driving lessons; other options are greyed out.

Step 4 - Payment

The blue arrow shows it is now time to pay a deposit; other options are greyed out.

 

5: Separate Sections Within Pages

Most websites benefit by using tints to visually separate different sections. This makes sites look more visually appealing. It also helps the reader to use visual clues to immediately navigate to the relevant sections of the site without having to read every word of non-relevant sections.

Simple Example: Shading Highlights Menu Bar, Masthead and Footer Sections

The Research Network, like may other sites, uses tints to separate the menu bar, top masthead section and bottom footer section from the main content, which has a white background.

The reader's attention is therefore free to focus on the content.

Top sections denoted by shading

Menu bar and top masthead section each have own tints.

Footer separated by tints

Shading distinguishes footer section.

 
 
 

Example: Shading Separates Content Sections With a Page

In our web redesign page, we use shading to separate different projects. For each section, we chose shading or a background image to compliment the colours of the website redesign being featured.

In our web design page for the Bury St Edmunds area page, we use shading to separate the "Not Your Style" section from the rest of the content.

Shading separates section of our redesign page

Shading separates sections of our redesign page.

Shading separates important section in our Bury St Edmunds web design page

Shading separates important section in our Bury St Edmunds web design page.

 

6: Highlight Important Information

Examples: Use Contrast to Highlight Strengths

Contrast in colour draws the eye. Use it to draw attention to company strengths.

Strengths highlighted in website footer

Web design uses yellow background to draw attention to company strengths.

Strengths highlighted in image

In this web design, white image stands out against the blue background.

 
 
 

Examples: Call-to-Action Buttons

The purple Donate Material button on the AMSR site is more visually arresting than a simple link.

The blue Donate button on the MRBA site enables the donate request to be incorporated within the menu on each page - rather than taking up space elsewhere on the site. The contrast of blue on red makes it stand out.

Tip: work has been done that suggests that colour can influence the effectiveness of call-to-action and sales buttons. Red creates a feeling of impulsiveness and so can increase conversions - but can sometimes feel too pushy and therefore alienate users. Orange can seem an insistent but slightly less pushy colour. My own viewpoint, is that the choice should be consistent with the colour-scheme of the website as a whole.

Call to action button

Purple call-to-action button is prominent.

Blue donate button

Blue donate button stands out against the red menu for this UK charity website

 

7: Readability

Readability should be key to any design choice. Poor legibility can cause eye-strain and users are likely to leave your site.

Contrast is essential for readability

Contrast is essential for readability. Dark text on a light background or light text on a dark background both give the necessary contrast. Black text on a white background is generally considered to be most legible.

Note: if designing websites for readers with dyslexia or Irlen Syndrome, remember that - for these readers - black text on white backgrounds is often HARD to read. A tinted background would then be preferable.

Only use light text on a very dark background for short sections. Do not use it for your entire site.

Consider increasing the font size if necessary.

Dark backgrounds are eye-catching. For large sections of text, however, dark text on a light background is easier to read than light text on a dark background.

Red text on a blue background is hard to read.

It can cause eye-strain. Use very sparingly.

Short sections may be OK, but the more you ask the reader to read, the longer they must focus on the two opposite colours, the more likely it is that it will cause eye-strain.

Colours from different ends of the spectrum can cause eye-strain when used in close proximity. Do not have large sections of red text on a blue background or blue text on a red background.

For large blocks of text, using a lighter tint of the dominant text colour as the background is easy on the eye.

For large blocks of text, it is easier on the eye if the background colour is a lighter tint of the dominant text colour. In this page, we have given alternate sections green and blue backgrounds and have changed the dominant text to match.

 
Please share our content if it is helpful