What is the difference between sequential and diverging maps?

A sequential map runs light to dark in a single hue for ordered data like population. A diverging map has two contrasting hues meeting at a neutral midpoint, which suits data that deviates above and below a reference value such as temperature anomaly.

Why interpolate in a perceptual space rather than plain RGB?

Linear RGB interpolation produces dull or muddy mid-tones and uneven perceived steps. This tool interpolates in the CIELAB space, which is closer to how the eye perceives lightness and color difference, giving more even-looking ramps like ColorBrewer.

How many classes should I use?

For choropleth maps five to seven classes are common because the eye struggles to distinguish more shades reliably. Use fewer classes for print and more only for continuous color scales rendered by software.

Are these palettes colorblind-safe?

Sequential single-hue ramps are generally safe. For diverging maps avoid red-green endpoints; blue-orange or purple-green pairs are far more distinguishable for the most common color vision deficiencies.

Can I use these for continuous gradients?

Yes. Use a high class count, or take the two endpoints and let your library interpolate. The hex stops produced here define the control points of the ramp.

What is the Gradient Color Map Generator?

Generate perceptually-sensible sequential and diverging color map palettes for data visualization, following ColorBrewer design principles. Pick endpoints and class count to get hex arrays for charts, heatmaps, and choropleth maps. It runs free in your browser on Gera Tools, with nothing uploaded.

Gradient Color Map Generator

Name: Gradient Color Map Generator
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Good data visualization depends on color maps that step evenly to the eye and encode the structure of the data. This generator builds sequential and diverging color maps by interpolating between endpoints in the perceptual CIELAB space — the same principle behind well-regarded schemes like ColorBrewer — and outputs a clean hex array ready to paste into any charting library.

How it works

Each endpoint color is converted from sRGB to CIELAB. The tool then interpolates each L*, a*, and b* channel linearly across the requested number of classes and converts every stop back to sRGB hex. Interpolating in LAB rather than RGB keeps the perceived lightness changing smoothly:

for i in 0..n-1:
  t = i / (n - 1)
  lab = lerp(startLab, endLab, t)   # sequential
  rgb = labToRgb(lab)

For a diverging map the ramp is built in two halves — start to midpoint, then midpoint to end — so the neutral color sits exactly in the center class.

Sequential vs diverging: when to use each

Sequential maps belong on data where values run in one direction — population density, temperature, unemployment rate. A pale-to-dark single-hue ramp communicates “more or less” clearly. The reader’s eye follows the ramp without needing a reference point.

Diverging maps suit data that deviates above and below a meaningful zero or midpoint. Election vote swings, temperature anomalies above or below average, and financial gain/loss all fit this pattern. The two contrasting hues signal “which direction” while the neutral center signals “neither”.

Mixing them up is a common mistake: applying a sequential blue ramp to data with positive and negative values hides which direction the data moves, because there is no visual midpoint the reader can anchor to.

Worked example

For a population choropleth with six classes, start at #f7fbff (near white) and end at #08306b (deep navy). The interpolation through CIELAB produces six shades where the perceived brightness decreases steadily — no muddy middle class, no sudden jumps. Paste the hex array into D3’s scaleQuantize or Vega’s scale definition and the colors are applied automatically.

For a diverging election swing map, choose orange at one end, a light grey midpoint, and blue at the other. This is readable even for the most common forms of color vision deficiency, unlike the red-green pair that looks nearly identical to many viewers.

Tips for professional-quality maps

Five to seven classes is the practical limit for human perception in choropleth maps. Below five lacks nuance; above seven, viewers cannot distinguish adjacent shades reliably.
Avoid red-green diverging pairs for any public-facing visualization. Blue-orange and purple-green are the safe alternatives.
Single-hue sequential ramps (pale to dark in one color) are the most universally legible choice and work for both colorblind and non-colorblind audiences.
Use the hex output directly in D3 (d3.scaleSequential), Chart.js (custom color arrays), Vega/Vega-Lite (scale.range), or any tool that accepts an explicit color array.
For continuous gradients, take only the two endpoints and let your library interpolate. For discrete classes, use the full array and map each data bin to a hex stop.