Gradient Palette Generator

Generate a smooth gradient color palette by interpolating evenly between two anchor colors. Perfect for building color scales, gradient stops and design system tokens.

Colors

What Is a Gradient Palette?

A gradient palette is a set of colors that smoothly transitions between two anchor colors, evenly interpolated in RGB space. Unlike harmony-based palettes (which use color theory to pick colors from different hues), gradient palettes stay on a linear path between two endpoints — perfect for color scales, heatmaps and CSS gradient stop values.

How Gradient Palettes Work

Start: #155EEF → rgb(21, 94, 239)
End:   #7C3AED → rgb(124, 58, 237)
5 colors (t = 0, 0.25, 0.5, 0.75, 1):

  t=0.00 → rgb(21, 94, 239)   #155EEF
  t=0.25 → rgb(47, 85, 238)   #2F55EE
  t=0.50 → rgb(72, 76, 238)   #484CEE
  t=0.75 → rgb(98, 67, 237)   #6263ED
  t=1.00 → rgb(124, 58, 237)  #7C3AED

When to Use Gradient Palettes

  • Data visualization: Heatmaps and continuous scales need evenly-spaced color steps.
  • CSS gradients: Multi-stop gradients need precise intermediate colors.
  • Design systems: Brand color → black (or white) scales are gradient palettes.
  • UI elevation: Background-to-surface transitions look better with subtle gradient steps.
  • Illustration: Blending between two dominant colors creates visual depth.

Frequently Asked Questions