Color mixer
Mix any two colors and get three answers, because the question has three. Paint subtracts light and heads toward black. A screen adds light and heads toward white. And a mixer that averages the numbers heads toward gray, which is why so many of them hand you mud. Every result comes with the model that produced it, and with the color in ten notations.
Mix two colors
Set both ends, drag the ratio, and read the result off whichever model you need. The pair and the ratio live in the address bar, so a link carries the exact mix.
Paint. Mixed on the red-yellow-blue wheel an artist works from, and darkened the way two unlike pigments darken each other.
Paint result, in every notationClick a value to copy it.
| HEX | |
|---|---|
| RGB | |
| HSL | |
| HSV / HSB | |
| CMYK | |
| HWB | |
| LAB | |
| LCH | |
| LUV | |
| XYZ |
The mixes people ask for
The pairs that get typed into a search box, worked out in advance. Each ladder runs from one color to the other through the hue circle, with the halfway mix marked, and each step is copyable.
Blue and Yellow
Open in gradient generatorHalfway: #00FF80. Paint would give you green, while averaging the channels gives #808080.
Red and Yellow
Open in gradient generatorHalfway: #FF8000. Paint would give you orange, and averaging the channels agrees with the ladder here.
Red and Blue
Open in gradient generatorHalfway: #FF00FF. Paint would give you purple, while averaging the channels gives #800080.
Red and White
Open in gradient generatorHalfway: #FF8080. Paint would give you pink, and averaging the channels agrees with the ladder here.
Green and Yellow
Open in gradient generatorHalfway: #60C000. Paint would give you yellow-green, while averaging the channels gives #80C000.
Black and White
Open in gradient generatorHalfway: #808080. Paint would give you gray, and averaging the channels agrees with the ladder here.
Why most mixers hand you gray
Averaging two colors draws a straight line between them through the middle of the RGB cube. The middle of that cube is gray, so the further apart the two colors sit on the wheel, the more gray you get. Going around the outside keeps the saturation the whole way.
- Blue and Yellow#808080#00FF80
- Red and Blue#800080#FF00FF
- Green and Yellow#80C000#60C000
Left is the channel average, right is the hue-circle blend. Red and yellow are missing from this list because they sit only sixty degrees apart, with nothing to travel around, so both models land in the same place.
Common questions
- What color do blue and yellow make?
- In paint, green. On a screen it depends on how the mixing is done: averaging the red, green and blue channels gives #808080, a flat gray, while blending round the hue circle gives #00FF80, a green much closer to what you expected. Both are real answers to different questions, and the gray is why most online mixers feel broken.
- Why do most color mixers give me gray?
- Because they average the channels. Averaging draws a straight line between two colors through the middle of the RGB cube, and the middle of that cube is gray. The further apart two colors sit on the color wheel, the more gray you get. Going around the outside of the wheel instead keeps the saturation, which is why the ladders here do that.
- What color do red and blue make?
- Paint gives purple. Averaging the channels gives #800080, which is the CSS keyword purple and a dark one. Blending round the hue circle gives #FF00FF, magenta, which keeps the brightness of both. The difference is that averaging darkens as it mixes and hue blending does not.
- Is mixing light the same as mixing paint?
- No, and they are close to opposites. Paint is subtractive: each pigment absorbs part of the spectrum, so adding more pigment removes more light and mixtures head toward black. Light is additive: adding more light adds more of the spectrum, so mixtures head toward white. Red and green light make yellow, which no amount of red and green paint will do.
- Can I mix two colors at something other than 50/50?
- Yes. The ratio slider runs from all of the first color to all of the second, and every model recalculates as you drag it. A 20/80 mix is a different question from a 50/50 one, and it is the one you usually have: tinting a brand color toward white by a fifth, or nudging a green a little toward blue.
- Is a color blender the same as a color mixer?
- They are the same tool under two names. Blending tends to describe what a screen does, where two colors are averaged or interpolated, and mixing tends to describe paint, where pigments subtract light from each other. Since the two produce genuinely different results, this page runs both models rather than choosing a name and picking one.
- How does the paint model work if you are not simulating pigment?
- It mixes on the red-yellow-blue wheel taught in art classes, where red sits at 0 degrees, yellow at 120 and blue at 240, then converts the answer back to a screen color. So blue and yellow land on green because that is where the wheel puts them, computed rather than looked up. It also darkens the result in proportion to how far apart the two colors sit on that wheel, which is why red and green come out brown. It is a model of the wheel an artist reasons with, not of pigment physics, and it will not predict what a specific tube of paint does.
- Which answer should I use for a website?
- The screen one, and if you want the result to look like a mixture rather than like mud, use the hue-circle version. Paint intuition is still useful for choosing which colors to put together, but the value you write into CSS should come from a model that describes light.