Color Gradient Steps (Colors Between Two Colors)

Need five shades for a chart legend, a heat map or a progress bar that move smoothly from one brand color to another? This tool returns 3 to 30 evenly spaced colors between a start and an end color, optionally passing through a middle color, and lets you choose the color space the blend happens in — which matters more than most people expect. You get a HEX list, a smooth and a stepped CSS gradient, JSON for chart libraries, CSS variables and swatches.

How to use this tool

1. Enter the start and end colors, and a middle color if the blend should pass through one.
2. Choose how many colors you need, including both ends.
3. Pick the blend space: OKLCH or OKLab for even, vivid steps; sRGB to match older tools; HSL longer hue for a rainbow.
4. Copy the HEX list, JSON or CSS variables.

Formula

colorᵢ = start + (end − start) × tᵢ, with tᵢ = i ÷ (n − 1), computed on the channels of the chosen space

In sRGB the channels are the 0–255 values; in linear RGB they are light intensities; in HSL and OKLCH the hue follows the shorter (or longer) way around the color wheel, as in CSS Color 4. A gray has no hue, so it borrows the other color's. OKLCH results outside sRGB keep their lightness and hue and lose chroma.

Example

From black to white in 5 sRGB steps you get #000000, #404040, #808080, #BFBFBF and #FFFFFF (255 × 0.25 = 63.75 → 64 = #40). Blending in linear RGB puts the middle at #BCBCBC instead, because half the light looks lighter than half-way gray. From red to blue in HSL the shorter path goes through magenta #FF00FF; the longer path goes through lime #00FF00.