Over half of viewers will immediately leave the page if the colors look wrong
In this final installment I’ll be describing some of the basic color choice guidelines we at OWDT follow to optimize website conversion rates. Remember, over half of viewers will immediately leave the page if the colors look ‘wrong.’ While other elements of design, e.g., composition, hierarchy of information, proportionality of elements, etc., are all important—none has greater impact than color selection.
Three classic approaches
For websites with three colors, a triadic color scheme generally works best—
As you can see, the three points of the equilateral triangle above create one of many tri-color scheme options. This approach ensures that the colors have the same vibrancy and complement one another.
When choosing four colors, a compound color scheme provides a total of four colors, two from each side of the color wheel–
This provides an additional complementary color.
The final classic color scheme approach is the analogous color scheme—
Some designers like the calming effect of choosing three colors next to one another on the color wheel. The downside of this choice is its lack of contrast (although they are differentiated by vibrancy). Because this results in call to action elements being harder to find, I don’t favor it.
Winning color combinations
When working with two strong colors, include a thin neutral white, light grey or black line around their respective shapes to make them pop. Consider the Pepsi logo below, for example, in which the red and blue are separated by a pronounced layer of white-
The universally popular blue also looks great with contrasting bright orange-
In addition,white and greenwork together beautifully, perhaps even better with black borders/highlights, as below-
Choose grey and white for an elegant, subdued look-
Should you want to combine both black and white with a color, blue is the safest choice. But make sure either bright blue or white is dominant, as below-
Should you prefer darker shades, black is wonderfully versatile, but overwhelming as the dominant color. For many readers, a black background makes even the purest white print difficult to read, as you can see in the example below-
Among darker shades, black and bright grey is a powerful combination as is black and orange (i.e., with white included for balance)
Black and white work very well with red too, but make sure red is not dominant, as it then can create a harsh contrast with black. The following example, incorporating light white/gray, provides an attractive balance-
Finally, I’d also recommend black and green with touches of white for an uplifting, clean aesthetic-
Examples of tools that can simplify color selection
- Black and white work very well with red too, but make sure red is not dominant, as it then can create a harsh contrast with black. The following example, incorporating light white/gray, provides an attractive balance–
- Kuler–Developed by Adobe allows the user to create and modify different color palettes. It has some cool features, but has been criticized for having cumbersome interfaces and an inability to lock in individual colors.
- Color Scheme Designer 3 (Paletton)–This software is often recommended as a good choice for beginners because of its simplicity, though it lacks instructional/skill development value.
The acid test
No matter how sophisticated the designer, A/B Testing is the acid test for determining if a particular color palette is going to increase business. (Check out our “The Many Advantages of A/B Testing” blog post in page 16 of our blog archive). This tool is indispensable in helping design teams work with business owners to ensure best results.