Blend two colors together and generate smooth midpoint swatches. Adjust the number of steps and copy all HEX codes instantly.
5
What Is Color Blending?
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.
How the Blending Works
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.
Practical Uses for Blended Colors
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.
You can generate between 2 and 10 midpoint colors using the slider. This creates a total of 4 to 12 colors including the two original endpoint colors. More midpoints create smoother transitions between your two chosen colors.
What color space is used for blending?
The blending is performed in the RGB color space using linear interpolation. Each channel (red, green, blue) is interpolated independently between the start and end values. This produces predictable, consistent results for most use cases.
Can I copy individual colors or all at once?
Both! Click any individual swatch to copy its HEX code to your clipboard. Use the 'Copy All HEX Codes' button to copy every color in the blend as a comma-separated list, which is convenient for pasting into code or design tools.
Why does blending red and green produce brown/grey?
When you blend complementary colors (like red and green) in RGB space, the midpoints pass through low-saturation values, resulting in brownish or greyish intermediates. This is because the channels partially cancel each other out. If you want vibrant transitions between complementary colors, consider using a palette generator with HSL-based interpolation instead.
How is this different from a gradient?
A CSS gradient is a continuous, smooth transition rendered by the browser. The color blender gives you discrete, individual color values at specific points along that transition. These individual values are useful when you need specific color tokens, such as for design systems, chart color scales, or theme variables where each step needs its own defined color code.