Colors can grab attention and set the tone for a project. But you don’t want to catch people’s eyes for the wrong reasons. For example, this design uses a color scheme from an actual sign I saw recently. Do you like the way it looks?
Chances are you had the same reaction I did. The image grabs your attention, but not in a good way!
In this article, we’ll examine why the design above doesn’t work. Then, we’ll look at a few surprisingly easy ways to improve a project like this by changing just one thing—the colors.
Why Does It Hurt to Look at That Example?
Most people find color schemes like the one in the example above painful. And that’s not just them being dramatic—the colors are legitimately hard on the eyes. That’s because they’re highly saturated. Let’s dive into some basic color theory to explain.
The simplest way to identify a color is by its hue—think of the main colors in a rainbow, like “blue,” “green,” or “orange.” Pure hues are incredibly saturated and vibrant, as you can see here.
A pure hue’s intensity can attract attention, direct the eye, and make things stand out. But using too many pure hues makes it hard for our brains to decide what to look at first. What’s more, if you stare too long at the color bar above, you’ll likely notice how these bright colors also cause eye strain. Pure hues are the design equivalent of screaming, so using a lot of them together—like in our slide example—is visually exhausting.
To fix the example, we need to move to a color palette that isn’t composed of only pure hues. There are an almost infinite number of color combinations, but here are a few stress-free approaches for picking attractive ones.
Quick Fix 1: Desaturate the Colors
One way to make colors less intense is to adjust their saturation. Pure hues are highly saturated colors, so desaturating them makes them less intense and grayer.
The hue in the color bar above doesn’t change (it’s still orange), but it’s more saturated on the far left and progressively less so as you move farther right.
If you’re a fan of vivid colors, not to worry. Just a touch of desaturation can calm down pure hues. That means you can maintain a bright color’s liveliness while making it easier on the eyes.
Here, I took the original design and slightly desaturated each color. The image still has a friendly, colorful feel, but it’s less aggressive than the original.
You might also notice that the new design feels less chaotic. That’s because it has fewer colors. The menu label is now white, rather than its original vivid green. White simplifies the color palette and reduces the visual disorder of the original design.
Accessibility note: While we’ve addressed the eye strain challenges, there’s still not enough color contrast between some circles and the background to meet accessibility standards. To fix that, we’d need to continue tweaking the colors further with the help of a color contrast checker like this one.
Quick Fix 2: Use Part of the Rainbow
Our original colors were intense, but they also seemed randomly chosen. You can make your design feel more harmonious by using color combinations with a unifying theme.
At first glance, this redesign has the same bright, friendly feel as the previous solution. But take a closer look, and you’ll notice that some circles have changed color. They’re also arranged much like the colors in a rainbow, with magenta shifting to orange—and orange shifting to yellow, green, and blue. That layout creates a subtle visual pattern that makes the colors look like they belong together.
Quick Fix 3: Go Monochromatic
Want a color palette that’s hard to get wrong? Try a monochromatic one.
In this redesign, all the circles are lighter or darker versions of the same hue, so they immediately feel like they belong together. Also, the slow progression from light to dark subconsciously reinforces the idea of moving through a multi-part course.
Accessibility note: It can be tough to find a background color that contrasts enough with both the lightest tints and darkest shades in a monochromatic color scheme. This redesign shares one solution—using a high-contrast outline around each color.
Quick Fix 4: Look Online for a Color Palette
If you’re uncomfortable putting together your own color combinations or feeling stumped for ideas, the internet is here to help!
Try doing a quick Google or Pinterest search for “curated color schemes” for some eye-catching ideas. Or, check out the trending palettes on Coolors—which is what I did for the redesign above.
In this redesign, the new color grouping didn’t pop as much on the original dark blue background. So I swapped it out for a more low-key off-white. When in doubt, a white background is another design choice that’s hard to mess up.
Quick Fix 5: Use a Random Color Palette Generator
Coloors has another valuable feature for creating polished combinations: a color palette generator. I used it to pick the colors in this redesign.
Searching online will reveal numerous color scheme generators. These sites create attractive color combinations by using algorithms or pulling the dominant colors from an inspiration photo of your choice. While your results may need some tweaking to get things just right, they’ll get you started with a solid foundation. Plus, it’s pretty cool how well these sites can pull together attractive color combinations on their own!
Quick Fix 6: Simplify and Make Things Smaller
The previous solutions are handy when you have a lot of say in your color choices. But what if you’re stuck with an awkward set of colors because of brand requirements or stakeholder preferences?
The first thing to do in those situations is to simplify how many colors you include on a single slide. In this redesign, I used the indigo blue sparingly and skipped the green entirely. That reduced how many design elements were competing for a viewer’s attention.
I also simplified the background. Rather than sticking with the highly saturated indigo blue from the original design, I swapped it to a less-intense off-white. That gave the remaining colors more space to stand out—and white is rarely considered off-brand.
Then, I took the remaining high-contrast circles and made them smaller, further reducing the design’s intensity. Shrinking the circles also put more white space between each vibrant color—another good trick for keeping pure hues from feeling overwhelming.
Is the final result something I’d put together if given free rein on a project? Not really. I still find the colors a bit grating to look at. But the outcome is a good compromise solution when you can’t change the color palette at all.
Wrap-Up
Some color schemes are painfully awful to look at. But thankfully, even the worst of them can be delightfully simple to fix. You can get ideas for more attractive color combinations by thinking strategically about saturation, harmony, and the number of colors you use. And if you need a bit of assistance, pre-created sets and color palette generators can give you tons of inspiration.
Looking for more tips on using color in your projects? Be sure to give these articles a read!
Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. And be sure to share any recommendations you have for working with color in the comments below.
Published 3 years ago
Version 1.0
