Choosing The Right Colour
for Your Website Design
Why Colour is Important:
selection tutorial is geared towards new web designers. The use of appealing colour combinations on a
website can drastically enhance your site and achieve the desired emotional
response from the viewer. This can significantly increase the number of users
who continue browsing your website rather than losing interest and moving on to
other sites. It can also increase the
desired effect that you are aiming to achieve from your site, also known as web
conversions. This could be in the form
of sales, email subscriptions, subscribers and many more. This is achieved by using visually
appealing/effective calls-to-action buttons, such as “Add to Cart”, “Sign up
with the basics of the colour wheel.
Primary Colours are Yellow, Red and Blue.
These are colours that cannot be created by mixing any other
colours. Instead these are the base
colours that are used to create all other colours on the colour wheel. All colours have shades and tints. The pure colour, which is shown on the color
wheel is called the ‘hue’. A shade is
when you add a percentage of black to the pure colour. A tint is the result of adding some white to
colours are Purple, Green and Orange.
These are created by mixing equal amounts of adjacent primary colours.
Purple: made by mixing Red and Blue.
Green: made by mixing Blue and Yellow.
Orange: made by mixing Red and Yellow.
Tertiary colours are made by mixing equal parts of neighbouring Primary and
Secondary colours on the colour wheel.
colour combinations are tried and tested combinations that are typically
visually appealing to the eyes.
Complementary colour scheme
achieved by selecting one hue and using any of the tints and shades of that
colour. This style of design is very
calm but you must carefully choose varying degrees of shades and tints in order
to see a definitive contrast between the colours.
achieved by selecting 3 colours that are next to each other on the colour
wheel. This style of design is very
soothing to the eyes and lends well for a relaxed calm site.
achieved by selecting 2 opposing colours on the colour wheel. This style of design is great for colour
contrast but can be a bit hard on the eyes.
You must be careful when using this colour scheme. It can be very busy if you choose the actual
hues. Shades and/or tints can make this
colour scheme more pleasing to the viewer.
Complementary colour scheme:
of 3 colours requires that you first choose one colour from the colour wheel
and its direct opposite. Then omit this
second colour and instead replace it with the 2 adjacent colours. The original colour and these 2 adjacent
colours combined make up the split complementary colour scheme. This style of design is similar to the
complementary scheme, in that it offers good contrast. Choosing this scheme is safer than the
complimentary as it not as harsh on the eyes.
achieved by selecting 3 colours that have an equal distance from one another on
the colour wheel. This colour scheme can
be very tricky and is best used once you have lots of design experience. You can easily have an overtly bright webpage
that is too shocking to the eyes with simply too much variances in colour on
AFFECT OUR MOOD
Silently Affects our Mood and Interpretation of the Website Before Even Reading
colours spark different feelings and moods within the reader. Here are some general descriptions of
feelings associated with different colours:
interpreted as a colour of trust, competence and masculine.
seen in large corporations and/or IT professions.
a calm and relaxed feel. Can be very peaceful.
of royalty and often associated with wealth.
feminine and romantic.
passionate, dangerous, and often seen as too vibrant/loud.
for call-to-action buttons as it is attention grabbing.
be perceived as angry. May also represent blood.
nature. Very calming and a sign of
renewal/regeneration – liveliness.
used in the environmental industry.
wealth and a positive flow of money.
also be perceived as sign of jealousy.
put – Yellow is a Happy colour.
for children’s websites. Largely used as
a call-to-action button as it is attention grabbing.
and considered a colour that stimulates action.
used as an accent colour that accompanies popular blue very well.
a warm and cozy feeling.
used in feminine web spaces and children’s sites.
grief in some cultures.
power, intelligence and sophistication.
for contrast and creating a luxurious feel.
grief in some cultures.