Color Mixer
Design ToolsBlend two colors and see in-betweens
FreePrivateInstant
Similar tools you may like
History
All history →Color Mixer — at a glance
Blend two colors and pick any shade in between.
#FF0080
#2563EB
7 steps
Run
0% #FF0080
50% #9232A0
100% #2563EB
How to use it — step by step
Choose two colors and how many steps you want between them.
1
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
2
Mix Colors
Press the button. The answer is worked out instantly on your device.
3
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
✦Use an odd number of steps to get an exact middle color.
✦Great for creating smooth gradient stops.
✦Colors are mixed in RGB, which can look slightly darker in the middle.
Quick facts
3–15steps
Previewlive gradient
HEXcopy codes
Freeno signup
Frequently Asked Questions
How are the colors mixed?+
Each red, green and blue value is blended in a straight line between the two colors.
Why does the middle look muddy?+
Mixing opposite colors in RGB can give grey tones. Try colors that are closer on the color wheel.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to useColor Contrast CheckerIs your text readable? The contrast ratio, explainedPX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises