Color in Data Visualization

The hard part of data visualization is not choosing a pretty palette; it is matching color to the structure of the data. This lab turns the whole decision into one instrument: task, scale type, baseline, binning, CVD simulation, outliers, opacity, legend design, and redundant labels all update the same chart and diagnostics.

The earlier articles in this library treated color as something to measure or to compose with. In data visualization it does a third job: it carries information. When a value is mapped to a color through a colormap (also called a color scale or palette), the reader runs that mapping in reverse to recover the data. If the mapping is ambiguous or uneven, the reader recovers the wrong numbers - and unlike a mislabeled axis, a bad colormap fails silently.

Two failures dominate. The first is using the wrong type of scale for the data - a rainbow for ordered magnitudes, or a sequential ramp for categories. The second is using a scale that is not perceptually uniform, so equal steps in the data do not look like equal steps in color. Both are avoidable with a little theory, and the demos here let you see each failure happen and then fix it.

Almost every honest colormap is one of three kinds. Choosing the right one is the single most consequential decision in coloring a chart.

A sequential scale encodes data that runs from low to high in one direction: counts, density, magnitude, probability. The key property is that lightness must move monotonically - steadily darker or steadily lighter - because lightness is the channel the eye reads as "more." Hue may shift along the way (viridis travels purple → blue → green → yellow), but it is the relentless lightness ramp that makes the order legible, even in grayscale or for a colorblind viewer.

The classic mistake is a sequential scale whose lightness is not monotonic, so two different values map to the same apparent brightness and become indistinguishable. The good modern defaults - viridis, magma, cividis - are engineered specifically to keep lightness rising at a near-constant rate.

A diverging scale is for data with a meaningful midpoint - zero, an average, a target, a baseline. It uses two contrasting hues (classically blue and red) that grow more saturated and darker as values move away from a neutral, light center. The center is the anchor: it must sit on the value that actually matters, or the chart lies.

A categorical (qualitative) scale encodes unordered groups, so its colors must look equally weighted - distinct in hue but similar in lightness and saturation, so none jumps out as "more important" or "higher." The hard limit is how many colors a reader can reliably tell apart: beyond roughly eight, distinct hues start to collide and the legend becomes a memory test. Past that, switch to direct labels, grouping, or small multiples instead of more colors.

For decades the default heatmap colormap was jet - the rainbow from blue through cyan, green, and yellow to red. It looks vivid and "scientific," and it is one of the most criticized choices in all of visualization. Jet is not perceptually uniform: its lightness rises and falls instead of climbing steadily, so it has bright ridges at cyan and yellow and dark valleys at blue and red. Those ridges read as edges - boundaries the data never contained - while the dark ends crush real detail.

Around 8% of men and 0.5% of women have a color-vision deficiency, most commonly red-green. A categorical palette that relies on telling red from green - or any two hues that collapse together under CVD - excludes a large slice of your audience. The fix is to choose colors that stay distinct after simulation and to lean on lightness differences, which survive every type of CVD.

A colormap is only half a chart; the legend is the other half - the key that turns colors back into numbers. A continuous scale needs a continuous color bar with labeled values; a categorical scale needs an unambiguous swatch-to-label mapping, ideally placed near or directly on the marks it describes. A beautiful colormap with a missing or mislabeled legend is unreadable.

The most robust safeguard is redundant encoding: never let color be the only carrier of meaning. Pair it with direct labels, shapes, line styles, position, or text. If your chart still works when printed in grayscale or seen by a colorblind reader, color has become an enhancement rather than a single point of failure - which is exactly where you want it.

In practice a colormap is a function from a normalized value in [0, 1] to a color. You normalize the data to that range, then look the value up in the scale - either by interpolating between a handful of control colors or by indexing a precomputed table. The crucial detail is where you interpolate: blending two colors in raw sRGB often passes through a muddy or dark middle, so good libraries interpolate in a perceptual space such as Oklch or Lab, which keeps the ramp smooth and the lightness honest.

Modern toolchains make this routine: charting libraries ship viridis and ColorBrewer scales built in, and CSS now interpolates gradients in perceptual spaces with in oklch. The takeaway is the same in every environment - normalize, map through a perceptual scale, and label the result with a legend.

Six questions on scale types, perceptual uniformity, and accessibility. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.

Data-visualization color draws on the palette-building, accessibility, and perceptual articles around it. The numbers reflect each article's position in the editorial roadmap.