Use the palette chooser to create a series of colors that are visually equidistant. This is useful for many data visualizations, like pie charts, grouped bar charts, and maps.
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.
For instance, Google Analytics does a terrible job with this:
It’s better to use use a range of hues so users can cross-reference with the key easier. It’s far simpler for our brains to distinguish, say, yellow from orange than blue from blue-but-15%-lighter.
This color picker allows you to specify both endpoints of the palette. You can choose at least one to be a brand color, which gives you significant flexibility in creating a palette that will work for your visualizations, yet be customized for your brand.
Here are a few tips for getting the best palette:
If you're new to color in UI design, I highly recommend the following resources:
Anyhow, I've created this to be the tool I wish I had for creating data visualization palettes. Is there another feature you'd like to see in it? Let me know.
The Single Hue Scale generator is most useful for visualizations where you’re showing the value of a single variable. Typically, the darker variation will represent a higher value, and a neutral color (even white) will represent a value closer to zero.
In a pie chart or bar chart, size is used to distinguish higher values. But in some visualizations, the size is set and you need to rely on color. Two examples of this are show in the “In Context” section above:
Here are a few tips for getting the best single hue scale:
The Divergent Color Scale generator is most useful for visualizations where you’re showing a transition from (a) one extreme, through a (b) neutral middle, and finally to a (c) opposite extreme.
Perhaps the most common example of this is the “how Democrat/Republican is each state in the US” chart.
By default, the neutral midpoint is a light gray. You can change it with the "Modify Midpoint Color" sliders to be slightly darker or more colorful. For the best results, set the Color Intensity to the minimum when the two endpoint hues are significantly different – otherwise, the moderate tones will start to blend together (this will be evident in the map).
As with the other visualization styles, this will pick colors that are visually equidistant. However, if one of the two endpoint colors is significantly darker or saturated, the swatches on that side will have more color-space between them.