Chart color palette generator
Generate categorical, sequential or diverging colors. Preview a sample chart and copy the colors for your chart library.
Generate chart colors ↓Enter valid opaque colors and choose supported chart options.
Categorical colors separate groups; sequential colors show order; diverging colors show a midpoint. Generated variations can be clipped to sRGB.
Sample values, not analytics. Use labels, symbols or patterns as well as color. A 3:1 ratio against the background alone does not certify a chart.
| Series | HEX | Contrast on background |
|---|
// Pass this array as your dataset backgroundColor or borderColor.
const colors = [
"#2563EB",
"#AC3C99",
"#BF4100",
"#677C00",
"#008E89"
];Match the palette to the data
Categories
Use distinct hues for unrelated groups such as sales channels. Keep the same category color in every view and add names beside the marks.
Ordered values
Use a light-to-dark scale when the values have an order, such as low to high activity. Start with the blue shade scale and inspect the result at its actual size.
A meaningful midpoint
For values above and below a target, use two hue families with a neutral midpoint. Show the numeric scale and label the target explicitly.
A four-color palette for a light chart
This example uses a white background. Names and values remain visible alongside the colored bars, so hue is not the only way to read the result. The figures are illustrative, not site analytics.
- Direct48
- Search36
- Email28
- Referral20
const chartColors = [
'#2563EB', // Direct
'#047857', // Search
'#B45309', // Email
'#7E22CE' // Referral
];Keep these exact colors in your chart configuration, or generate a different combination from the blue seed. Generated variations will differ from this hand-picked example.
Check the finished chart
- Set the chart background before evaluating any series color.
- Check each meaningful mark against its adjacent colors. Thin lines may need extra contrast or a larger stroke.
- Add direct labels, symbols, patterns or a data table. A red/green distinction alone is insufficient.
- Preview the palette with the color vision workflow, then inspect the actual chart at mobile size and in print if relevant. A palette simulation is a preview, not an accessibility certification.
WCAG distinguishes text contrast from meaningful graphics. Normal-size text generally needs 4.5:1, large text 3:1, and graphical parts needed to understand content generally need 3:1 against adjacent colors. Applicability depends on the actual chart.
How many colors should a chart use?
Use as few as the task allows. There is no universal safe count: mark size, background and labeling matter. With many categories, try grouping smaller groups or separating the chart into multiple views.
Does a distinct palette automatically pass accessibility checks?
No. Distinct hues do not establish contrast or make every category identifiable. Test the real chart, including labels, focus states, overlapping marks and adjacent colors.
Can I reuse the palette on a dark background?
Check it again on the dark surface. A palette chosen on white can lose contrast when the background changes. Use the dark mode example to start with explicit surface and text tokens.