How To Choose a Great Color Scheme For Your Website

You don’t need to hire a flamboyant interior designer named Ricardo to pick great colors for your website.

You just need a a sense of adventure and a basic understanding of what works and what doesn’t.
Luckily for us web folk, choosing colors for your website is a sh*tload easier than choosing colors for your living room. You can make as many mistakes as you need to in the quest for perfection, and the possibilities for experimentation are endless.

3 important considerations when choosing website colors

1. Does your website need to sync with an existing color scheme? This is often the case for business sites that need to reflect the branding that the company already uses.
2. What’s the purpose of the website? If the aim is to sell something, the colors you choose will need to inspire the right kind of emotion in people.
3. What kind of photos and graphics will you incorporate into the site? It’s important that your color scheme matches your images, and vice versa. Photos can actually be a great source of inspiration when it comes to choosing colors for your site.

How many colors should you use?

This is a hugely debatable question, but a good number of designers recommend using only 3 main colors on your website. The more colors you use, the harder it becomes to keep them all in harmony and create a balanced, consistent look for your site.

As a starting point, you could try following the 60 – 30 – 10 Rule, which has been used by interior and fashion designers for many years and works equally well in web design.
The rule specifies that you should pick three different colors and use them in ratios of 60%, 30% and 10% respectively.

• The 60% will be the primary color 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 color’, which should complement either your primary or secondary color.

In conventional design wisdom, it’s safer to make either the 60% or 30% a ‘neutral’ color (white, gray, beige, black and so on). This gives you the maximum number of options when choosing your other two colors, because neutral elements will generally “go with anything”.

Shades and tones for greater variety

Remember also that you have a certain amount of room to move within each color. In many cases, you will need to diversify your palette beyond your three basic elements. Rather than add a fourth and fifth color to your site and risk spoiling the design, try different shades and tones of your existing colors instead.
By lightening or darkening tones in certain places, you can create distinction without upsetting your harmonious three color balance.

Free tools to help you choose a color scheme

Fortunately, there’s plenty of assistance available when it comes to choosing your website colors. You can find a number of excellent (and free) online tools to help you whip up a professional-looking palette.  

here’s a tonne of them out there – these are just a few good ones to get you started:

Colors On The Web

This is a brilliant tool for finding complementary colors and experimenting with shades and hues. You just pick your base color and the website provides a whole range of suggestions