If you aren’t a trained designer, choosing color combinations for your site can be a minefield. With layouts and typography, there are some relatively simple rules that will produce at least passably good results. But there are tens of millions of potential color choices and trillions of possible combinations. Hitting on colors that look good, look good together, and reflect the character and branding of your site is a hair-curling task for someone without training.
It’s also incredibly important to get color choices right. Some people go too far when they talk about the impact of color psychology, but there are measurable effects — both psychological and aesthetic — associated with particular colors.
Why Does Color Matter?
Color impacts users’ perceptions of your site. Sometimes those effects are quite subtle. We’ve all seen sites with ugly color choices (remember MySpace pages), but the effect doesn’t have to be quite so obvious. Color choice can influence how users perceive the coherence of your site, whether it seems to them a polished and elegant combination of elements or a mishmash of ill-matched bits and pieces. Those negative perceptions and other subtle reactions can impact conversion rates, trust, and the reputation of your business. Much like typography, if you have awesome content and a terrible color scheme, your site will not get the engagement and attention it deserves.
Color theory is complex, so I’m only going to cover a couple of basic terms here, before referring you to some in-depth resources.
The first thing to understand is how to find complementary colors. Some colors go well together, others look awful. If you’ve used a color wheel before, you’ll have a basic grasp of what I mean. Color wheels arrange a set of hues (which are the same as colors for our purposes) in a circle. Colors which are opposite each other on the wheel are pleasing to the eye. If you have a primary color in mind for your site and want to find complementary colors for highlights and other elements, you can use a color wheel to find a combination that will work together.
Complementary colors are not the only color combinations that can be used together. Analogous colors — those that are close together on the color wheel — provide a subtly differentiated color scheme.
There are several other strategies for choosing colors that go well together. You can find more detailed explanations of color theory from these experts.
- Basic Color Theory
- An Introduction to Color Theory for Web Designers
- Color Theory for Designers, Part 1: The Meaning of Color
Tools For Discovering Great Color Combinations
American readers will find the name slightly disconcerting, but ColourLovers is an excellent site for color inspiration. It’s essentially a social network made up of people who love colors and share their favorite combinations. There are thousands of great color combinations that you can use as a starting point for your own designs.
Adobe Color is a delightful playground for color seekers. Its two main features are a powerful interactive color wheel and a browsable selection of color combinations akin to ColourLovers.
The color wheel allows users to explore color combinations according to a variety of combination rules They include the complementary and analogous rules we discussed earlier, as well as triadic, compound, and monochromatic combinations.
Paletton is another powerful color wheel tool for exploring combinations.
If you apply the knowledge of color theory gained in this article and the experts we’ve linked to with the tools we’ve suggested, choosing color combinations for your sites will be a less daunting task.