Choosing Website Colours Part 2
by 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.
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
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.
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
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.
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
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.
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