Gradient palette generator
Choose a start and an end color and get evenly spaced colors between them: 3 to 10 steps you can copy or open in the palette generator.
How to make a gradient palette
- Choose a start color and an end color with the color pickers.
- Set the number of steps with the slider, from 3 to 10.
- Click any step to copy its hex code.
- Press Open in Generator to keep working with the palette: lock colors, adjust them and export.
What you can do
Even steps
Each red, green and blue channel moves in equal increments from the start color to the end color.
Three to ten colors
Make a short ramp for a theme or a longer one for a chart or a heat scale.
Copy any step
Click a swatch to copy its hex code.
Open in the generator
Send the stepped palette to the palette generator to adjust, check contrast and export it.
Frequently asked questions
What is a gradient palette?
A set of separate colors that step evenly from one color to another, such as a five-color ramp from dark blue to cyan. A CSS gradient blends continuously, while a gradient palette gives you distinct colors to use as a scale or a theme.
How do I make a color ramp between two colors?
Pick the two end colors, choose how many steps you want, and read off the colors in between. Click a step to copy its hex code.
How are the in-between colors calculated?
Each red, green and blue channel is interpolated in a straight line from the start color to the end color and rounded to a whole number. For a mix that follows how colors look, use the color mixer, which can mix in OKLab and OKLCH.
How many steps can I generate?
From 3 to 10, including the start and end colors.
How do I turn the palette into a CSS gradient?
Use the CSS gradient generator, which writes linear, radial and conic gradient code you can copy.