Skip to content
UX Atlas
UI foundationCraft conventionAdvanced

Data Visualization Color

Charts need three kinds of palette, and the choice between them is determined by the data, not by taste.

Definition

Data visualisation uses categorical palettes for unordered groups, sequential palettes for ordered magnitude, and diverging palettes for values around a meaningful midpoint. Using the wrong type misrepresents the data.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Palette types
  3. Rules that prevent misreading
  4. In practice
  5. Sources
  6. Continue from here

Palette types

TypeDataConstruction
CategoricalUnordered groups such as regions or productsDistinct hues at similar but not identical lightness. Cap at around 7 series.
SequentialOrdered magnitude such as revenue or densityOne hue, stepping lightness. Light equals low by convention.
DivergingValues around a meaningful centre such as change versus targetTwo hues meeting at a neutral midpoint. The midpoint must be meaningful.

Rules that prevent misreading

  • Never use a rainbow palette for sequential data. It creates false boundaries where the hue changes fastest and is not perceptually ordered.
  • Cap categorical series at around seven. Beyond that, group the tail into an 'other' category or change the chart type.
  • Keep a series the same colour across every chart in a product. Inconsistent series colour is a reliable source of misreading.
  • Reserve a dedicated colour for the highlighted or selected series, and grey the rest.
  • Label directly where possible, which removes the legend lookup entirely.
  • Include a pattern or texture option for print and for monochrome output.

In practice

Retiring rainbow scales

Scientific and analytics tools

Perceptually uniform sequential scales such as viridis replaced rainbow scales in scientific visualisation because rainbow creates artificial banding that readers interpret as structure in the data.

Grey the context, colour the subject

Dashboards

Showing all series in grey and colouring only the one being discussed makes a dense chart readable and removes the legend from the critical path.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  • The Visual Display of Quantitative Information

    E. Tufte, Graphics Press, 1983

  • ColorBrewer: color advice for maps

    C. Brewer, Pennsylvania State University

    Well-tested categorical, sequential and diverging palettes with colour-blind-safe options.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Dashboard

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.