Colour Scale Generator

How the Colour Scale And Legend Generator works

Colour scale generator: numeric scales

Type two numbers, such as 0 100 or -20, 40, and the page treats them as the range of the data. Continuous draws a single gradient bar with evenly spaced ticks. Stepped divides the range into the number of bins set by Steps and draws one flat block per bin, with a tick at every boundary, which is what a choropleth map or a classed heatmap needs. The stats panel lists the colour at each tick or bin so you can copy the same hex values into the chart itself and keep the legend and the data in step.

Choosing a scheme

Viridis, Inferno, Plasma, Cividis and Turbo are perceptually uniform, meaning equal steps in value look like equal steps in colour, and the first four remain readable when printed in greyscale or viewed with colour vision deficiency. The single-hue ramps such as Blues or Reds suit a scale that starts at nothing and grows. The diverging schemes, red to blue and the rest, put a neutral colour in the middle and are for data with a meaningful centre, such as change from a baseline, temperature anomaly or profit and loss. Chart palette blends the first five colours of the palette chosen in the chart settings, which keeps the legend consistent with the other charts on this site. Direction flips any scheme so the strong colour sits at the low end if that reads better for your data.

Category legends

Enter one label per line and the page draws a swatch beside each, wrapping into columns when the list is long. Colours come from the chart palette in order, so a legend made here matches a bar or pie chart drawn with the same palette. To set colours yourself, follow each label with a comma and a hex value or CSS colour name, such as Rail, #1c7ed6. Mixed lines are fine; any line without a colour takes the next palette colour.

Layout

Horizontal puts the bar across the page with ticks beneath it, the usual choice for the bottom of a map or heatmap. Vertical stands it up with ticks on the right, for a legend down the side of a tall figure. Axis label adds a caption such as "Rainfall (mm)" below or alongside the bar, and the Title field above the chart adds a heading.

Exporting

Download SVG gives a vector legend with real text that can be dropped into Illustrator, Inkscape, Figma or a report and resized without loss. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard for pasting into a web page or another SVG.

Related tools