If you don’t like the default colors in data visualizations such as bar chart or pie chart, I suggest you check out a color palette that is designed for use in data visualization.
It is now easy and common to visualize a data set using a variety of tools; however, the data visualizations generated usually come with a color scheme that does not look very appealing. As an example, here’s a data viz created using infogr.am, showing the default color scheme:
This set of six default colors doesn’t look very appealing and can use some improvements. Infogr.am allows user to tweak the default colors, but most people, without some art training, are at a loss as to what colors would work better.
Then I read about a recommended color palette in Stephen Few’s book, Show Me the Numbers, a popular text on data visualization. With this color palette, I made some changes to the above sample pie chart. Some people may argue otherwise, but to me, this color scheme looks much better:
Few’s color palette has nine colors – he actually recommends not to use too many colors in one data visualization. The sample chart above uses six out of the nine colors, and below is a chart showing Few’s nine-color palette; colors in this palette can be tweaked lighter or darker to suit different uses.
In his book, Few provides RGB codes for colors in the palette, and I took the liberty to convert the RGB codes to HEX codes for use on the web. Try these colors for your web-bound data visualizations:
- 4D4D4D (gray)
- 5DA5DA (blue)
- FAA43A (orange)
- 60BD68 (green)
- F17CB0 (pink)
- B2912F (brown)
- B276B2 (purple)
- DECF3F (yellow)
- F15854 (red)
Want to learn more about data visualization? Here are some popular books on Amazon that you can check out:
Related posts:
Nice post! Nothing is worse than a visualization that just uses the default palette, or letting the software randomly choose one for you.
Something to consider though, is that while this looks OK aesthetically, it would only work for nominal, qualitative data. Interval and ratio (and to an extent, ordinal) data, the most common types, require sequential variations in lightness + minor adjustments to hue.
For that, ColorBewer (http://colorbrewer2.org/js/) would be better, and is backed up by scientific evaluation. It also includes palettes for color blindness, which shouldn’t be ignored when creating visualizations, as 5-10% of men have some form of color blindness (http://en.wikipedia.org/wiki/Color_blindness#Genetics).
Plus, many plugins for ColorBrewer already exist for common viz tools (D3, R+ggplot2, etc), allowing users to automatically use any of its palettes.
Here are the ColorBrewer hex codes for CSS and JavaScript: https://github.com/mbostock/d3/tree/master/lib/colorbrewer
Thank you! Your suggestion was very helpful 🙂
This article, and Josh’s comment come right on time for me as a data-viz project I’m working on requires some serious color overhaul. I’m loaded with knowledge now, thanks.
Pingback: A color palette optimized for data visualizatio...
Pingback: A color palette optimized for data visualizatio...
Great post. How did you come to the dark blue africa color in your second chart? its not in the final chart
Thanks, this helped to quickly select some colors for my charts!
You just saved me a great deal of time to pick nice colors in a dynamic pie chart for a polling feature. Thanks a bunch !
Glad it helps.
Pingback: Publishing form statistics - Shortcode & Widgets, Report & Analysis
Pingback: Publishing user statistics for eForm - Shortcode & Widgets, Report & Analysis