I asked other designers what they were struggling with when it came time to pick a color theme. They gave me a wide range of answers, some about how easy it is to fall into a color rut, while others tend to browse colors and hope for the best. Others mentioned struggling with issues of contrast. These are all challenges we face as creative people. Asking ourselves the right questions and honing our eye for color can help us overcome them and be more effective with our designs.
Exploring color and studying themes is good practice, but it will suck the time and energy out of a project if you do not take a focused approach to choosing a color theme. When it comes time to plan for a specific purpose like an infographic, every choice should be deliberate.
Which Color Theming Tool is Best?
When we talked about researching color theory, I introduced some benefits to the big papa of color theming tools, Adobe Color CC. But what if you don’t have an Adobe account or want to try something else? I have rounded up three color palette tools for us to pit against each other in the Design Arena of Destruction(™). Which one will win the hearts of designers and other creators?
Setting up the Design Arena of Destruction
I chose the same photo for every color palette/theme tool. It is a photo I took a while back at a local park. We have some neutrals, a blue, and a pretty strong mix of about 30% green in the photo. This should be a great source for infographics about science or healthy living.
Three Color Palette Tools Enter, One Tool Leaves
I uploaded my image with a simple browse/upload form. The site then went completely blank, which was a bit scary. No progress bar or explanation. Maybe it doesn’t like Safari? It choked on Safari and the image was not that big, only 3 MB. I tried in Firefox as well. No dice. So that was a total bust. It may work in IE or Chrome.
I was not able to upload my image using this tool, so I used colors from the image as a jumping off point. There were a lot of options for exploration, but I did not find it very easy to use if I already knew exactly what color I wanted to start with. The website is only one option though. There is an OS app and a Google Chrome app which may come in handy.
To use this tool you move your mouse or pointer up and down from light to dark, and left to right to change the hue. Scrolling changes the saturation (how much color is in the color). Each time you click you pin a color. This will cause swatches of colors to stack up as you pin them. I was able to put together a pretty nice initial palette to refine. There is even a little hidden window where you can tweak the swatch to exactly what RGB or HSL you want by clicking the little gear icon. The app is still in development, but you can sign up to know when it launches.
Okay so the initial trial in the Design Arena of Destruction created more questions than it answered. I like a lot of control in my tools, so I felt most of them either tried to oversimplify things for me and/or had such mysterious controls that I wondered if maybe aliens from outer space were testing me for some secret purpose. My favorite of the three was Color Hailpixel. I will also download Mudcube’s Color Sphere and get more familiar with it to give you all a more thorough review.
Getting Out of a Color Rut
Uploading a photo or making a collage of inspiration and pulling colors from that are a good start, but they are only a beginning. You need to analyze your color choices with at least as much energy and care as you spend on examining data for patterns and creating the story for your infographic. Do the colors you chose accent the story? While you should not rely on color alone to set the mood, it should add to the story, not distract or conflict with it.
A tool like Paletton h
as a lot of options for choosing 2 or more colors and you can see your choices instantly displayed to the right. The format of display can also be changed. I recommend you already have at least two colors to plug in that are not the same colors you used in the last five projects. Paletton will try to help you by suggesting a light color to match any dark or medium range colors you pick. You need a dark color and a light color (white or close to white that has high contrast with the dark color). Then secondary or accent colors for areas of high attention. You can use tints for a monochromatic look. Paletton has a checkbox for monochromatic to make it easy for you.
You don’t need to make your infographic a rainbow. It is not a bag of skittles. Mmmm, candy. The best way to get out of a color rut is to put your colors to work supporting the story of your design.
How Many Colors Should I Use?
You can use as few as two colors, one light and one dark, but most infographic designs use at least three. I used eleven (!) in a recent infographic. 80% of the infographic used three key colors, with the others acting as accents. You need the right proportion of colors in your infographic. If you take a look at successful infographics, they restrict the number of colors used for the typography and the background. Deliberate choices and restricting the palette keep the design cohesive.
Don’t Forget About Contrast
Contrast is very important for digital pieces. While the resolution of screens overall has improved, the easier it is to read your infographic, the more likely you will achieve your goals. In general, light colors on dark colors or dark colors on light work best. You can use a tool like the WebAIM Color Contrast Checker to verify contrast. Lucky you, they even created an infographic about web accessibility. Another resource is Check My Colors. It goes through every color in your DOM. Just enter your URL and it will test the elements on your site and loads the results after a couple of minutes.
Five Questions to Ask
- Who is your audience? Fashion forward? Tech Savvy? Old or Young? The more specific and niche you can get, the better. Is it Marketers interested in Marketing Automation who are overworked and want a little fun to brighten up their day?
- What is already done? How can you stand out? (black orange juice carton). This is where research pays off. Knowing what you don’t want to do can be just as or more valuable than knowing what you want to do. Constraints help define the arena of creativity.
- Do you have an existing brand or style guide?
- Does your infographic have a theme? A successful one I saw recently used the idea of Rockets and a fun futuristic space city. This theme supported the overall idea that marketers needed to update their tools and could have fun doing it.
- What is the mood you want to convey? I was reminded of this gem by a fellow designer when we were talking about color themes. She is right – color more than anything else in your design conveys mood. Consider films and tv shows. Horror movies use a lot of fake red blood. Romance scenes use soft lighting and warm tones. SciFi uses a lot of night time shots, shadows, weird lighting and shots of bright or neon colors. You can do the same to set the mood for your design.
Even More Color Resources
Color – Messages & Meanings: A PANTONE Color Resource by Leatrice Eiseman
I have worn my copy of this book out so much the binding is cracked and the pages are falling out. The print version is the only way to go. With it, you get a huge range of ready made color groupings and each major color group with selections from the Pantone color books and explanations about the history and meaning of the color family. This is an amazing resource for any creative.
Colour Lovers: http://www.colourlovers.com
A social way to see what palettes others have made and create and share your own palettes and themes.
Next time we will take a deeper look at color theory and look at why it matters when producing infographics. I’ll also share everyday tips on using color in print and on screen. We’ll also explore how to troubleshoot color calibration so the colors on your screen and the colors on your printer are the same. Or at least calibrated so they really are the same whether they look that way to your naked eye.