How many colours can a chart use?

Practically, six to eight. Beyond that, matching a line to a legend entry becomes guesswork regardless of how well the colours are chosen. If you have twelve categories, the answer is usually to group them rather than to find twelve colours.

Is this palette colour-blind safe?

Not on its own, and no palette of evenly spread hues at one lightness can be — matched lightness removes exactly the cue that helps most. Use it with markers, dash patterns or direct labels, and check the chart in greyscale.

Why keep every colour at the same lightness?

Because a viewer reads a brighter or darker series as more important. In categorical data no series is more important, so the palette should not imply otherwise. Matching lightness is the only way to avoid it, and OKLCH is the space where matching it is possible.

Should I use this for a heatmap?

No. A heatmap encodes magnitude, which needs a ramp that varies in lightness — the shade scale generator produces one. Distinct hues on a heatmap actively mislead.

Chart Colour Palette Generator

Generates a set of colours for chart series that are spread as far apart as possible on the hue circle and held at one lightness, so no series looks louder than the others. Matched lightness is the property a categorical palette needs and the one that hand-picked colours almost never have.

Series

Between 2 and 12.

Base hue or hex colour

Degrees from 0 to 360, or a hex colour to take its hue. Leave blank to draw one.

Lightness (×100)

Perceptual lightness. 65 suits a light background; around 75 reads better on a dark one.

Chroma (×1000)

How colourful. sRGB tops out near 320 and only for blues; 140 stays in gamut for every hue.

Your palette will appear here.

What this generator does

Spreads however many colours you need evenly around the hue circle at a single perceptual lightness. The even spread maximises how different adjacent colours look; the matched lightness is what stops one series from reading as the important one. A default palette of hand-picked colours almost always has a bright yellow and a dark navy in it, and the yellow series looks like the headline whether or not it is.

How to use this tool

Choose how many series you need.
Set the lightness — lower for light backgrounds, higher for dark ones.
Press Generate palette.
Copy the hex values in order, or the CSS custom properties.

Understanding the controls

Series count: How many colours you need. Above about eight, adjacent hues get close enough that they are hard to tell apart in a thin line or a small legend swatch — at that point consider grouping the data instead.
Lightness: Where the whole set sits between black and white. Around 0.6 works on a white background; around 0.75 reads better on a dark one, where darker colours disappear.
Chroma: How saturated the set is. Lower is calmer and better for dense charts; higher stands out more but starts to run into the sRGB gamut limits in green and yellow.
Starting hue: Rotates the whole set. Useful for making the first series a particular colour — a brand colour, or the conventional colour for a metric.

Worked examples

Six series at L 0.65: Hues at 0°, 60°, 120°, 180°, 240° and 300° — red, yellow, green, cyan, blue and magenta, all at matched weight.
Four series on a dark background: The same spread at lightness 0.75, so every colour stays visible against dark grey.
Ten series: Generated, with a note that ten categories is at the edge of what colour alone can distinguish.

Common use cases

Line, bar or pie charts with several series that must all read equally
A dashboard where the palette has to work on both light and dark backgrounds
Replacing a default library palette where one colour dominates
Category colours in a map or diagram legend
Any set of colours that means 'these are different', not 'these are ranked'

How this generator works

The hue circle is divided evenly by the number of series, and every colour is generated at the same OKLCH lightness and chroma, then gamut-mapped into sRGB. Dividing hue evenly is the simplest way to maximise the minimum distance between any pair; holding lightness constant is what makes the set categorical rather than ordered, because a viewer reads differences in lightness as differences in importance whether or not you intended it.

Randomness and fairness

Nothing is random unless you leave the starting hue unset, in which case it is drawn with the browser's cryptographic random number generator. Everything else is deterministic: the same count, lightness, chroma and starting hue always produce the same colours, which is what lets a palette be pasted into a config file and relied on.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

Colour alone is not enough. Around 1 in 12 men has some form of colour vision deficiency, and evenly spread hues at matched lightness are specifically hard for them — because matched lightness removes the cue they rely on. Use markers, dash patterns, direct labels or ordering as well.
Beyond about eight series, adjacent hues become genuinely hard to distinguish in thin lines or small swatches. Grouping the data is usually the better answer than finding more colours.
This produces a categorical palette. For data with an order — low to high — a single-hue ramp from the shade scale generator carries that meaning and this does not.
Achievable chroma varies by hue, so a set at high chroma will not be perfectly even in saturation even though it is even in lightness.
It does not check contrast against your background. Thin lines need more contrast than large filled areas, and only you know which you are drawing.

Common mistakes

Relying on colour alone to identify series: Add markers, dash patterns or direct labels. This matters most with a matched-lightness palette, because matched lightness is precisely what a colour-blind viewer cannot use to tell two series apart.
Using a categorical palette for ordered data: If the categories have an order, use a single-hue ramp. Distinct hues say 'different', not 'more'.
Generating twelve colours for twelve series: Twelve hues is past what anyone can reliably match to a legend. Group the small categories into 'other', or use small multiples instead.
Using the light-background palette on a dark chart: Raise the lightness to about 0.75. Colours tuned for white backgrounds sink into a dark one.

Practical tips

Set the starting hue so your primary metric lands on your brand colour; the rest follow from it.
Generate one more colour than you need and keep it aside for a later series, rather than regenerating the whole palette and changing every existing chart.
Check the palette in greyscale. If two series become indistinguishable, they will be for some of your readers in colour too.

Privacy and your data

Nothing is entered and nothing is stored. Colours are calculated in your browser, are not uploaded, and are not written into the page address. Analytics records the series count only.

Frequently asked questions

How many colours can a chart use?: Practically, six to eight. Beyond that, matching a line to a legend entry becomes guesswork regardless of how well the colours are chosen. If you have twelve categories, the answer is usually to group them rather than to find twelve colours.
Is this palette colour-blind safe?: Not on its own, and no palette of evenly spread hues at one lightness can be — matched lightness removes exactly the cue that helps most. Use it with markers, dash patterns or direct labels, and check the chart in greyscale.
Why keep every colour at the same lightness?: Because a viewer reads a brighter or darker series as more important. In categorical data no series is more important, so the palette should not imply otherwise. Matching lightness is the only way to avoid it, and OKLCH is the space where matching it is possible.
Should I use this for a heatmap?: No. A heatmap encodes magnitude, which needs a ramp that varies in lightness — the shade scale generator produces one. Distinct hues on a heatmap actively mislead.