Gradient Palette Generator
Turn a gradient into evenly spaced colours — for chart series, heatmaps, tag colours and design-token scales. Click any swatch to copy it.
Why sample a gradient
A gradient is a palette that has not been cut up yet. Sampling it at even steps gives colours that obviously belong together — a chart series that reads as one family, a heatmap that runs smoothly from low to high, or a set of tag colours that never clash.
Even-looking steps
Mixing in plain sRGB, as CSS does, gives steps that look uneven — some neighbours nearly identical, others far apart — and a grey dip between distant colours. Smooth samples in OKLab, where equal distances look equal, so every step reads as the same size. Vivid keeps the colours’ strength all the way across.
A design-token scale
Choose 50 – 950 for an 11-step scale named like Tailwind’s, ordered from the lightest (50) to the darkest (950). For a usable scale, start the gradient near white and end it near black with your brand colour in the middle; the Tailwind export drops straight into theme.extend.colors.