Blend two colors together and generate smooth midpoint swatches. Adjust the number of steps and copy all HEX codes instantly.
Color blending creates intermediate colors between two endpoints by interpolating their RGB values. This produces smooth transitions that are useful for creating gradient palettes, design tokens, data visualisations, and consistent colour ramps. Unlike using a simple gradient, blending gives you discrete, individual colour values that you can use independently across your design system.
The tool performs linear interpolation in the RGB colour space between your two chosen colours. For each midpoint step, it calculates proportional values for red, green, and blue channels. With 5 midpoints, you get 7 total colours (start, 5 midpoints, end) evenly spaced along the transition. Increasing the number of midpoints creates smoother and more gradual transitions between the two colours.
Blended colour palettes are invaluable for data visualisation, where you need a sequential colour scale to represent values from low to high. They work excellently for generating button hover states, status indicators that range from good to critical, or creating a set of design tokens for a component library. The discrete HEX values make it easy to use each colour independently in CSS variables, design tools, or charting libraries.