How does the color mixing work?

The tool uses RGB interpolation to mathematically mix the two colors together. It calculates the exact midpoint (or any custom ratio) between the red, green, and blue values of both colors.

Can I copy the intermediate steps?

Yes, you can click on any of the intermediate step color blocks to immediately copy its value in your chosen format (HEX, RGB, or HSL).

Is there a limit to how many steps I can generate?

You can generate up to 12 intermediate steps between the two base colors, which is usually plenty for finding the perfect transition color or building a custom gradient scale.

Tool

Color Mixer

Blend two colors together and explore the intermediate steps. Adjust the ratio to find exactly the shade you need.

Mix Controls

Color 1

Color 2

Mix Ratio50% / 50%

More Color 2More Color 1

Intermediate Steps

Space

Format

Steps

About the Color Mixer

The Color Mixer allows you to blend two colors together just like mixing physical paint, but with mathematical precision. You can control the exact ratio of the mix and generate a stepped transition between the two base colors.

When to use it

Gradients: Discovering the perfect midway point to fix a "muddy" gradient transition.
Theming: Finding a color that sits exactly between a brand primary and a neutral gray.
Data Visualization: Generating a custom discrete sequential color scale between two endpoints.

Color Mixer

Mix Controls

Intermediate Steps

About the Color Mixer

When to use it

Frequently Asked Questions

Related Tools