Color Mixer
Blend two colors and read every step between them as HEX values.
About the Color Mixer
Blend two colors and read every step between them as HEX values. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Pick two colors
Choose a start and end color using the pickers or HEX inputs.
Set the steps
Use the slider to decide how many blend steps to generate.
View the blend
A row of swatches shows the gradient of mixed colors.
Copy a step
Click any swatch to copy that exact blended HEX value.
Benefits
Find in-between colors
Discover the exact midpoints between two brand colors.
Build smooth scales
Generate even steps for charts, states or gradients.
Copy any step
Every blended color is one click away from your clipboard.
Features & supported formats
Features
- Two color inputs
- Adjustable step count
- Channel-wise RGB blending
- Click-to-copy swatches
- Live preview
Supported formats
Frequently asked questions
How does the mixing work?
Colors are interpolated channel by channel in RGB space across the number of steps you choose, giving an even blend.
How many steps can I create?
You can generate a range of steps with the slider, enough for most UI states and gradient stops.
Can I mix more than two colors?
This tool blends two at a time; chain mixes or use the gradient generator for multi-stop blends.
Why are my midpoints slightly gray?
RGB interpolation can dull midpoints between opposite hues; mixing closer hues keeps results vivid.
Are the blended colors accurate?
Yes, each step is calculated precisely, so copied values match what you see.