How to Choose the Right Colors for Your Data Visualization

Hello everyone! :hand_with_index_finger_and_thumb_crossed:

In our last FigureFriday call, I shared some resources on choosing the right colors that I regularly use. @adamschroeder suggested that I create a separate post in case others find it helpful, so here we are!

To give you some context, I am not a designer. I’m a software engineer with a year-long passion for data visualization and design and much of what I know is self-taught. These are a few key takeaways from my learning journey, so take whatever you find helpful :hugs:.

Using color effectively can significantly enhance the impact of your data visualizations. Based on the last FigureFriday submissions, here are the 3 most common suggestions I’ve shared.

1. Keep Colors Consistent

Consistency is crucial. If your dashboard includes multiple charts, ensure the same colors represent the same groups. Changing colors between charts can confuse your readers and make the data harder to understand.

2. Don’t Overdo It with Colors and Limit Your Palette

Too many colors can be overwhelming and distracting. Use colors to highlight key findings or emphasize categories, but keep it simple. Stick to ten or fewer colors in your palette. More than that, it becomes hard to distinguish between groups. Consider grouping smaller ones into an “other” category if you have many categories.

3. Pick Distinguishable Colors

Your colors should stand out from each other. Here’s how to do it:

  • Colorblind Accessibility: About 4% of people are colorblind. Use tools like the Coblis Color Blindness Simulator to ensure your colors work for everyone.
  • Different Lightness Levels: Make sure your colors are distinguishable in black and white, which helps when printing or for colorblind viewers.
  • Size Matters: Whether your colors are in small scatterplots or large area charts, they should be easy to differentiate. For example, light blue and dark blue might be distinguishable in a large area chart but could blend together in a small scatterplot.

:hammer_and_wrench: Tools for Choosing Colors

Many online tools help you pick and test colors for your data visualizations. Here are the ones I regularly use:

  • Coblis Color Blindness Simulator: This tool allows you to test your data visualization for selected types of color blindness by simulation.
  • Chroma.js Color Palette Helper: A great tool that can help you generate sequential and diverging color palettes and optimize them. It also includes a color blindness simulator.
  • Color Picker: Online color picker that helps you get the HEX code of a color based on an uploaded image.
  • Viz Palette: This is a broader color palette tool for checking your palettes on different backgrounds, for example.
  • Color Thief: You can draw a sized color palette from an uploaded picture.

These suggestions only scratch the surface of color theory and best practices, so feel free to explore further if you’re interested. These two articles have been the most helpful learning resources for me:

Happy dashboarding! :art:

Li

6 Likes

Hi @li.nguyen

Thanks for sharing this information - your tips in the Figure Friday challenge are really helpful. I especially like the link to the color blindness simulator and the Chroma.js Color Pallet Helper in your post above.

You also mention Color Thief for generating a color pallet from a photo. I also made a similar app with Dash using the Python Pylette library

More info here:

4 Likes

Wow, this is fantastic! @AnnMarieW - is there anything you haven’t created yet? :smiley:

I just tried it out, and it works great! I also love the name :art: I’ve bookmarked the page!

1 Like

Here’s another good site for picking colors for figures.

Creating visually equidistant palettes is basically impossible to do by hand, yet hugely important for data visualizations. Why? When colors are not visually equidistant, it’s harder to (a) tell them apart in the chart, and (b) compare the chart to the key. I’m sure we’ve all looked at charts where you can hardly use the key since the data colors are so similar.

This link is brought to you by @jinnyzor

1 Like