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

by 5 12/30/2011

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 is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

5 COMMENTS

Oğuz Çelikdemir

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.

January 1, 2012 Reply

Andy Paddock

Your link to ColorRotate is badly formed

January 7, 2012 Reply

Rohan

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.

March 28, 2012 Reply

Ajit Tiwari

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.

August 31, 2013 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>