Choosing Website Colours Part 2

website_examplesby Gail Breese

Sometimes finding the right colour scheme for your site can be difficult.

You could choose your favourite colour - but what goes with it? It is no accident that some colours go better together than others. If you are really stuck to work out a colour scheme, here are some suggestions:

1. What is your writing genre? Maybe that could be a place to start. To be effective, websites for adults, young adults or young children would use different colour schemes.

2. Look to nature. A feather may look green on first inspection but as you turn it in the light, other colours will appear. Flowers, the sky, sunlight on a rock pool. Nature is rarely wrong.

3. Take notice of posters, paintings, some magazines, book covers. Think of the ones that pleased you the most. The combination of colours, percentages and intensity are reasons for their success.

Colour schemes

In design and fine art, the colour wheel can be used to create the most pleasing combination of colours. This doesn't mean you have to use an abundance of different colours on your site - that would make it confusing and  hard to understand. A good combination could be a monochromatic scheme whereby you choose one colour but in different shades or tints.

Colours that are close to each other - for example: blue green / blue / blue violet are called analogous harmonies. They are close to each other on the colour wheel. When used in low intensities they can be very pleasing.

You could use just one colour but add percentages of white or black. This is a monochromatic colour scheme. It is often quite easy on the eye and can create a site that flows visually.

Colours that are opposite to each other on the colour wheel are called complementary colours. Think of primary blue and orange; red and green; violet and yellow. In their full strength these can be jarring and I wouldn't recommend them for a whole page, but they could be used to make a certain element stand out.

Percentages of these hues could be used: for example, 10% would make them appear pale. Complementary colours aren't always the bright primary colours I've mentioned here. A blue/violet that is opposite to a yellow/orange would have the similar effect. Complementary colours on a website would best be used with one colour being predominately the background and the other colour as a contrast for headings and so on.  Adding percentages of white or black further changes the appearance of these colours.

Percentages of hue

When considering the intended audience for your website, not only the colours are important but also the percentage of the hue. Many of us have heard of the psychedelic artwork of the 1960s. You may have seen the contrast of black and white and neon bright colours that jarred the senses and seemed to be continually on the move. If you want a lively theme, this could be for you - but be very careful to make sure there is plenty of area on your page that is restful for the eyes and that makes reading the text easier. Using the same colours in smaller percentages could give a bright and cheerful effect without the intense vivid contrasts.

Website examples

Sue Whiting's website

Here is a sample of a colourful website for children's books.

On this home page, the dominant colour scheme is deep blue and pale yellow and is used on every page. The pale yellow is the 'white space' that gives a place to rest the eyes and to separate the different elements.

Two colours from the logo are repeated to attract viewers to information, i.e. the light-blue background and the pink headings.

Did you notice the picture of the author in the circle at the right hand side? A circle is a powerful shape in design; not only does it complement the curves of the main page design; it grabs attention. But the author wants her visitors to focus on the information, so I placed the circle image to the right.

There are two reasons for this: It isn't placed in the visually important top left position - I've used that for the logo and the text for her introduction  -  but used in conjunction with the light-blue background, the circle counterbalances the 'weight' of the logo and stack of books on the left.

Discovering Body Logic Example

This next website has a similar design layout but a different colour scheme. Its aim is to inform adults about a book that is a practical and effective self-help guide for treating health issues in a natural way.

As with the previous website example, using colours from the book cover and logo for the design gives it cohesion. 

The placement of  the book cover - to the left and the top of the page -  shows the visitor at a glance that the book is the main focus, and the text information is clear.

A limited colour-scheme of mainly blue and red on a white background and the use of the logo and the figure elements create a balanced design. 

Here is a website for an author who writes funny, zany stories for children.

Website Example 3

By asking questions, I came up with a fun design to attract children and to reflect her personality through her hobbies and favourite colours. She collects teapots so they feature in the navigation graphics on each page. They tip up as the mouse hovers over them.

The main colours are light green, predominantly used in the backgrounds, and a small percentage of the pink for the logo and text link navigation. These colours balance because they are paler versions of the complementary colours primary green and red, which are opposite each other on the colour wheel.

I hope this article helps you to decide which colour scheme would best suit your needs to create a website that is as individual as you are.

"Choosing Colours for Your Website part 3"   is coming soon.
©  Gail C Breese, 2009


The Busy Writer's One-Hour Plot

The Busy Writer's One-Hour Character

Book of Checklists

The Busy Writer's Self-Editing Toolbox

The Busy Writer's KickStart Program

Write a Book Fast