Color Mixer
Mix and blend colors with our free color mixer tool. Create custom colors by combining any two colors with adjustable ratios.
How colors mix on a screen
Every color on a screen is made of red, green and blue light. Adding light makes the result brighter, which is why this kind of mixing is called additive. Red light plus green light gives yellow, green plus blue gives cyan, and all three at full strength give white. The mixer above works this way: it averages the red, green and blue channels of your two colors, weighted by the ratio you set. It averages rather than adds, so a 50/50 mix of red and green light gives olive #808000 — the same hue as the yellow you would get by adding them, at half the brightness.
That is also how a 50/50 mix can look lighter and more washed out than you expect. Two strong colors that sit opposite each other on the color wheel — a blue and a yellow, say — average out toward a dull grey, because their channels cancel. If you want the mix to stay saturated, move the ratio away from the middle or pick two colors that are closer together on the wheel.
Why paint mixes differently
Paint, ink and dye do the opposite: each pigment absorbs part of the light falling on it and reflects the rest, so every color you add takes light away. That is subtractive mixing, and its primaries are the ones you were taught at school — red, yellow and blue — or the cyan, magenta and yellow used in printing. Red and green paint make a muddy brown, while red and green light make yellow.
No screen tool can predict a real pigment exactly, because the result depends on the paints themselves: their opacity, how finely they are ground, and how much white or black is already in the tube. Use the table below for the classic results, and treat the mixer as a way to plan a scheme rather than to match a physical swatch.
What two colors make…
The pairs people search for most, with the traditional paint result next to what the same two colors give when a screen averages them. The two columns disagree on purpose — that is the difference between mixing pigment and mixing light.
| Mix | Paint (subtractive) | Screen (50/50 RGB) |
|---|---|---|
| Red + Yellow | Orange #ff7f00 | #ff8000 |
| Blue + Yellow | Green #00a550 | #808080 |
| Red + Blue | Purple #6a0dad | #800080 |
| Red + Green | Brown #6b4423 | #808000 |
| Blue + Orange | Brown #7b5b3a | #804080 |
| Blue + Green | Teal #008080 | #008080 |
| Red + White | Pink #ffc0cb | #ff8080 |
| Red + Black | Maroon #800000 | #800000 |
Paint results are the conventional ones; real pigments shift with brand and opacity. Screen values are the exact 50/50 average this page calculates.
How to use the color mixer
- Pick your two colors. Click either swatch to open the color picker, or type a hex code straight into the field below it. The RGB value updates as you go.
- Set the ratio. Drag the slider to weight the mix. At 50 the two colors count equally; move it toward one end to keep more of that color in the result.
- Copy the result. The mixed color shows its name, hex and RGB value. Use the copy buttons to take either format straight into your design tool or CSS.
- Save it as a palette. Generate a palette from the mix to get a full set of colors built around it, with contrast checks and a shareable page.
Mixing tips worth keeping
- To tint a color, mix it with white; to shade it, mix it with black. Mixing with a grey of the same lightness mutes it without making it lighter or darker.
- Mixing a color with a little of its opposite on the color wheel is the quickest way to calm it down. Use that instead of black, which tends to go muddy.
- Interface colors need contrast, not just harmony: check any mixed color against its background before using it for text.
- Two colors that mix to a pleasant midpoint usually work well together in a palette — the midpoint makes a good border, hover state or muted background.
Common questions
What two colors make orange?
Red and yellow make orange either way: mixed as paint, and as a 50/50 screen average of #ff0000 and #ffff00, which lands on #ff8000. The two methods disagree elsewhere — blue and yellow give green in paint but a flat grey on screen.
What colors make brown?
Any two opposite colors mixed in paint drift toward brown: red and green, blue and orange, or yellow and purple. Adding a little more red keeps the brown warm; more blue makes it cooler and closer to grey.
Why does my mix look grey?
Because the two colors sit opposite each other on the color wheel and cancel out. Their red, green and blue channels average toward the middle, which is grey. Pick colors that are closer together, or shift the ratio away from 50.
Does this tool mix paint or light?
Light. It averages the RGB channels of the two colors, which is how they combine on a screen. The table above gives the traditional paint results for the same pairs.
Can I mix more than two colors?
Mix two, then feed the result back in as one of the inputs and add a third color. To work with a whole set at once, generate a palette from the mix and adjust it there.