Practical color guide

Data Visualization Color Palettes for Charts and Dashboards

Choose categorical, sequential and diverging palettes for readable charts, accessible dashboards and meaningful data states.

Open related tool

Match the palette to the data

Use categorical colors for unrelated groups, sequential colors for values that move from low to high, and diverging colors when the data has a meaningful midpoint such as zero or a target.

Limit categorical colors

Too many hues make legends difficult to scan. Keep the most important series visually distinct, group minor categories when possible and use direct labels instead of relying only on a distant legend.

Design beyond color alone

Pair color with labels, line patterns, point shapes or annotations. This helps users with color-vision differences and also improves charts printed in grayscale.

Protect contrast and hierarchy

Axes, labels and tooltips need readable contrast. Grid lines should remain visible but quieter than the data. Selected or hovered marks need more than a subtle hue change.

Test the real dashboard

Evaluate charts at their final size, on mobile and in both themes. A palette that works in a large design file can fail when series become thin lines or small map regions.

Technical references

This guide was checked against the following primary references.

Frequently asked questions

How many categorical chart colors should I use?

Use as few as the data allows. Beyond several categories, direct labels, grouping and interaction are often clearer than adding more hues.

Is contrast testing enough for charts?

No. Also test color-vision differences, small marks, grayscale output, labels and interactive states.

Related guides

OKLCH in CSS: A Practical Guide to Perceptual Web ColorsDark Mode Color Palette: Contrast, Surfaces and Accessible UIColor Design Tokens: Naming CSS Variables for Scalable UI