Skip to content
ColorArchive
Issue 097
2027-11-18

Color in infographics and data visualization: the rules for visual encoding

Data visualization has its own color grammar — rules derived from research on how humans interpret visual information, with higher stakes than most design contexts because incorrect color choices can actively mislead the viewer. Sequential palettes, diverging palettes, and categorical palettes each have distinct structural requirements. This issue covers the fundamental rules for encoding data accurately with color, the practical constraints of real-world display environments, and how to build a production-ready data visualization color system.

Highlights
The most common data viz color mistake is using a categorical palette for ordered data. A chart showing temperature over months should use a sequential palette — temperature has a natural ordering and the color should encode it. Using five arbitrary colors for five months implies they are unordered when they're part of a continuous sequence.
Diverging palettes (two-hue ramps meeting at a neutral midpoint) encode deviation from a meaningful zero. The midpoint must be neutral — a saturated midpoint visually emphasizes it as significant when it represents null. The two endpoint hues should be perceptually equidistant from neutral: orange-white-purple balances well; red-white-blue doesn't because red appears more intense.
The human visual system reliably distinguishes approximately 7±2 categorical colors. Beyond that, viewers rely on legends rather than color recognition. Practical solutions for large-category data: group minor categories into 'Other', use interactive filtering, or encode overflow categories with shape rather than color.

Sequential, diverging, and categorical: choosing the right palette type

The foundational decision in data visualization color design is matching palette type to data type. Sequential (single-hue ramps) encode magnitude. Diverging palettes encode deviation from a central value. Categorical palettes encode unordered groups. Using the wrong type undermines the chart's ability to communicate data structure — a sequential palette on unordered categories implies a ranking that doesn't exist.

Colorblind-safe categorical palettes

Approximately 8% of male viewers have deuteranopia or protanopia (red-green confusion). A palette that uses red and green for adjacent categories will produce identical colors for roughly 1 in 12 male viewers. Design palettes where every pair differs not only by hue but also by lightness or saturation. OKLCH makes this reliable: equal L differences guarantee minimum luminance contrast regardless of hue. ColorArchive's colorblind simulator can preview your palette under deuteranopia and protanopia simultaneously.

Simultaneous contrast in charts

Simultaneous contrast — a color's appearance changing based on surrounding colors — is disruptive in charts because it makes equal data values appear unequal based on adjacency. An orange bar surrounded by blue bars looks more intense than surrounded by yellow bars. Low-saturation backgrounds (near-white or light gray) with moderate-saturation data colors limits this. A thin neutral separator between adjacent regions eliminates it entirely.

OKLCH for perceptually uniform data palettes

OKLCH is recommended for sequential and diverging data palettes because equal steps in L and C correspond to equal perceived changes. A sequential palette built as OKLCH(0.3, 0.1, 220) → OKLCH(0.8, 0.15, 220) will have visually equal steps when interpolated in OKLCH space, while the same interpolation in RGB or HSL produces uneven steps with a brightness spike in mid-range. The ColorArchive Color Mixer with OKLCH mode demonstrates this perceptual uniformity.

Screen vs print color fidelity

Data visualizations must often work on both screen (RGB) and in print (CMYK). The most problematic colors for cross-medium fidelity are highly saturated blues and cyans — a vivid #00FFFF has no direct CMYK equivalent and will print noticeably different. For print-critical visualizations, design the palette starting from CMYK constraints and accept slightly less saturation on screen. The most print-safe colors are warm reds/oranges and dark blues/greens — where CMYK and sRGB gamuts overlap most.

Newer issue
Dark mode done right: why dark mode is harder than inverting your palette
2027-11-11
Older issue
Color in AI-generated design: prompting, correcting, and maintaining brand palette consistency
2027-11-25