Gradient Palette Generator
Generate a multi-step colour gradient between two hex values. Export as CSS, hex list, or custom properties — all in your browser.
Frequently Asked Questions
What is a gradient palette?
A gradient palette is a set of colours evenly interpolated between a start and end colour. Each step is calculated by linearly blending the red, green, and blue channels between the two endpoints, giving you a smooth progression of tones useful for design systems, data visualisation, and UI components.
How do I use the exported CSS gradient?
The CSS export produces a linear-gradient() value you can paste directly into a background or background-image CSS property. The hex list gives you each stop as a standalone colour code. The CSS variables export generates custom property declarations (--color-0 through --color-N) you can reference throughout your stylesheet.
Why does the middle colour look different from what I expected?
Interpolation is done in the sRGB colour space, which is the standard for CSS gradients. Because human colour perception is non-linear, an exact midpoint in RGB can appear lighter or darker than you might intuitively expect. If you need perceptually uniform gradients, consider converting your palette to the OKLCH or LAB colour space after exporting.