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

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.

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.

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

 

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?

About 

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.

Comments

  1. Oğuz Çelikdemir says:

    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.

  2. Andy Paddock says:

    Your link to ColorRotate is badly formed

  3. 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.

  4. 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.
    Thanks.

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

Trackbacks

  1. […] on the train to pick a color palette for Tangerine. Searching the web for advice. Found this post that describes the 60-30-10 rule which makes a lot of sense (probably that’s why it’s a […]

  2. […] thing still become a big question by designers, but on pick the perfect website color combination there are three main colors with the 60–30–10 rule is the most designer recommend. Which it […]

  3. […] According to Crazy Egg, the primary color should make up about 60% of the design, the contrasting color about 30%, and the accent color about 10%. However, there are successful designs using a variety of different color scheme practices, so don’t worry too much about the mathematical side of things. […]

  4. […] 3 Time-Tested Ways To Pick The Perfect Website Color Combination […]

Comment Policy:

Your words are your own, so be nice and helpful if you can. Please, only use your real name, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. We rarely allow links in your comment. We accept clean XHTML in comments, but don't overdo it please.

Speak Your Mind

*