Color Palette Generator

Build color palettes for charts and dashboards

This color palette generator creates ordered color scales for charts, maps, dashboards and UI themes. It has three modes, gives each colour as a hex code and an HSL value, and shows the palette in a sample grid and cards so you can judge it in context.

How to use it

1. Choose a mode: Palette, Single Hue or Divergent.
2. Pick colours with the colour picker or type a 6-digit hex code such as #003f5c (3-digit shorthand is not accepted).
3. Set the number of colours and the other options for that mode, and pick a light or dark background.
4. Click Copy on any swatch, Copy Hex Values for the whole list, or Export As SVG to download palette.svg.

The three modes

Mode	Inputs	Colours	Use for
Palette	Start and end colour, short or long hue direction	3–8	Categories or a multi-hue gradient
Single Hue	Base colour, brightness, colour intensity	3–9	Low-to-high values (sequential data)
Divergent	Left and right colour, midpoint brightness and intensity	5–13 (odd)	Data above and below a middle value

How Palette mode works

Both colours are converted to HSL (hue, saturation, lightness). Each step moves evenly from start to end: saturation and lightness change in a straight line, and hue turns around the colour wheel the short way or the long way. Lightness is kept between 12% and 90%, and the dark background adds 4 points of lightness.

Example: the default #003f5c (hue 199°) to #ffa600 (hue 39°) with 5 colours and the short direction steps the hue down by 40° each time: #003f5c, #008556, #03ad00, #92d600, #ffa600.

Frequently asked questions

Which mode should I use for a heat map?

Use Single Hue when values run from low to high, and Divergent when values sit above or below a meaningful middle, such as zero or an average.

Are the palettes checked for colour blindness or contrast?

No. The tool does not run accessibility checks, so test important charts with a colour-blindness simulator and a contrast checker.

What does the SVG export contain?

A strip of 96 × 180 px rectangles, one per colour, that you can open in design tools.