Gradient palette
Create a palette of steps between two colors, then copy it or export it in several formats.
Blends the way light mixes, so midpoints don't turn muddy.
HEX list
#5546FF #7081EB #85A5D5 #96C1BC #A5D89D #B3ED72 #BFFF0A
CSS
background: linear-gradient(90deg, #5546ff 0%, #7081eb 17%, #85a5d5 33%, #96c1bc 50%, #a5d89d 67%, #b3ed72 83%, #bfff0a 100%);
:root {
--step-1: #5546ff;
--step-2: #7081eb;
--step-3: #85a5d5;
--step-4: #96c1bc;
--step-5: #a5d89d;
--step-6: #b3ed72;
--step-7: #bfff0a;
}
Frequently asked questions
What is the difference between the blend modes?
Smooth (linear light) mixes colors the way light adds, so midpoints stay bright. Perceptual (OKLCH) steps evenly by lightness, chroma and hue, which suits scales. Classic (sRGB) is the plain per-channel blend that CSS gradients use.
How many colors can I make?
From 3 to 20. The start and end colors are always kept exactly as you entered them.
Can I turn this into a CSS gradient?
Yes. Copy the CSS, or press Edit as a gradient to open the steps in the gradient generator.