Chart Color Palette: Colors for Charts and Dashboards

Categorical colours identify groups that have no inherent numerical order: product lines, regions, traffic sources, or research segments. Their job is recognition, not decoration. A good categorical palette keeps groups distinct without implying that one category is inherently larger, better, or more urgent because its colour is brighter.

Match the palette to the number of categories

Count the categories visible at the same time before selecting colours. Four clearly different hues are much easier to manage than fourteen. Use the colour converter to normalize candidate values into one format so accidental duplicates and tiny variations are easier to spot.

Start with the real category count, including a reasonable expansion allowance. A palette designed for three series can collapse when a fourth appears between two similar colours. If the content regularly contains many categories, plan grouping, direct labels, or another encoding instead of expecting colour alone to solve the problem.

Write down whether category identity must remain stable across pages. If “Europe” is blue in one chart and orange in another, viewers must repeatedly relearn the mapping. Stable assignments are often more valuable than optimizing each chart independently for aesthetic balance.

The W3C guidance on use of colour explains why meaningful distinctions need additional cues. Direct labels are particularly useful in charts because they reduce reliance on matching tiny marks to a distant legend.

Distribute hues without creating an accidental scale

For unordered categories, avoid a simple light-to-dark sequence of one hue. That arrangement suggests progression even when none exists. Instead, select hues with comparable visual strength while preserving enough separation to identify them at realistic sizes.

Comparable is not identical. Equal HSL saturation and lightness do not produce equal perceived brightness across hues. A yellow at the same coordinates as a blue can dominate visually or become difficult to see against white. Adjust each candidate individually rather than defending a mechanically generated wheel.

Start with a restrained set such as blue, orange, teal, and purple. Inspect all pairwise neighbours, not only the sequence in a palette strip. Two colours separated in a legend may touch in a stacked bar or overlap in a line chart.

Use the MDN colour theory overview for background on hue relationships. In production, prioritize discriminability and meaning over a perfectly symmetrical arrangement of angles around the colour wheel.

Test the colours in the actual chart geometry

A palette that works in broad bars can fail in thin lines or tiny points. Small marks offer less area for colour recognition, and antialiasing blends edge pixels with the background. Mark size changes the task, so evaluate the final geometry rather than only large colour chips.

:root {
--series-a: #2962a3;
--series-b: #b35b18;
--series-c: #247b70;
--series-d: #8655a5;
}

.chart-line {
fill: none;
stroke-width: 3;
}

.chart-line[data-series="a"] {
stroke: var(--series-a);
}

The sample establishes values but does not make a chart understandable by itself. Add direct labels, patterns, distinct markers, or other appropriate cues. A dashed line can help separate series when hue differences become hard to perceive, especially where lines cross.

Review the same data as lines, bars, and a compact legend. If a colour is only visible in a large filled area, either reserve it for that use or choose a stronger alternative. Do not assume every approved chart colour is suitable for every chart type.

Check collisions with semantic and brand colours

A red category can be mistaken for an error, particularly inside a product where red already means failure. A green category may imply a positive outcome that the data does not justify. Decide whether those associations are harmless in your context or whether the palette needs less semantically loaded alternatives.

Keep category identity separate from status. If a chart shows error rates by region, do not colour the worst region red and also use red as the permanent identity of another region. One channel should not carry two conflicting meanings in the same view.

Use the contrast checker to investigate chart backgrounds and labels, while remembering that text and graphical marks have different considerations. Consult W3C non-text contrast guidance when evaluating meaningful graphical boundaries and objects.

For palette documentation, the design tokens guide can help maintain stable assignments. Record category-to-colour mappings alongside any marker or pattern, so exports, screenshots, and alternate chart implementations do not silently change the visual vocabulary.

Stress-test the palette before adding more colours

Build a sample with similar values, overlapping lines, small slices, and missing categories. Idealized data often hides palette weaknesses. When one series covers another, increasing hue difference may not solve the visibility problem; changing line styles, ordering, or chart form may be more effective.

Inspect a greyscale view and available colour-vision simulations as diagnostics. Simulation is not certification, but it can reveal obviously fragile pairs. Confirm that direct labels and non-colour cues preserve interpretation when several hues become difficult to distinguish.

The MDN CSS colour reference is useful when exporting values between chart libraries and stylesheets. Ensure that alpha, blending, or hover dimming does not alter a carefully reviewed set into a collection of near-identical pale marks.

Set an explicit category limit for colour-only legends. Beyond that limit, group minor categories, allow filtering, use small multiples, or provide direct exploration. A strong categorical palette includes a policy for when not to add another hue. That policy protects recognition as the product and its data grow.

Test filtering without changing identity

Create a four-category chart, then filter out its first category. The remaining categories should retain their original colours rather than shifting into the first three palette positions. Assign colours through stable category identifiers, not through the index of the currently visible array. Repeat the test after sorting by value and after loading another page of results.

Include an unfamiliar category in the fixture. Decide whether it receives an unused approved colour, a deliberately neutral fallback with a direct label, or a request to refine the chart. Avoid silently reusing a colour already assigned to a visible category. Also check the empty and single-category states: an isolated bar should retain its identity even when no legend is needed. These small tests expose mapping errors that a static palette presentation cannot reveal.

Key takeaways

• Count categories first and keep assignments stable across related views.
• Avoid a sequential lightness ramp for unordered groups.
• Test final mark sizes, overlaps, and all likely neighbouring pairs.
• Separate categorical identity from semantic status and brand emphasis.
• Add labels or other cues, and define a limit beyond which colour needs structural help.