ffee All tools
EN 中文 FR DE

Color Scale Generator

Build a sequential, diverging or categorical colour scale between the endpoint colours you choose.

Build a colour scale

Steps: —
Hex values: —
Sequential and diverging scales interpolate between your colours, while a categorical scale spaces hues around the colour wheel.

How to use the Color Scale Generator

  1. Pick whether you need a sequential, diverging or categorical scale.
  2. Choose the endpoint colours and the colour space for the interpolation.
  3. Copy the CSS variables or the JSON list of hex values.

Features

Advertisement

More tools

Bar Chart Maker Line Chart Maker Pie Chart Maker Scatter Plot Maker Histogram Maker Box Plot Maker Chart to Image Heatmap Generator Sparkline Generator Image Compressor Image Info Image Converter

Frequently Asked Questions

Common questions about the free online color scale generator.

A scale that runs from a light or dark endpoint to the other, used to show how a single value rises or falls across a map or chart.
Use it when values sit either side of a meaningful middle such as zero, with a pale centre colour and two contrasting ends.
It spaces hues evenly around the colour wheel so the steps stay equally distinct from one another rather than forming a smooth ramp.
OKLab usually gives the most even perceptual steps, linear RGB avoids dark muddy midpoints, and sRGB matches a plain CSS gradient.
Mixing two hues in sRGB passes through grey. Switching to OKLab or HSL keeps the middle steps more saturated.
Between two and twenty four steps, which covers most chart legends and design systems.
Copy the CSS block and paste it into a style sheet as custom properties, or copy the JSON when a script needs the list.
Yes. It is free for personal and commercial work, with no account, no sign-up and no attribution required.

Last updated: October 10, 2026