Blend two colors together and see every step of the gradient between them, with copyable HEX codes.
Pick two colors and this tool blends them together in RGB space, showing every intermediate step from 2 up to 10 stops. It's a quick way to find a midpoint color between a brand's primary and secondary palette, or to build a smooth gradient stop-by-stop.
Click any swatch to copy its HEX code. For variations of a single color instead, try the Color Shades Generator.
Each step linearly interpolates the red, green, and blue channels between Color A and Color B — the same math a CSS gradient uses internally.
The Steps dropdown caps at 10 to keep swatches readable,
but for a true smooth gradient in CSS, just use linear-gradient(Color A, Color B)
directly — every browser interpolates that continuously.
Tell us what to improve or which tool to add next.
