When building and styling your website, choosing the optimum colour scheme can be a very hard task. Choosing the perfect chromatic palette is important in order to communicate your message effectively with strength for your identity.
Important considerations when choosing website colours
- Does your brand have an existing colour/palette to follow? Some businesses will already have a logo, some marketing material in use, or some basic colour guide for its branding. Consider what colours you are using already, what colour/s your logo has, and also if you want or need to make changes on your branding at this point.
- What is the purpose of your website. Depending on what your website is about, you need to define your colours depending on the emotion you want to inspire in your visitors. Read below about colours and their meanings.
- Make sure you know your target audience. Defining who your target audience is will also help you choosing the right colours, it is not the same to colour a website for teenagers, to families, or men and woman, or both genders, etc.
How many colours to use?
This a debatable question, but a good number that designers recommend is 3. If you have too many colours it will get harder to create harmony and balance. If you have less colours your website might look too plain (unless you want to go for a minimal website style).
The 60 – 30 – 10 Rule. This a design rule, generally used for fashion and interiors, but works equally for web design. The rule indicates the use of 3 different colours, and to use them in ratios of 60%, 30% and 10% respectively.
- The 60% will be the primary colour of your site and set the overall tone of your design.
- The 30% should contrast with the 60% to create a visually striking effect.
- The 10% is an ‘accent colour’, which should complement either your primary or secondary colour.
It is better to use ‘neutral’ colours for your 60 and 30 percent colour choices. This will allow you to pick any strong accent colour, since generally neutral colours will ‘go with everything’.
Common colours and their meaning
- Red: energy, passion, excitement, power; also implies aggression, danger.
- Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression.
- Yellow: light, optimism, happiness, brightness, joy.
- Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity.
- Orange: friendliness, warmth, approachability, energy, playfulness, courage.
- Violet: wisdom, sophistication, celebration.
- White: purity, cleanliness, youth, freshness, peace.
- Black: power, elegance, secrecy, mystery.
- Gray: security, maturity, reliability.
- Pink: romance a feminine color.
- Brown: comfort, strength, stability, credibility.
Online Tools to choose web colours
Adobe Kuler – One of the best free online colour scheme tools. You can pick from pre-made color palettes or play with the colour wheel to find the combination you like. Visit site >
ColourLovers – A community based website where you can check out from popular and trending colour palettes, to textures, patterns, shapes, etc. Visit Site >
Color Scheme Designer – Another colour picker wheel tool to let you create beautiful colour palettes. You also have the option to preview the selected combination in a web demo screen – very useful. Visit site >
