How does the interpolation work?

The tool computes a linear RGB interpolation between the two endpoint colors. For N steps, the i-th swatch uses ratio i/(N-1), so step 0 equals the first color and step N-1 equals the second.

How many steps can I generate?

Between 3 and 12. The slider snaps to whole numbers and re-renders the swatch row instantly.

Why do RGB midpoints sometimes look muddy?

High-contrast color pairs (such as pure red and pure blue) pass through gray in their RGB midpoint. This is mathematically correct for additive RGB but can look dull. If you need vibrant midpoints, pick two colors that are closer on the color wheel.

Can I copy a single swatch?

Yes. Click any generated swatch to copy its HEX code to the clipboard.

Two-Color Gradient Steps Generator

Enter two HEX colors and choose a step count to generate an even RGB-interpolated swatch row between them.

Color 1

Color 2

Steps

Summary

Enter two HEX colors and choose a step count to generate an even RGB-interpolated swatch row between them.

How it works

Enter the start HEX color in the first input
Enter the end HEX color in the second input
Drag the Steps slider to pick how many swatches to generate
The result row updates live with every swatch as a clickable color

Use cases

Build evenly-spaced gradient stops for CSS or design tools
Preview transitions between two brand colors
Generate intermediate shades for chart legends or UI states
Pick a midpoint color between two extremes

Frequently Asked Questions

Last updated: 2026-07-26 · Reviewed by Nham Vu