Tonal Steps Tints Shades

Base colour

Every step is mixed from this colour. Nothing else on the page is a source.

Ramp engine

Two, not the three this page advertised. Both run light to dark — the third asked for the same luminances backwards, so picking it mirrored the strip with nothing on screen saying why. The Ramps view puts all three side by side and shows they land on the same colours.

Mix in

The space the interpolation happens in. It changes the middle of a ramp, not its ends — which is why an error here hides so well.

Steps 11 Easing γ 1.0

γ bends where the steps bunch up. At 1.00 they are evenly spaced in whatever the engine is measuring.

Also show

Full ramp Tints — toward white Shades — toward black Tones — toward grey Neutral ladder

The ramp is the subject of this view; the other four are built from the same base and are off until asked for.

The ramp

Where the steps fall

Base colour

Compare

The same base and step count across all of them, which is the only way to see what each one is actually holding constant.

Measure evenness in

The spread of the step sizes about their mean. A ramp even in one of these is rarely even in another, so the column says which.

Endpoints

The last step into pure black dominates the figure. Both are shown because which one you want depends on whether black is in your palette.

Key sets

Two key lists over this tool’s own ladder. They borrow the names and nothing else.

The engines, and what each holds constant

Step sizes, as the chosen measure sees them

Where the ramp sits in chroma

A ramp built by moving lightness alone traces a line here; one built by mixing toward white and black in a non-linear space does not.

Design-scale key sets

These were labelled “Tailwind 50–950” and “Material 50–900”, and they are one function called twice with a different key list: mix toward white below 500, toward black above it, linearly in the key. Tailwind’s palette is hand-tuned per hue and Material’s tonal palette is specified in HCT at fixed tones — neither is a straight white-and-black mix from a 500. Useful ladders carrying those key names, and that is now all they claim to be.

Every step

The ladder

Every dataset and formula this tool rests on

Exactly what you will get

Where these colours sit on the 1931 diagram