Color mixer
Blend two colors at any ratio with a live preview. Get HEX, RGB and HSL values for the mixed result, plus an 11-step blend scale. Free, instant, browser-only.
50% A / 50% B
HEX
#9d43b7RGB
rgb(157, 67, 183)HSL
hsl(287, 46%, 49%)11-step blend scale
#ff006e
#eb0d7d
#d81b8b
#c4289a
#b036a8
#9d43b7
#8950c5
#755ed4
#616be2
#4e79f1
#3a86ff
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Pick or paste two colors.
- Drag the slider to blend at any ratio.
- Copy the HEX, RGB or HSL value.
Frequently asked questions
- How does color mixing work?
- Each RGB channel is interpolated linearly between the two input colors. At 50% you get an equal blend; at 75% the result leans toward the second color.
- What output formats are supported?
- The mixed color is shown in HEX, RGB and HSL, each with a one-click copy button. An 11-step scale from 0% to 100% is also provided.
- Can I use this to create color transitions?
- Yes — the 11-step blend scale is useful for creating smooth gradients or hover state transitions between two brand colors.