Color mixer

Blend two colors and get the steps between them.

ABSteps 7

50/50 mix: #808080

Click any band to copy its hex. Blended in your browser.

How it works

1

Pick two colors

Choose a start and end color.

2

Set the steps

Choose how many intermediate colors to generate between them.

3

Copy the blend

Copy any step’s value for your gradient, chart or theme.

Frequent questions

What can I use the blended steps for?

Even color ramps are handy for data-visualisation scales, gradient stops, and generating consistent hover or shade variants between two brand colors.

How are the in-between colors calculated?

By interpolating evenly between the two colors, so each step is a proportional mix of the start and end.

Explore more tools

Convert colors between HEX, RGB and HSL.

Contrast checker

Check color contrast against WCAG AA/AAA.

Palette generator

Harmonies, tints and shades from a base color.

Gradient generator

Build linear and radial CSS gradients.

Generate organic SVG blob shapes.

Color theme maker

Build a light/dark theme and export CSS variables.

Palette from image

Extract dominant colors from an image.

Color blindness simulator

Preview colors for different vision types.