Free Gradient Palette Generator
#6366F1
99,102,241
#8262E7
130,98,231
#9A5FDC
154,95,220
#AE5BD1
174,91,209
#C056C5
192,86,197
#D052B7
208,82,183
#DE4DA9
222,77,169
#EC4899
236,72,153
Something not working? Report a problem
About the Gradient Palette
Interpolate between two colours in linear-RGB space (perceptually smooth) — choose 4–20 steps, copy as CSS gradient or hex list, or download as a PNG colour strip.
How to use the Gradient Palette
- 1Pick a 'From' colour and a 'To' colour using the pickers or hex inputs, or choose a preset pair.
- 2Drag the Steps slider to set how many colour stops you want between the two endpoints (4–20).
- 3The gradient strip preview and swatch grid update instantly.
- 4Click any swatch to copy its hex code.
- 5Use 'Copy hex list' for a comma-separated list, 'Copy CSS gradient' for a ready-to-paste gradient, or 'Download PNG strip' for a visual export.
Frequently asked questions
Why linear-RGB interpolation instead of HSL?
Interpolating in HSL space can produce unexpected hue shifts and muddy mid-tones — for example, a blue-to-yellow blend passes through an ugly grey in HSL. Linear-RGB interpolation (working in the physical light domain before gamma correction) produces perceptually smoother, more natural-looking gradients.
What is the difference between this and the CSS Gradient Generator?
The CSS Gradient Generator lets you place arbitrary colour stops and control direction, type and angle — it's for designing a specific gradient effect. The Gradient Palette generates a smooth set of evenly-spaced colours between two endpoints — useful for data visualisation, design systems and generating colour scales.
How do I use the hex list in code?
The hex list is a comma-separated string of colours from start to end. In JavaScript you can split it with .split(', ') to get an array. Useful for chart colour scales, heatmaps, or any scenario where you need a specific number of evenly-spaced colours between two endpoints.
Can I use this for data visualisation?
Yes — this is exactly what sequential and diverging colour scales in data visualisation use. Pick 8–12 steps between a light and dark colour for sequential data, or interpolate from one hue through white or grey to a contrasting hue for diverging data.