3 Time-Tested Ways To Pick The Perfect Website Color Combination

by Stephanie Hamilton

Last updated on April 25th, 2018

Color communicates with the viewer on an emotional level.

Without them being aware, the colors you choose for your web design stir up different moods with the user.  Color is the most immediate way of creating a good first impression. The challenge is to combine color while giving the website a unified and polished look.

There are numerous methods for choosing a color combination.  Here are three of my favorite ways to choose a color palette for a web design project.

Method 1 –  Start with a blank canvas

The first method is to build a color palette from scratch.

It’s helpful to use a tool for this.  Here are a few that I have used:

How many colors should be used?

Although there is not a hard and fast rule, the more colors you use, the harder it becomes to established a unified design. To borrow from interior and fashion design, the 60-30-10 rule states that three colors should be used in varying degrees (60%, 30%, 10%) to create the perfect harmony.

  • The primary color should cover about 60% of the space and create the overall unifying theme of the 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.

Experiment and use as many or as few colors as you like. You might start with 5 colors and then add or subtract based on how you progress through the design.

Using Tints & Shades

In scenarios where you have to use more than three-five colors, tints and shades can be used. An example may be content-rich web pages where you need to visually separate side bars, captions, and tables from other content. The result will unify the design without the need for a fourth or fifth color.


Tints and shades can be used to provide additional color options without clashing with your existing color scheme.

Method 2 – Start with an image

Photos can be a great source of inspiration when it comes to choosing your color scheme.

When incorporating images into the design, whether they be stock images, original photography or graphic design, coordinate colors between them and the layout. This will create a unified design. It may be that the photograph inspired the design, and in this case fitting the images into the design should be simple. We tend to borrow color inspiration from photographs instead of the other way around.

live africa

Photographs are often color inspiration for web design, as is the case of the above website. Our eyes recognize the color relation by instinct, which in turn provides a strong connection for the user. When you borrow a smaller amount of color inspiration from a photo, additional parts of the layout are brought to our attention. In the case of Live Africa, the logo has much more emphasis.


In the above example, large amounts of color coordination is used between the main photograph and the rest of the website. You can see the color scheme from the photograph permeates all other elements which creates a unified visual identity.

africa oasis project

Blue, browns, and other earth tones have been borrowed and successfully translated into the design of the Africa Oasis Project’s website. The colors along with the texture of the website form an emotional impression on the visitor while giving them a glimpse into the project’s mission.

Method 3 – Start with the business goals

Color can also be used to elicit an action in someone.

If the website’s goal is to sell something, choose colors that will inspire a an emotion in your site visitor.

Market researchers and brand managers have used color psychology to influence product engagement. Examples of this in practice include restaurants that are usually red and orange, banks and financial institutions are often blue, while luxury products are typically packaged in black.

Discount/coupon sites tend to utilize bright color schemes. The color scheme on Groupon translates into a sense of urgency. These sites are about grabbing a deal at the last minute, and bright colors contribute to this game-like appeal.

hotel missoni
Hotel websites usually have a colour scheme of white, blue, black or green because of the symbolic connotations of these colors. Warm colors are also used as they create a comfortable feeling for the visitor. The website for Hotel Missoni uses bold colors and illustrates how color has to fit within the color scheme established by the image. The use of background images means the design can’t be physically separated. The result is a unique looking website with a subdued layout.

camden military
College websites have a large amount of content to squeeze on the site, which can make it a challenge to design. The Camden Military Academy used strong, universal colors that connotes trust and dependability. The design uses three colors – blue, red, and yellow, with tints used to differentiate content. The 60-30-10 rule can be seen here: Roughly 60% of the site is a shade of yellow, 30% in the form of blue, and 10% in the form of red.

Carefully selected color combinations along with tints and shades will evoke different reactions, moods, and feelings in the minds of your viewer.  The best way to develop your color sense is to view lots of designs.

What methods do you use to pick the perfect website color combination?



Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    June 1, 2016 at 3:46 am

    Hi Kathryn,

    Thanks for the useful article.

    Most bloggers think that they need photoshop skills or hire an expensive designer to make their website look professional.

    I’m not a designer or professional photoshop guy but I’ve just changed my website colors to match my Favicon and future logo to make it more like a brand and the result was great.

    I’ve shown the full process step by step how to choose a perfect color scheme.

    Would be great to have some feedback from you.

  2. Anonymous says:
    March 24, 2016 at 7:43 pm

    It’s difficult to find experienced people inn this particular subject, however,
    you sound like you know what you’re talking
    about! Thanks

  3. anil says:
    February 3, 2016 at 6:55 am

    Nice post for color library. i was searching for how we can think for using exact color….any help ?

  4. Thomas Wagon says:
    February 4, 2015 at 3:13 am

    nice blog. Its helped me select great combinaton for my website. Cool!

    • Kathryn Aragon says:
      February 4, 2015 at 10:18 am

      Glad it helped, Thomas! Good luck with your website.

  5. Ajit Tiwari says:
    August 31, 2013 at 10:19 am

    Hello Stephanie,
    thanks for the great post, as i was confused in choosing my web color for my blog, but while surfing i found that
    Adobe Kuler link is not working.

  6. Rohan says:
    March 28, 2012 at 10:57 am

    Another option to csidnoer is Office Live Small Business. You’ll get templates and design tools to help you create your website and you can use the online community for help and how-tos – there are blogs, Q A and demos. You can upload pictures and put buttons on the page for online payment. There are free and paid features.

  7. Andy Paddock says:
    January 7, 2012 at 12:33 pm

    Your link to ColorRotate is badly formed

  8. Oğuz Çelikdemir says:
    January 1, 2012 at 3:57 am

    Great article that I read until now which inspire me a lot specifically “tint & shades”. Would be nice to see an example process to select a basic color schemes without real world example.

Show Me My Heatmap

@CrazyEgg is the ultimate #bloggertool.

Everything Food Con


What makes people leave your website?