Gradient Color Steps

How to use Gradient Color Steps

1. Set the start and end colours, and any intermediate stops.
2. Choose how many steps you want.
3. Copy the hex values, or the CSS gradient if you want it as a background.
4. Blending complementary colours in sRGB passes through grey — add a midpoint stop you choose.
5. For data visualisation, prefer a ramp whose lightness increases steadily rather than a rainbow.
6. Check any step used behind text against a contrast ratio; a smooth ramp crosses the readable threshold somewhere in the middle.

Why the middle of a blend goes muddy

Interpolating in sRGB means averaging the red, green and blue channels, and that path frequently passes through grey. Blue to yellow is the notorious example: the midpoint of the two channel sets is a desaturated sludge, because the route between them in RGB space goes near the centre where all colours are grey. Perceptual spaces such as OKLCH and Lab take a path that keeps saturation, which is why modern design tools and CSS’s newer interpolation keywords produce visibly better blends between distant hues.

Colour ramps for data are a different problem

A gradient that looks attractive can badly misrepresent data. The classic rainbow scale is the worst offender: it has sharp perceptual boundaries at yellow and cyan that invent structure in the data, and it becomes unreadable in greyscale and for colour-blind readers. Sequential data wants a ramp that increases monotonically in lightness — viridis, magma, or a simple single-hue light-to-dark. Diverging data with a meaningful midpoint wants two hues meeting at a neutral. Categorical data wants distinct hues, not a gradient at all.

Generating a tint scale from one brand colour

A practical use: blend your accent toward white for the light steps and toward a very dark neutral for the dark ones, taking evenly spaced samples to get a 50–900 scale like the ones design systems ship. Blending toward pure white and pure black gives washed-out and muddy ends; blending toward a very light tinted white and a near-black that carries a little of the hue keeps the scale coherent.