Charts are the place where color stops being decoration and becomes data. Pick badly and you have not made an ugly chart — you have made a chart that says something untrue. The good news is that most of the decisions follow from one question: what kind of thing is the color encoding?
Three kinds of scale, and picking the wrong one is the main error
Categorical. The values are distinct groups with no order — countries, product lines, browsers. Colors should be clearly different from each other and none should look more important than the rest. Vary hue; hold lightness and saturation roughly constant.
Sequential. The values run low to high — population, revenue, temperature. Color should vary in lightness along a single hue or a short hue range, so that darker unambiguously reads as more. Vary lightness; hold hue roughly constant.
Diverging. The values run away from a meaningful midpoint — profit and loss, above and below average, agreement and disagreement. Two hues meeting at a neutral center, with lightness increasing outward in both directions.
Using a categorical palette for ordered data is the most common mistake in the wild. Six distinct hues assigned to six income brackets tells the reader nothing about which bracket is higher, and forces them back to the legend for every single mark. If the data has an order, the color must show it.
Why rainbow scales are a problem
Rainbow and jet colormaps remain widely used and are a poor choice for sequential data, for reasons that are well documented in the visualization literature.
They are not perceptually uniform. Equal steps in the data do not produce equal-looking steps in color — the yellow region appears to change fast, the green region appears to stall. This creates apparent boundaries in the data that are artifacts of the palette rather than features of the values.
They also have no intrinsic order. Nobody knows without checking whether orange is higher than green. A reader can decode a light-to-dark blue ramp instantly; a rainbow requires constant reference to the legend.
And they collapse badly under color-vision deficiency and in grayscale, because the lightness does not increase monotonically along the scale.
A single-hue or two-hue ramp with steadily increasing lightness fixes all three problems. Our shade generator builds exactly that from any base color.
How many categorical colors you can actually use
Fewer than you would like. Beyond about seven distinct hues, readers cannot reliably match a mark to a legend entry, and the colors themselves start to become hard to keep distinguishable.
If you have twelve categories, you do not need twelve colors. The usual answer is to show the top few and group the rest as "other", or to switch to a chart type that does not depend on color for identity — a small-multiples grid, or a bar chart with direct labels.
Where you do build a categorical set, the palette generator with a triadic or tetradic scheme gives well-separated starting hues. Then equalise them: hues at wildly different lightness make one series look emphasised when it is not. Check each one in the RGB to HSL converter and bring the lightness values into a similar range.
Color-vision deficiency will break your default palette
Around 8% of men have some form of color-vision deficiency, most commonly red-green. Which means the single most popular chart convention — red for bad, green for good — is unreadable for a meaningful share of any audience.
Two robust responses.
Use blue and orange instead of red and green. This pairing survives the common deficiencies well and still carries an intuitive warm/cool opposition. It is why so many well-designed diverging scales are blue-to-orange rather than red-to-green.
Then add a second channel. If categories differ only by hue, they do not differ at all for some readers. Direct labels on the marks, distinct line dash patterns, different point shapes, or varying lightness alongside hue all give a second route to the same information. Direct labelling in particular is better for everyone — it removes the legend round-trip that every reader pays for.
Run any finished palette through the color blindness simulator and check whether two series merge. Our accessible color guide covers the underlying principle in more detail.
Contrast rules apply to charts too
WCAG requires 3:1 for graphical objects that convey meaning, and chart marks qualify. A pale yellow line on white does not meet it. Neither does a light gray gridline that a reader needs in order to judge a value.
Some specifics that recur:
- Axis labels and tick text are text, so they need 4.5:1 — not the near-invisible gray that chart libraries often default to.
- Gridlines should be visible but subordinate. If they are decorative, they can be faint; if the reader must use them to estimate values, they must be seen.
- Adjacent series need 3:1 against each other, not only against the background, when they sit side by side.
- Thin marks need more contrast than large fills. A one-pixel line and a large area of the same color are not equally visible.
The contrast checker handles all of these pairs.
Semantic color: use it sparingly and consistently
Red for negative and green for positive is a strong convention in some contexts and a trap in others. Two cautions.
The associations are not universal. In several East Asian financial markets, red conventionally indicates a rise and green a fall — the opposite of the Western convention. If your audience is international, label explicitly rather than relying on the reader sharing your convention.
And reserve semantic colors for semantic meaning. If red means "loss" in one chart, it cannot mean "Europe" in the next one on the same page. Once a color carries meaning in a product, it is spent.
Gray is the most underrated chart color
The strongest charts often use one color and a lot of gray. Highlight the series that matters; render the context in neutral. This directs attention far more effectively than giving every series an equally loud color and hoping the reader works out the point.
This is especially true of comparisons. Twenty gray lines with one blue line makes a comparison instantly. Twenty-one colored lines makes a decorative tangle.
A tinted gray — your brand hue at 3–8% saturation, from the tone generator — keeps those neutrals feeling like part of the same design rather than a default.
Dark mode charts are a separate build
A chart palette tuned for a white plot area rarely transfers. Saturated colors that were crisp on white glare on near-black, and gridlines tuned to be subtle on light become invisible on dark.
Expect to desaturate and lighten your series colors for the dark variant, and to re-check every contrast pair. Our post on designing a dark mode palette covers the general adjustment, which applies directly to chart marks.
A short checklist
- The scale type matches the data type — categorical, sequential, or diverging.
- No rainbow colormap on ordered data.
- Seven categorical colors at most; group the tail.
- Not red-versus-green as the only distinction.
- A second channel encodes the same information as hue.
- Marks clear 3:1, and label text clears 4.5:1.
- Everything still works in grayscale.
- The dark-mode variant was built, not assumed.
Every item is faster to check than to explain to a reader who misread the chart.