Color Harmony in Data Visualization
Hi everyone! In this medium post, I’ll talk about the harmony of colors and points to consider when visualizing data. Let’s get started!
Sometimes a picture is worth thousands of data.
Data visualization is the practice of translating information into a visual context, to make data easier for the human brain to understand and pull insights from. We create a story with visualization, and we narrate this story to the people. However, aesthetics also plays a significant role in this process if we are to leave the desired impression and present the intended message well. The minute we look at most data visualization examples, it becomes evident that aesthetics is not given as much importance. And to better demonstrate what we want to tell in these stories, we should resort to the magic of colors.
Let’s talk about this by comparing a bad and good visualization example in terms of the chosen palette.
When we look at the visualization on the left, we see colors that are opposite to each other, incompatible, and do not make any sense.
Looking at the visualization on the right, we notice a color transition depending on the point made, a visual that does not disturb the eye and is more aesthetic. (Supposing that red is chosen on purpose because colors have a meaning on their own, and it is crucial to use them correctly.)
What is Color Harmony?
Color harmony is a technique of showing the visualizations we create in the most meaningful, most aesthetic, most eye-catching, and at the same time, the simplest way. As it demands a creative approach, using this technique successfully requires knowledge of color theory and a touch of artistry. After all, data visualization is an art in itself.
In color theory, we know that the three primary colors are red, yellow, and blue. But as we go down to different color tones, we have hundreds of colors, as seen in the visualization above.
Asking the Right Questions When Choosing the Right Colors
When discussing the harmony of colors in our projects, we need to consider the entire data visualization process. And as we start this process, we should first pay attention to what and for whom we are creating this visualization.
To do this, we’ll have to answer a few questions: What do the colors we use in the images mean? What is the subject? What this image we are preparing is about? How many different color tones would work for us?
Before answering any of these questions, let’s look at the meaning of colors first.
Meanings of Colors
After looking at the meaning of the colors, you may realize that you are familiar with some of them. You might think, “Oh! That makes sense.” We encounter many advertisements during the day. And you’ll come to notice that they use colors consciously in these advertisements based on their meanings.
For example, when we see red, we are reminded of love, passion, motivation, and energy. When we see orange, we feel emotions such as novelty and sincerity. So, when visualizing, remember that colors have meanings and they make our visuals come alive with associated feelings.
It is worth mentioning again that we do not have only six colors whose meanings we have seen above. There are hundreds of colors in different tones. What should draw our attention here is that the meaning of our visualized data will be based on the meaning of these main color tones.
The Key Color as a Starting Point
We first need to determine the main color tone in the image we will create. Here, I want to reinforce this idea with a few good examples.
You all know Netflix. The main color tone of Netflix is red. You can feel it, as in its logo. Or you must be using Spotify. Spotify’s main color tone is green.
Similarly, we also need a main color tone in the visualization we’ll create. However, if we were doing a data visualization about Netflix, we would take the red and create an image using colors compatible with it. Likewise, if we were working on a visualization for Spotify, we would choose the color green as the main color and then use a few more suitable colors.
Harmonious Combinations from a Key Color
We have decided on the main color. In the second step, we decide on the colors that are compatible with the main color tone. There is no exact criterion here because we can’t possibly say that it is always right to use gradient colors that are compatible with the main color or to use contrasting colors. It is not an exact science. We can’t know what we will encounter until we try it, so we should try and see how it will look when deciding on the colors.
Let’s say we chose three colors, and they look amazing side by side. But when you use these colors in graphics, it may look very uncomfortable and disturbing. The point is, working on harmonious combinations requires being flexible in color choices throughout the entire process. Combinations might change for our visualization through the process, so we shouldn’t think that we’re stuck with our choices.
How many different shades of color should I use?
If you want to produce quality work while visualizing data, you must have a quality color palette. However, when it comes to the number of shades, there is no strict, universal rule. It would be best if you looked for an answer to, “How many different color tones do I need to prepare a quality visualization?” and go from that.
After deciding on the primary color tone, using a maximum of three or four accompanying color tones should produce a good visual harmony. However, keep in mind that this three-four number is just a suggestion and not an absolute rule. Your visualization might need more or less.
Sometimes we use two different color tones in the visualize we create, we achieve a perfect harmony, sometimes we use 5, but still a beautiful image does not emerge. So what we really need to pay attention to here is to find really compatible colors by trial and error.
Use soft colors!
When visualizing data, we emphasize critical information with dark and striking colors. To represent any other information, we should refer to soft colors.
Why? Easy. Because we do not want critical points to pale in comparison to less critical data while visualizing. Choosing soft colors ensures that critical information doesn’t lose emphasis. You will have a beautiful color palette when you consider the image as a whole. Let’s see a good example now.
I’d like to share with you a good example on this subject.
When you first look at the visualize you see above, you may feel that the main color is a purple hue. Other than that, the yellow and green tones are so beautifully chosen that they do not stand out in the visual and do not disturb the harmony in the general appearance. So you can imagine how bad the image would look if a bright yellow tone was chosen, a bright green tone. By using these soft tones, they created a great visual and enjoyable to look at. 🤩
Websites where you can find a color palette:
Finally
Hopefully, this blog has taught you the critical points about the harmony of colors while visualizing data. The important thing now is to use this information in your own applications. See you in the next article!
Resources
[1] 25 Tips to Instantly Improve Your Data Visualization Design. (2021, Sept 13) Affde. https://www.affde.com/tr/25-tips-to-upgrade-your-data-visualization-design.html
[2] Cisneros, M. (2020, May 06) Picking the Right Colors. Storytelling with Data. https://www.storytellingwithdata.com/blog/2020/5/6/picking-the-right-colors
[3] Tempone, D. (2021, Sept 08) What Is Color Harmony and What Types Are There? Domestika. https://www.domestika.org/en/blog/8679-what-is-color-harmony-and-what-types-are-there
