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.
Blend two colors at any ratio with instant HEX, RGB and HSL readouts, plus an eleven-step scale you can use for transitions and hover states. Mixing interpolates each RGB channel, so the result is predictable.
Use the scale output to build smooth color gradients or pick hover shades between two brand colors.
#9d43b7rgb(157, 67, 183)hsl(287, 46%, 49%)11-step blend scale
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.
Related tools
Related guides
Color theory · 26 Aug 2026
Mix colors and use alpha without ruining your palette
Blending colors and adding transparency seem easy — until they turn your palette to mud. Here's the alpha-aware way to do both.
Short lessons · 17 Aug 2026
Gradients that don't look cheap
Most gradients look muddy because both stops are too similar. Here's what actually makes a gradient read as rich.
Color mixer runs entirely in your browser — nothing you enter is sent to a server.