Color Mixer
Mix and blend two colors to create perfect combinations. Adjust the ratio and see the result in real time, then copy the hex, RGB or HSL value.
#8c9384
rgb(140, 147, 132) · hsl(88, 6%, 55%)
Full blend between both colors
- 0%
- 10%
- 20%
- 30%
- 40%
- 50%
- 60%
- 70%
- 80%
- 90%
- 100%
Additive and subtractive mixing are not the same thing
Everything you learned about mixing colors in a classroom applies to paint, which is subtractive: each pigment removes wavelengths from the light reflecting off the page, so more pigment always means darker. Screens are additive. Each channel emits light, so more of everything means brighter, and the primaries are red, green and blue rather than red, yellow and blue.
That difference explains most of the surprise people feel when mixing digitally. Blue and yellow do not make green on a screen because the midpoint between those two hues in RGB space passes close to grey. It is not a bug in the tool; it is the correct behaviour for light.
What the blend ramp is actually useful for
The eleven-step blend below the preview is more useful than the single mixed color for most design work. Blending your brand color toward a near-white gives you a set of tints for backgrounds and hover states. Blending toward a near-black gives you shades for borders, text and pressed states.
Doing this consistently for every color in your system is what produces an interface that feels like one product rather than a collection of screens. It also means every derived color is mathematically related to the source, so a brand refresh becomes a single-value change rather than a manual audit.
One caveat: blending toward pure black desaturates quickly and can look muddy. Blending toward a very dark version of your own hue, rather than toward #000000, keeps the ramp lively.
Color Mixer FAQ
How does the color mixer work?
Pick two colors and drag the ratio slider. The tool interpolates between them channel by channel and shows the result live, along with the full eleven-step blend so you can grab any intermediate value.
What color do you get when you mix blue and yellow?
On a screen you get a desaturated grey-green rather than the vivid green you would get with paint. Screens mix light additively while paint mixes pigment subtractively, which is why digital mixing of complementary hues tends toward neutral.
Why does mixing two bright colors give a dull result?
Because the midpoint of two hues that sit far apart on the color wheel passes through the low-saturation centre of the color space. If you want a vivid intermediate, pick a third color at the hue you want rather than expecting the blend to supply it.
Can I use the blend steps as a color ramp?
Yes, and it is one of the most practical uses of this tool. Blending your brand color toward near-white and near-black gives you a coherent tint and shade ramp for a design system in a few seconds.
Is the color mixer free?
Yes. Every tool here is free with no account and no usage limit.