# How to Choose the Right Colors for Your Data Visualization

**URL:** <https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197>\
**Category:** 📊 Plotly Python\
**Tags:** figure-friday\
**Created:** [July 30, 2024, 9:12am UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197 "2024-07-30T09:12:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![li.nguyen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/li.nguyen/32/28795_2.png) [@li.nguyen](https://community.plotly.com/u/li.nguyen)\
**Post date:** [July 30, 2024, 9:12am UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197/1 "2024-07-30T09:12:58Z")

</div>

Hello everyone! 🫰

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 🤗.

Using color effectively can significantly enhance the impact of your data visualizations. Based on the last [FigureFriday](https://community.plotly.com/t/announcing-plotly-weekly-data-viz-projects-figure-friday/84953/4) 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.

 ![Source: https://www.atlassian.com/data/charts/how-to-choose-colors-data-visualization](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/b/eb23dd3a36e1c48f767962b44e0883bf01751819.png)

### 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](https://www.color-blindness.com/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.

### 🛠 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](https://www.color-blindness.com/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](https://gka.github.io/palettes/#/9%7Cs%7C00429d,96ffea,ffffe0%7Cffffe0,ff005e,93003a%7C1%7C1):** 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](https://imagecolorpicker.com/):** Online color picker that helps you get the HEX code of a color based on an uploaded image.
- **[Viz Palette](https://projects.susielu.com/viz-palette):** This is a broader color palette tool for checking your palettes on different backgrounds, for example.
- **[Color Thief](https://lokeshdhakar.com/projects/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:

- [A detailed guide to colors in data vis style guides | Datawrapper Blog](https://blog.datawrapper.de/colors-for-data-vis-style-guides/)
- [Data Viz Color Selection Guide | Atlassian](https://www.atlassian.com/data/charts/how-to-choose-colors-data-visualization)

**Happy dashboarding! 🎨**

Li

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 30, 2024, 1:03pm UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197/2 "2024-07-30T13:03:29Z")

</div>



---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 30, 2024, 4:09pm UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197/3 "2024-07-30T16:09:57Z")

</div>

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

> **[Dash pylette](https://dashpylette.pythonanywhere.com/)**
>
> Welcome to Dash Pylette - a Dash app showcasing the power of the Pylette library. This app serves as a tool to extract color palettes from images. Whether you're a designer, artist, or developer, Dash Pylette provides an easy way to generate color...

More info here:

> [@Share Your App - Explore Page - May 2024](https://community.plotly.com/t/share-your-app-explore-page-may-2024/84223/5):
>
> I’d like to submit my app, Dash Pylette, for consideration on the Dash Explore page. Dash Pylette is a Dash app showcasing the power of the [Pylette](https://github.com/qTipTip/Pylette) library. This app serves as a tool to extract color palettes from images. [Dash Pylette GitHub](https://github.com/AnnMarieW/dash-pylette) Live Demo: Explore Page Criteria Advanced Analytics: Dash Pylette utilizes the Pylette library, which offers two methods for creating color palettes: KMeans and Median Cut. For more information, you can refer to the article [Improving the Performance o…](https://arxiv.org/pdf/1101.0395.pdf)

---

<div class="post-metadata">

**Author:** ![li.nguyen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/li.nguyen/32/28795_2.png) [@li.nguyen](https://community.plotly.com/u/li.nguyen)\
**Post date:** [July 30, 2024, 8:31pm UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197/4 "2024-07-30T20:31:57Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [November 20, 2024, 5:27pm UTC](https://community.plotly.com/t/how-to-choose-the-right-colors-for-your-data-visualization/86197/5 "2024-11-20T17:27:17Z")

</div>

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.

> **[The Data Viz Color Picker](https://www.learnui.design/tools/data-color-picker.html)**
>
> Create visually-equidistant color schemes for data visualizations using one, two, or many hues.

This link is brought to you by @jinnyzor
