Color Lerp / Gradient Steps

Generates the evenly-spaced colours between two endpoints. A CSS gradient is one continuous band; this gives you discrete swatches you can ship as chart series, status badges or a heatmap legend. The interpolation space is yours to pick, an easing curve can bend the spacing toward either end, and the whole ramp copies out as hex.

The space matters far more than people expect, and one comparison settles it. Interpolate pure red to pure green and take the midpoint: in sRGB you get #808000, a dark olive that looks like a mistake, because averaging the encoded values halves the perceived brightness of both ends at once. In linear RGB — which is what a renderer does, because it is how light actually adds — the same midpoint is #bcbc00, much brighter, arguably too bright. In OKLab it is #d0a800, a warm amber that reads as a step on the path rather than a hole in it.

That dark middle is the classic gradient artefact, and it shows up whenever the two endpoints put their energy in different channels. Blue to yellow, red to cyan, magenta to green all sag in sRGB. Endpoints that share a channel — light blue to dark blue — barely show it, which is why the problem can go unnoticed for years in a palette that happens to be monochrome.

Two notes on the other options. HSL moves along the hue circle and takes the shorter arc, which is usually what you want but occasionally routes a red-to-green ramp through yellow when you expected it through the other side. And the easing curves change where the steps land, not what the endpoints are: ease-out clusters more of them near the start, which is the right shape for a heatmap where the interesting variation is at the low end and you want resolution there rather than in the saturated tail.