After a few posts, we know about the importance of color. Color is everywhere, and our mind is biologically wired to associate different colors with different feelings, moods or signals.
Based on that, it’s safe to say that color might be the single most important choice you’ll need to make when designing for the web or print – whether you create an infographic, build a report, work on a presentation, design a flyer, or make a social media graphic.
But picking colors isn’t easy. It’s both an art and a science. Yes, there are some fantastic tools out there that will help you pick the right color combination. But today, we are going to go the extra mile. We are going to learn one simple rule that will make everything much easier.
If you’ll want to put this article’s teachings into action, you can sign up for a free Piktochart account and create infographics, reports, presentations, posters, brochures, and other visuals online. Graphic design is now accessible to everyone.
The Rule of 3 Colors.
What’s The Rule of 3 Colors?
Let’s start by saying, that as all rules, they can be broken. The Rule of 3 Colors is more of a guideline, than an unbreakable law. However, it’s a super simple tool you can use whenever you are in doubt. You can’t go wrong with it.
The 3 color rule is simple: pick one primary color. Then, pick two other complementary colors.
See the example below.
We picked a main hue (a variation red), and complemented it with two different colors. The main goal here is to simplify things for you and the reader – by going this way, colors don’t fight for attention. As Mies van der Rohe, the uber famous German architect, used to say: less is more. And you can’t argue with a guy who designed this home.
One super important thing to keep in mind: make sure you don’t select three important or strong colors together. In a way, it should be one primary color as a hero, and the rest should be secondary, as a sidekick to the hero.
Once you pick, a 3-color combination, it’s important Keep things consistent. Stick with the same three color throughout the design. Typeface, icons, images, background. There are a variety of fonts and icon marketplaces for you to choose from. Every element should be consistent with your choice. The first example is a perfect representation of this.
You might be wondering: why limit the colors? First, for simplicity’s sake – narrowing your potential choices makes it much easier. Second, to keep the design consistent and pleasing to look at!
Now, off to learn how to pick primary and secondary colors!
How to pick the hero?
Before you pick the color that will define how your design will look like, let’s start by asking ourselves a few questions:
1 – Does one have any preset brand colours to follow?
If you are working for a client, or an existing brand, you should take into account their existing brand guidelines. Brand identity should be kept consistent and hence it is advised to adhere to the brand colors in the designs so the audience would be able to identify the brand presence easily among the sea of other social media posts.
Plus, if the answer to the questions is ‘yes’ and there is already a preset combination – you might skip the trouble of selecting colors.
2 – Does the message comes with a theme/festive season?
Festivities, themes or holidays usually have a preconceived idea of what color should be used to represent them. Let’s go through a few examples:
- In the US, Independence Day (or 4th of July) is represented with red, white and blue. The same goes for Memorial Day and Labor Day.
- Halloween is represented by black, and some combination of creepy orange, purple and green.
- Theme wise, if the topic is about Mother’s Day, one could go about with pastel color
If you have to design for these kind of occasions, it’s better to stick with the basics and go for the preset color combination.
3 – What is the tone of the message you intend to convey?
Now that the first two questions are off your mind, let’s focus on the most important one. If you are designing an infographic, it means there is a specific message you want to convey. Is that message funny? Serious? What’s the topic of the content?
This will steer the direction of your color choices one way or the other. For instance, serious topics are usually best depicted with cool colours (blue, green, purple) whereas fun topics works well with warm colours combination (yellow, orange, red).
It’s important to note that this is not a restriction, but rather a guideline to help decide with the one primary color.
Bonus: Avoid at all costs!
If there is something you need to avoid like the plague, is using neon colours without a solid reason. It is alright if the neon pink is part of the brand identity, but still proceed with extra caution!
Look at the image below. Which color looks more pleasant to the eye?
Deciding On The Sidekicks
Once you’ve picked the hero, it’s time to pick the two sidekicks – two colors to complement your design.
The main question you have to ask is: what color would go well with the primary color one have decided on? This is where the color harmonies and schemes come into picture, as well as the limitation on only two color choices.
We’ve talked extensively in previous posts about this. Basically, you should experiment with complementary, analogous or split complementary combinations as a starter.
For more inspiration, you should check out these two posts we published last week:
A Few Tips From Our Design Team
Now that we know how to pick your perfect color combination, our fantastic Design Team wants to give you a few random tips on designing infographics and picking the right colors.
- It’s good to start with white or neutral (eg: beige) color as background color.
- One could start designing everything in black and white before throwing the colors into the equation.
- It’s best to keep the coloring consistent, example: if blue color is used for the subtitle, keep it the same way until the end of the design, unless one have a solid reason to change the color.
- Be sure that the chosen colour doesn’t affect with the readability of the body text/title. (light grey text is extremely hard to read)
- Also make sure that the text color doesn’t blend into the background. (lime green text on yellow background hurts your eyes).
- Only use light colors on dark background.
If you’d like to learn more, check out our free online course, Fundamentals of Visual Storytelling, which uncovers design tips such as typography, color psychology, images, and more!
