Data Visualization Color Palettes: Categorical, Sequential, Diverging

In a chart, color is not decoration. It is an axis. Readers decode category, order, and magnitude from hue and lightness before they read a single label, so the wrong palette does not just look worse — it reports a different shape of the data. Almost every bad chart palette comes from the same mistake: using colors built for identity where the data needs order, or colors built for order where the data needs identity.

Three palette types, three different jobs

The structure of a data palette is decided by the data, not by taste:

• Categorical. For unordered groups — countries, products, channels. The colors must look clearly different and equally important. None should feel larger, later, or more urgent than the others.
• Sequential. For one quantity running low to high — density, revenue, temperature. One hue family stepping steadily from light to dark, so position on the scale is readable before the legend is.
• Diverging. For values that spread away from a meaningful middle — profit and loss, above and below average, agree and disagree. Two hues, a neutral center, roughly symmetrical arms.

Picking the wrong structure produces errors, not just ugly output. A sequential ramp on unordered categories invents a ranking that does not exist. A categorical set on a continuous measure destroys one that does. A diverging scale centered on an arbitrary number tells readers that number matters.

Categorical: fewer series, and vary more than hue

Categorical palettes stop working somewhere around seven or eight colors. Past that, people stop matching swatches to the legend and start guessing. If the data has twenty categories, the fixes are structural rather than chromatic: keep the leading few and group the rest as “Other,” break the chart into small multiples, or use a form that does not depend on color identity at all.

Inside those few colors, spread lightness as well as hue. Colors sampled at even angles around the wheel — the logic behind the triadic and tetradic structures in Color Harmony Basics — look organized, but they can land at nearly the same lightness. Series that share a lightness merge when the chart is printed in grayscale, projected in a bright room, or shrunk into a sparkline. Generate an evenly spaced starting set in the Color Harmony Generator, then deliberately push some entries lighter and others darker.

Sequential: let lightness carry the number

In a sequential scale, lightness encodes the value and hue mostly tells the reader which measure they are looking at. Two adjacent steps with different hues but identical lightness will read as the same value. Squint at the legend, or desaturate it: if the ramp still runs visibly light to dark, the encoding survives.

Even steps matter as much as direction. Equal jumps in HSL lightness are not equally spaced to the eye, which is why hand-built ramps often stall in the middle and then fall off a cliff at the dark end. Perceptual spaces such as OKLCH exist to make those steps behave, as described in HEX vs RGB vs HSL vs OKLCH. The practical route is to generate the scale rather than nudge it by hand: the Shades & Tints Generator produces coordinated 50–900 steps from one color, and Tints, Shades, and Tones explains why the lighter half and darker half behave differently.

Avoid rainbow ramps for continuous data. A spectrum from blue through green and yellow to red has bright and dark bands scattered through its middle, so it creates visual edges where the numbers change smoothly and hides real jumps where the lightness happens to flatten. It looks colorful and reads unreliably.

Diverging: the midpoint has to mean something

A diverging palette makes a claim: this center value is the reference, and distance from it is what matters. That claim is true for change over time, variance from a target, or sentiment around neutral. It is false for a measure that simply runs from zero upward, where a diverging scale splits one continuous quantity into two apparent camps.

When the midpoint is real, keep the two arms balanced. Both ends should reach a similar darkness so neither side looks heavier, and the center should be light and low in chroma — near-white or a pale neutral — so “no change” looks like nothing rather than like a third category. Blue-to-orange and purple-to-green are safer pairs than the reflexive red-to-green.

A red-green palette fails for millions of readers

Red and green sit on opposite ends of the most common form of color vision deficiency. Roughly 1 in 12 men has some form of CVD, and for most of them a red line and a green line of similar lightness converge into the same muddy tone. The chart does not become harder to read; it becomes wrong. Color Blindness Explained covers what each type actually changes.

Three habits make a chart survive it. Separate series by lightness, not hue alone, because a lightness difference is visible under every type of CVD. Prefer blue-to-orange over red-to-green for diverging data. And encode important distinctions twice — direct labels on the lines, different markers, dashed versus solid strokes, or explicit ordering — so color confirms the reading instead of being the only source of it.

Contrast applies to the marks, not only the text

Chart color has two contrast jobs. Marks must separate from the background: a 3:1 ratio is the accessibility floor for graphical objects that carry meaning, and thin strokes, small scatter points, and one-pixel gridlines realistically need more than the minimum. Text on or beside the chart — axis labels, value labels, annotations — follows the usual 4.5:1 rule for body-sized type.

Pale pastel series on white are the most common failure. They look calm in the design file and disappear on a laptop screen at an angle. Test the pairs you will ship in the Contrast Checker; the thresholds and when each applies are in WCAG Contrast Ratios Explained. Low contrast is still the right choice for gridlines and reference bands, which should sit behind the data rather than compete with it.

Spend color where the meaning is

Gray is the most underused color in data visualization. When a chart has one point to make, put the context series in gray and give the brand or accent color to the single series that matters. Ten fully saturated lines make every one of them ordinary; one saturated line against nine gray ones makes the comparison instantly.

That is the proportion logic of the 60-30-10 rule applied to a chart: a dominant quiet field, supporting structure, and a small amount of color that earns attention. Reserve semantics as well. If red means loss or error anywhere in the product, do not hand it to a neutral category in a bar chart — the color will keep its old meaning no matter what the legend says.

Dark backgrounds need their own palette

A palette tuned for white does not invert. Saturated blues and violets that read as solid on white turn dim and vibrate against near-black, thin strokes vanish, and light ramps lose their bottom end. The direction of the fix is the same as for interfaces: keep the hue, raise the lightness, cut the saturation, and rebuild the ramp against the actual background. Dark Mode Color Palettes covers why near-black beats pure black and how much saturation to drop.

Do not ship a photo palette straight into a chart

Colors extracted from an image are an excellent source of brand mood and a poor source of chart series. Photographs cluster: five swatches from one frame often share a temperature and a narrow lightness range, which is exactly what a categorical palette must avoid. Use the Photo Palette Extractor to find the direction, then re-space the results — widen the lightness gaps, drop near-duplicates, and check the set again as a group rather than as individual colors.

Common mistakes

• More series than the eye can track. Twelve legend entries is a table pretending to be a chart.
• Rainbow ramps for continuous data. They add edges the numbers do not have.
• Diverging scales without a real midpoint. The center becomes an unearned claim about the data.
• Relying on transparency for overlap. Stacked alpha creates colors that are in no legend and change with the background.
• Reusing the same hue for different meanings. One blue for “selected,” another for a data series, a third for links teaches readers to ignore color.

The short version

Match the palette type to the data: categorical for identity, sequential for magnitude, diverging only when the middle is meaningful. Separate series by lightness so the chart works in grayscale, under every form of color vision deficiency, and on a projector. Keep the number of colors small, give the accent to the series that carries the point, and verify the marks against the background instead of trusting the design file. A chart palette is not finished when it looks good — it is finished when the data cannot be misread.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.