Skip to content
ToolQivo

Color Scale Generator

Interpolate an even scale between two or more colours.

Color Tools Reviews Free · no sign-up

The ends of the scale

The scale 
The colours appear here

Quick Tool Overview

The Color Scale Generator interpolates an evenly spaced scale between two or three colours, in the space you choose, and graphs the lightness curve so the flat spots that make a data scale unreadable are visible.

What it does
Builds an even scale between colours
You give it
A start, an end, an optional midpoint and a step count
You get back
The scale, its lightness curve and export code
Best for
Heat maps, charts and data visualisation
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Color Scale Generator

Give it a start and an end colour and it produces as many evenly spaced steps between them as you ask for. Add a midpoint and you get a diverging scale — the kind a heat map needs, where the middle is neutral and the two directions are opposite.

Where the interpolation happens decides whether the scale is usable. In sRGB the middle of a two-colour scale goes grey and dead; in HSL it swings through hues you never asked for, because the shortest path around the wheel between orange and blue goes through green. OKLab avoids both — it keeps the middle colourful and the steps evenly spaced.

The tool also reports whether the scale is monotonic in lightness, which is the property that makes a sequential scale readable: each step must be measurably lighter or darker than the last, or the scale stops carrying an order and becomes decoration. A lightness graph is drawn alongside the swatches so you can see any flat spots, and the result exports as CSS, as an array, or as a CSS gradient.

Key features of the Color Scale Generator

Sequential and diverging

Two colours for a simple ramp, three for a scale with a meaningful middle.

Interpolation space

OKLab keeps the middle colourful and the steps even. HSL is there for when you actually want a hue sweep.

Lightness graphed

A flat section means two steps that look identical. The curve shows it before your readers find it.

Monotonic check

The tool says whether lightness only ever increases, which is what keeps a scale readable in greyscale and for colour-blind viewers.

Export three ways

CSS custom properties, a JavaScript array, or a ready-made CSS gradient.

How to use the Color Scale Generator

  1. 1

    Set the ends

    A start and an end colour, plus a midpoint for a diverging scale.

  2. 2

    Choose the number of steps

    Usually between 5 and 11 — more than that and the steps stop being distinguishable.

  3. 3

    Pick the interpolation space

    OKLab for even, colourful steps. HSL when you specifically want a hue sweep.

  4. 4

    Check the lightness curve

    A flat section means two steps that look the same. Adjust the ends until it climbs steadily.

Frequently asked questions

Sequential for a quantity that runs from low to high. Diverging when the data has a meaningful middle — zero, an average, a target — and you want to show direction as well as magnitude.

Reviews of the Color Scale Generator

What people who use the Color Scale Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Color Scale Generator. It takes half a minute and no account.

Write the first review

More color tools