Working with color in design can be tricky, fickle business. I’ve spent many long, sometimes frustrating hours trying to nail down color combinations for websites I’ve made. There’s never really any easy answer to finding the exact right color for anything you create.
I wish there was, though. It would save me and many others a whole lot of time if we could just write out a description of what we’re working on and have some online service spit out the perfect color codes for us to use.
But we don’t live in that world yet, if we ever will. For now, we’ll just have to keep going with what feels right to us when making our designs.
While there may not be the ideal tool for us to figure out what colors we should use, there are some good, time-tested rules we can abide by to avoid making color mistakes. Avoiding the three I’ll be writing about in this post will get you most of the way to a good design. After making sure you follow these guidelines, all that’s left is finding those perfect, elusive colors.
Piece of cake, right?
1. Using too many colors
The first color mistake that you want to avoid in your designs (and going forward, this advice applies to all design work) is using too many colors.
There’s nothing that makes a design look amateurish, and sometimes plain awful, quite like loading it up with more colors than it could ever possibly need. It can say many things about the designer:
- They don’t have much of an idea about what good design is.
- They lack the confidence to stick to a limited set of colors.
- They have trouble making decisions.
Any one of those qualities is sure to wreak havoc on what could be a great design if it weren’t for the messiness that having too many colors brings. Let me hit that point a different way—you could have an otherwise astounding design, but if you use too many colors, all of them fighting for dominance, then the great design is going to get lost in the muck.
As an example of the detrimental effect that too many colors can have on someone, take a look at the infamous website for Ling’s Cars.
There’s a whole lot going on with this website, to the point where it’s actually become well known and liked for being ridiculous. However, from a color perspective, it’s not an appealing looking website. Every possible color that could be used is being used and not in a pleasing way.
Needless to say, it’s tough to look at.
On the other hand, I have seen appealing websites and designs that make great use of many different colors. For instance, take a look at the site for the OVO Foundation.
There are a lot of different colors being used—red and orange and yellow and green and white and black—and yet it all feels like it works together. The use of many colors actually enhances the experience of this website.
The OVO Foundation has built a site that uses several different colors in a thoughtful and playful way. It’s a pleasure to see.
For any design, I recommend erring on the side of fewer colors. Work on finding around three colors that go well together: a main color, a darker shade of the main color, and a contrasting color. For instance, a light red, a darker red, and a green color. Three colors are usually all you’ll ever need.
2. Not taking advantage of color schemes
Color can have a powerful effect on our emotions. It should come as no surprise then that combinations of colors can actually amplify the effect of the individual colors. I've written about how color can affect us and I'd love for you to read more on the topic:
When you find what you feel is the perfect color to represent your design (or brand or personality), then your next step should be to find additional colors to flesh out your design. Relying on a single color for everything is a good way to end up with a boring design.
Nobody wants a boring design, right?
Color schemes are here to help us bring life to our designs. They give them the necessary character that had been missing before color was added. Without good use of a color scheme, Dandy Cat Design itself wouldn’t be looking as good as it could.
Color schemes please the eye, yes, but they can also be functional. For example, say we’re using a combination of blues and purples on a website—an analogous color scheme. We could be relying on the blue color for our main heading text, the color of our header and footer, and even as a background color behind some images.
But we’ve also got buttons that we want our visitors to click. These can be great call-to-action buttons, but if they’re not standing out in the sea of blue that we’ve just made, then they’re going to be ignored. If we set these buttons to our chosen purple color, then they’re going to encourage people to click on them because they’re standing out.
Using a well thought out combination of colors, a scheme if you will, gives your design personality and increases engagement. Not relying on a good color scheme can turn even the most exciting design into a dull one.
3. Low or unpleasant contrast
Contrast is an important aspect of all design. Without good contrast, a design can turn into a puddle of sameness, at best.
At worst? Oh boy, it can get pretty bad.
That website is using a very dark color for the background (which isn’t necessarily a bad thing), but it’s also using a very dark color for its text. The combination of a dark background and dark text makes the entire thing impossible to read.
Using light colored text on a light background will give you the same result. In fact, using certain colors together is a great way to make a design terrible to look at and hard to read. It’s an assault on the eyes, is what it is.
For a quick example of the difference between good contrast and bad contrast, look at this image from i6 Graphics:
The first block of color is using a combination of colors that clash with each other so badly that it hurts. The second block is using similar colors for the text and background, but the text is so light that you almost have to squint to see it. The third block shows good contrast—its text and background colors go well together and the text is light enough to be readable.
Good contrast is a key tool in the creation of any good design. With bad contrast, you risk upsetting people with a poor color combination or giving them a headache as they try to read your text. Make sure you pick colors that go well together and use high contrast text in a way that even your grandparents can read it.
It can be all too easy to let the color in your designs go off the rails. It’s a slippery slope that many people have fallen down. That’s why I believe it’s important to learn what goes into a good work of design.
Making something that looks appealing isn’t a thing that happens by accident. It takes care and time to create a pleasing design.
Avoiding the three color mistakes listed in this post is a good way to help ensure that your design doesn’t fall down that slippery slope. You’ve already got an eye for what looks good, I’m certain of that. All that’s left is knowing exactly how to avoid the simple mistakes that can bite you in your designer butt.
Be colorful, cats.