How to make a gradient color palette
Pick the start and end colors, by typing their code or using the picker, and how many shades you want between them, from 3 to 12. The in-between colors are calculated in a color space that mimics human vision (OKLab), so the steps between shades look even and no muddy grays show up in the middle.
Gradient palette or smooth gradient
This tool gives you separate colors, each with its code, to use one by one: in a Tailwind scale, in charts, in a presentation or in the sections of a website. If what you need is a background that blends smoothly from one color into another, use the CSS gradient generator.
Frequently asked questions
What is a gradient color palette?
It is a series of colors that shift little by little from one color to another. For example, from pink to sky blue in 7 steps. Each color has its own HEX code and can be used on its own.
How many colors can the palette have?
Between 3 and 12. With few colors the jumps are more noticeable; with many, the transition is smoother and you have more shades to choose from.
Which formats can I export it in?
As CSS variables with the gradient ready to use, a list of HEX codes, a Tailwind config, JSON, SVG or a PNG image. You can also open it in the palette generator to keep editing it.
Why don’t the in-between shades look gray?
Because the blend is calculated in OKLab, a color space designed around human vision. A straight RGB mix between opposite colors, like pink and green, passes through dull shades; in OKLab the transition is cleaner and more even.
Can I share my palette?
Yes. The page address stores both colors and the number of shades, so you can copy it and send it.
How is this different from the gradient generator?
The gradient generator creates a continuous CSS background. This tool gives you the separate colors that sit between two colors, to use one by one.
Is it free?
Yes, no sign-up and no limits. You can save your favorite gradients with the heart; they are stored in this browser.