How To Choose a Great Color Scheme For Your Website

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.

Choosing the right colors for your website
Go nuts - code is much cheaper than paint

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. Check out this article on color psychology in marketing for further info.
  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?

Pick a color scheme for your websiteThis 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

How to choose colors for your websiteFortunately, 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.

There’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.

Visit site.


A Flash-based library of professional color themes. You’ll need an Adobe account to use Kuler, but it doesn’t cost anything.

Visit site.


A design community where people share thoughts and ideas on colors, patterns and lots of other cool stuff.

Visit site.


A product of the COLOURlovers community, this tool allows you to create a palette based on colors extracted from a digital photo. Also includes a range of other color creation tools – very handy stuff.

Visit site.

Calling all designers!

If you know a thing or two about mixing colors and can add something to the conversation, please leave us a comment below this article. We’re always interested in the wisdom of practicing professionals.

Image credits: Choose a Color, Pencil Color Wheel and Open Paint Buckets from Bigstockphoto.

Free Video Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch) Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.