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.
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.
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?
Latest posts by Stephanie Hamilton (see all)
- Website Design Analysis Of Ten World Class Brands - August 17, 2012
- Is Concealed Contact Information Costing You Conversions? - August 3, 2012
- 10 Beautifully Executed Font Combinations For The Web - July 26, 2012