Gradient Palette Generator

How to use the gradient palette generator

1. Type or paste a hex code into Start color and End color, or click a swatch to open the picker. The swap button flips their order.
2. Set Steps anywhere from 2 to 12. Both of your colors are included, so 5 steps means your two colors plus three blended in between.
3. Stuck for a starting point? Random picks two colors that blend well, and AI picks two colors from a short description like “deep ocean dusk”.
4. Click any swatch to copy its hex. Export copies the whole palette as Hex, CSS variables, SCSS, a Tailwind config, JSON, or RGB, and Open in editor sends it to the color palette generator.

The page URL updates with your colors and step count, so you can bookmark or share the exact palette.

What is a gradient palette?

A gradient palette is a set of colors that steps evenly from one color to another. If you go from yellow to red in 3 steps, the middle color is orange. It’s a quick way to get a set of colors that clearly belong together.

A regular gradient is a continuous blend, the kind you set as a CSS background. A gradient palette samples that blend into a fixed number of solid colors. Use a gradient for a seamless fade and a gradient palette when you need individual swatches. Build the continuous version in the gradient maker.

What a gradient palette is good for

• Data visualization: sequential scales for charts, heatmaps, and maps, where each step stands for a value.
• UI scales: blend from a near-white to a deep color for backgrounds, borders, and hover states. For tints and shades of a single color, the color shades generator is faster.
• Design starting points: a palette you can refine in the editor instead of guessing at colors from scratch.
• Related category colors: dashboards and infographics that need several colors which still feel like one family.

How to pick good start and end colors

• Endpoints close in hue, like blue to teal, give a calm, almost monochromatic feel. Endpoints far apart, like yellow to purple, give a bolder spread.
• Watch the middle. This tool blends in RGB, so when your two colors sit opposite each other on the color wheel, the middle steps can turn grayish. Endpoints that share some warmth or coolness keep the blend lively.
• Pair a light color with a dark one if you need the steps to work as a readable scale.
• Need ideas? Browse the gradient palette gallery.

Frequently asked questions

How many steps should I use?

Three to five steps make a quick, punchy palette. Seven to twelve give you a fine-grained scale that suits data visualization or a full set of UI colors. More steps means smaller jumps between each color.

Can I export the palette as CSS or Tailwind?

Yes. Click Export and switch between Hex, CSS variables, SCSS, Tailwind config, JSON, and RGB, then copy the format you need.

Can I use more than two colors?

This tool blends between two colors. For a palette with several fixed colors, use the color palette generator, or add more color stops in the gradient maker.