Gradients·free · no signup

Gradient Palette

Turn a two-color gradient into an evenly-spaced palette — perfect for charts, heatmaps and data viz.

From
#
To
#
Steps
Sampled palette
CSS variables
palette.css
:root {
  --stop-1: #7C5CFF;
  --stop-2: #9972FF;
  --stop-3: #B689FF;
  --stop-4: #D39FFF;
  --stop-5: #F0B5FF;
}

How to use the Gradient Palette

The tool interpolates between your gradient’s endpoints and samples the color at evenly spaced positions, converting a continuous blend into a fixed number of solid swatches. Because the samples are evenly spaced along the gradient, you get a balanced palette where each step is the same distance from the next.

  1. 1
    Define the gradient

    Set the start and end colors (and any middle stops) you want to sample from.

  2. 2
    Choose how many swatches

    Pick the number of stops to extract, such as 5 or 10 evenly spaced colors.

  3. 3
    Copy the palette

    Grab the HEX values for charts, heatmaps or a stepped color scale.

Frequently asked

How is this different from a gradient generator?
A gradient generator outputs the smooth CSS blend; this tool extracts discrete solid colors sampled along that blend so you can use them as a palette.
Why would I sample a gradient into solid colors?
Charts, maps and data visualizations often need a fixed set of distinct colors that still feel like a continuous scale — sampling a gradient gives exactly that.
How many stops should I sample?
Match it to your data: use as many swatches as you have categories or buckets, typically 5 to 9 for a readable sequential scale.
Are the sampled colors evenly spaced?
Yes — the positions are spread evenly along the gradient, so each swatch sits the same distance apart in the blend.

More gradients

CSS Gradient Generator
Create linear, radial and conic gradients visually and copy the CSS, Tailwind or SVG output.
Mesh Gradient
Generate modern multi-point mesh gradients and export the CSS.