Skip to content
UX Atlas
Plate FND·029 · UI foundationGrid D1 · Rev. 2026-08-14

Data Visualization Color

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

UI foundationCraft conventionAdvanced

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 plate
  1. 1Definition
  2. 2Palette types
  3. 3Rules that prevent misreading
  4. 4Colour on a chart
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Building any chart palette.
  • Reviewing dashboards for consistency.
  • Choosing a scale for a heatmap or choropleth.

Common mistakes

  • Rainbow scales for ordered data.
  • More than seven categorical series.
  • Series colours that change between charts.
  • Chart colours colliding with semantic meaning.
  • Choosing a palette that looks attractive as swatches and is indistinguishable at one-pixel line width.

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.

Colour on a chart

Do

  • Use a sequential ramp for magnitude and a diverging one only where a meaningful midpoint exists.
  • Limit categorical palettes to what can be told apart, which is fewer than eight.
  • Label series directly where space allows, and drop the legend.
  • Grey the context and colour only the subject being discussed.

Do not

  • Use a rainbow ramp for continuous data, which creates boundaries the data does not have.
  • Let the palette assign red or green to a series that carries no such meaning.
  • Rely on hue to separate lines that cross repeatedly.

In practice

  1. i.

    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.

  2. ii.

    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.

  3. iii.

    Twelve series, one legend

    The limit of categorical colour

    A chart with twelve coloured lines and a legend down the side is a lookup task, not a chart. Highlighting one series and greying the rest answers the question the reader actually had.

Local chart

FND·029 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ChartCMP·028 · APPLIED THROUGHDashboardsPAT·028 · APPLIED THROUGHNatural MappingPRIN·008 · PRINCIPLES BEHIND THISDashboard UX ChecklistCHK·004 · CHECK YOUR WORKColour Vision DeficiencyTERM·081 · SHORT DEFINITIONUse of ColorA11Y·010 · RELATED CONCEPTColor AccessibilityFND·028 · RELATED CONCEPTColor Theory for InterfacesFND·019 · RELATED CONCEPTContinuityFND·008 · RELATED CONCEPTContrastFND·002 · RELATED CONCEPTHueFND·020 · RELATED CONCEPTSemantic ColorFND·023 · RELATED CONCEPT

Sources

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

  1. [1]

    The Visual Display of Quantitative Information

    E. Tufte, Graphics Press, 1983

  2. [2]

    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.