Color in Data Visualization: How to Make Charts Actually Readable

Most charts fail not because the data is bad or the chart type is wrong, but because the colors are chosen without understanding how the human visual system processes color in a data context. Color in data visualization is a functional encoding system — each color choice is a communication decision that either clarifies or obscures the data's meaning. This guide covers the principles, common mistakes, and specific techniques for choosing colors that make charts genuinely readable.

The Three Uses of Color in Data Visualization

Before choosing any color for a chart, identify which of the three functional uses of color applies to what you are building.

Categorical encoding uses color to distinguish between different groups or series that have no inherent order. Country A versus Country B. Product line X versus Product line Y. In categorical encoding, the requirement is that the colors be perceptually distinct — easily told apart — without implying any ranking or order between the categories.

Sequential encoding uses color to show a single variable progressing from low to high — population density, temperature change, market penetration. Sequential color scales progress from a light, desaturated version of a hue (representing low values) to a dark, saturated version (representing high values). The continuous progression implies continuous data.

Diverging encoding uses color to show data that has a meaningful midpoint — a neutral or zero — with values extending in two directions. Profit and loss. Temperature above and below freezing. Approval above and below 50%. Diverging scales use two distinct hues that meet at a neutral midpoint (typically white or light gray), allowing the viewer to immediately see which side of the midpoint a value falls on.

Using the wrong encoding type for the data type is the single most common color mistake in data visualization. A categorical palette applied to sequential data implies that the groups are unordered when they are actually ordered. A sequential palette applied to diverging data hides the midpoint and makes it impossible to see which values are positive and which are negative at a glance.

Building a Categorical Color Palette for Charts

Categorical palettes for data visualization have different requirements from brand palettes. The primary requirement is perceptual distinctness — each color must be immediately distinguishable from every other color in the set, including by viewers with color vision deficiencies.

The most common failure in categorical chart palettes is using colors that are too similar in either hue or lightness. Adjacent colors on the color wheel (analogous colors) that work beautifully as a brand palette can be extremely difficult to distinguish in a small legend swatch or a thin line on a chart. For data visualization, you need categorical colors that are genuinely different — spread across the hue wheel rather than clustered in a single region.

A well-designed categorical palette for data typically uses 6 to 8 colors maximum. Beyond 8 categories, color alone cannot reliably encode distinctness — viewers will struggle to match legend entries to chart elements. If you need to show more than 8 categories, consider grouping smaller categories or using a different visualization approach.

For the underlying mechanics of building any color palette, including the HSL controls that make generating perceptually distinct colors easier, see our Ultimate Guide to Building a Color Palette from Scratch.

Color Vision Deficiency — Designing for 8% of Your Audience

Approximately 8 percent of men and 0.5 percent of women have some form of color vision deficiency — the most common being red-green deficiency (deuteranopia and protanopia). For a chart that uses red and green to distinguish two data series, these users see both series in the same color and the chart becomes meaningless.

The solution is to never rely on red-green distinction alone in data visualization. Several strategies help. Use both color and shape encoding for categorical data — different colored lines that also use different dash patterns or markers. Choose palettes that are tested for color vision deficiency simulation. The most reliable palettes for accessibility are those that use color differences in both hue and lightness simultaneously — so even if the hue distinction is invisible, the lightness difference provides a backup signal.

Tools like ColorBrewer (colorbrewer2.org) were designed specifically for data visualization accessibility — every palette is labeled for color blind safety and print safety. It is the first resource to check before building any data palette from scratch.

The Problem With Rainbow Color Scales

The rainbow color scale — ROYGBIV, from red through orange, yellow, green, blue, to violet — is the most commonly used sequential color scale in data visualization and one of the worst choices for the purpose. The problems are numerous.

The rainbow scale is not perceptually uniform. Yellow appears perceptually much brighter than blue, even at the same saturation level, meaning equal steps in data value do not produce equal steps in perceived color difference. Viewers overestimate differences in the yellow region and underestimate them in the blue and green regions.

The rainbow also creates artificial boundaries. The human eye perceives sharp edges at hue transitions — particularly at the red-orange and green-blue transitions — that suggest data discontinuities that do not exist in the underlying data. Viewers see "jumps" in the data where there are none.

The alternative is a single-hue sequential scale (light to dark in one hue family) or a perceptually uniform multi-hue scale like Viridis, Magma, or Inferno — designed specifically to be perceptually uniform, color-blind safe, and readable in grayscale. These scales are available in D3.js, Plotly, Matplotlib, and Tableau by default. Use them.

Highlight Colors — Directing Attention in Charts

One of the most powerful uses of color in data visualization is selective highlighting — using color to direct the viewer's attention to the most important data point or series while using a neutral gray for everything else. A chart showing twelve countries' GDP growth over ten years, with eleven countries in medium gray and one country highlighted in your brand's primary color, immediately focuses the viewer on the relevant comparison without reducing the contextual information provided by the other series.

This technique is called the "gray out" approach and it is far more effective than using twelve distinct colors that compete equally for attention. In a standard multi-series colored chart, the viewer must consciously search the legend to identify which series is which. In a gray-out chart with one highlight, the answer is visually immediate.

Connecting Data Color to Brand Color

Data visualization that appears in branded products should maintain a connection to the brand palette without being constrained by it. The primary brand color is often a natural choice for the primary data series or the highlight color. Tints of the brand color work well for secondary data series or background reference bands. The neutral gray used for de-emphasized data should be drawn from the brand's neutral scale.

This connection to the brand palette — rather than using arbitrary chart colors — ensures that data visualizations feel like native parts of the product rather than embedded third-party components. If your brand palette uses HSL values (as recommended in our HEX vs RGB vs HSL guide), generating tints and shades for data series is straightforward and systematic.

Data visualization is ultimately a communication problem, and color is one of its most powerful channels. Use it with the same intentionality you bring to every other design decision, and your charts will tell stories instead of just displaying numbers.