Heatmaps are a great way to visualize data by using different colors to represent different values. When creating a heatmap, one of the most important design choices is selecting an appropriate color palette. The right colors can help highlight patterns, communicate meaning, and make the data easy to interpret at a glance.
When selecting colors for a heatmap, there are a few key considerations:
Perceptual Uniformity
You want colors that are uniformly spaced in human perception. Our eyes don’t perceive all color differences equally. For example, two shades of green may look very different to us, while two shades of blue may appear similar. A perceptually uniform palette corrects for this by spacing colors based on human perception, not the absolute RGB values. This creates a scale that looks linear to our eyes.
Diverging vs Sequential
Diverging palettes are best when you have data centered around a critical midpoint, like deviations from a mean. It uses two distinct hue ranges to show values above and below the midpoint. Sequential palettes are better for data that ranges from low to high values without a critical midpoint.
Number of Colors
You want enough colors to show meaningful differences, but not so many that areas appear noisy or patterns get lost. 5-9 colors is ideal for most heatmaps.
Colorblind Accessibility
About 4% of people have some form of color vision deficiency. Ensure your colors can be differentiated by people with common types like red-green color blindness. Avoid relying only on shades of red and green.
Associations and Meaning
Some colors have implicit associations, like red for hot and blue for cold. Leverage these associations if they match your data, but be aware of potential confusion if they don’t align.
Color Palette Options
Given these considerations, here are some good color palette options for heatmaps:
Sequential Palettes
These palettes are best for data without a critical midpoint. The colors progress uniformly from low to high values.
Blues
Shades of blue are a common choice since they are familiar for representing cold to hot. Just avoid having too many similar light blues.
Greens
Greens are another good sequential option. Avoid very light greens that look similar.
Orange-Red
Warm colors like orange and red visually pop and have hot/cold associations. Avoid light yellows that look too similar.
Diverging Palettes
These palettes are ideal when you have critical midpoint, like positive and negative deviations from a mean.
Blue-White-Red
This is probably the most common diverging heatmap palette. White represents the midpoint. It leverages the hot/cold associations of blue and red.
Purple-White-Green
This palette swaps in purple and green, which also have cold/hot connotations. The relatively muted hues may be preferable if the blue and red are too bold.
Brown-White-Cyan
For something warmer, this palette uses brown, white, and cyan. The brown has earthy associations.
Colorblind-Friendly Palettes
These palettes specifically consider colorblindness issues. They avoid overlapping red-green or light blue-yellow colors.
Purple-Orange-Green
This sequential palette jumps between hues that are very distinct for colorblind viewers.
Red-Blue
This simple diverging palette relies on very different colors on either side of white.
Tools for Generating Color Palettes
There are many free tools you can use to generate sequential and diverging color palettes for heatmaps:
ColorBrewer
ColorBrewer is designed specifically for data visualization and cartography. You can select sequential, diverging and other palette types. It offers colorblind-friendly options.
Adobe Color
Adobe Color makes it easy to generate color schemes. You can browse popular combinations or create your own palette from scratch.
Paletton
With Paletton you can fine-tune every aspect of your palette like hue, chroma, and luminance. It helps visualize how colors will appear to colorblind users.
Matplotlib
For Python users, Matplotlib has built-in sequential and diverging color maps you can sample from like ‘viridis’, ‘plasma’, and ‘RdBu’.
D3 Color Scales
This collection of color scales is designed to work with D3.js data visualizations. It has categorical, sequential and diverging options.
Testing Color Palettes
Once you’ve created some color palette options, you’ll want to view them in context before finalizing your choice. Here are some tips for testing:
Check on Sample Data
Apply the palettes to sample datasets that resemble your real data. This will reveal issues with perceptual uniformity, number of colors, and colorblindness.
Test Against Backgrounds
View palettes against any backgrounds they’ll be displayed on. A palette may look very different against white, black, or colored backgrounds.
Print in Grayscale
Printing in grayscale helps reveal palettes that rely too much on hue instead of contrast. The colors should translate to distinguishable gray tones.
Get Feedback from Stakeholders
Show options to project stakeholders, team members and end users. Their feedback can identify perceptions and associations you may have overlooked.
Consider Future Data
Think about how the palette will accommodate new data added over time. You want colors that will remain meaningful as data changes.
Conclusion
Selecting the right color palette is an important design decision when creating a heatmap. Consider perceptual uniformity, colorblindness, and whether your data requires a sequential or diverging scale. Leverage color associations that match your data’s meaning, but beware unintended mixed messages. Be sure to test candidate palettes thoroughly in context before finalizing your choice. The colors you choose can make your heatmap either succeed or fail at communicating the patterns in your data. With these tips, you’ll be equipped to make thoughtful color choices that elegantly highlight the story in your heatmap.
