Two ways to mix, and they disagree
Mixing two colors sounds like it should have one answer. But the result depends on how the color values are interpolated.
- sRGB interpolates the encoded RGB channel values directly. This is a common approach for simple digital color mixing and is useful when you want to work with ordinary sRGB color values.
- Linear light converts each color to the amount of light it actually represents, averages that, and converts back. This is what happens when two beams of light overlap.
| Mix | Colors | Screen (sRGB) | Light (linear) |
|---|---|---|---|
| Red + green | #FF0000 + #00FF00 | #808000 | #BCBC00 |
| Red + blue | #FF0000 + #0000FF | #800080 | #BC00BC |
| Blue + yellow | #0000FF + #FFFF00 | #808080 | #BCBCBC |
| White + black | #FFFFFF + #000000 | #808080 | #BCBCBC |
| Cyan + magenta | #00FFFF + #FF00FF | #8080FF | #BCBCFF |
Red and green give a murky olive on screen and a bright yellow-green as light. Neither is wrong; they answer different questions. sRGB mixing is often useful for everyday digital color work when you want to interpolate ordinary sRGB color values.
Why is the middle of white and black not mid grey?
Mixed on screen it is #808080, which most people accept as
mid grey. Mixed as light it is #BCBCBC, which looks too
light — yet that is the color with genuinely half the light
output.
The gap exists because sRGB values are not proportional to light. An sRGB value of 128 does not represent half as much linear light as 255. It represents roughly 21.6% of the normalized linear-light value. That's why averaging the stored RGB values and averaging their linear-light values produce different results.
Why blue and yellow give grey, not green
In paint, blue and yellow make green. Here they make grey, and the tool is not broken.
Paint mixes subtractively: pigments selectively absorb parts of the light spectrum, so combining pigments changes which wavelengths are reflected toward your eyes.
Screens mix colors using additive RGB light. In the RGB model, blue is (0, 0, 255) and yellow is (255, 255, 0). At a 50% sRGB mix, the channels average to (128, 128, 128), giving #808080.
What the ratio means
The ratio is how much of the second color is in the mix. At 25%, you have three parts of the first color to one part of the second. At 50% it is an even blend, and the result is identical whichever order you enter the two colors.
Uses for a mixed color
- Finding a middle step between two brand colors, for a gradient stop or an intermediate state.
- Muting a color by mixing a little grey or white into it — though the shades and tints generator does that in one step.
- Understanding color overlays: the ratio can help you understand how changing the contribution of one color shifts the result. Actual alpha compositing can depend on the color space and compositing method used.
Frequently asked questions
What color do blue and yellow make?
On a screen, grey. In paint, green. Screens add light, and blue plus yellow covers all three color channels evenly, giving a neutral. Paint absorbs light instead, and both pigments happen to reflect green.
What color do red and green make?
Mixed on screen at 50%, #808000 — a dark olive. Mixed as light, #BCBC00, a much brighter yellow-green. In paint you would get brown, because paint mixing is subtractive.
Which mixing method should I use?
sRGB when you want to interpolate the encoded RGB values directly, which is a familiar approach for everyday digital color work. Linear light when you want the RGB values converted to linear light before interpolation, which is useful for physically based rendering and other workflows where light intensity matters.
Does the order of the two colors matter?
No. Mixing A into B at 70% gives exactly the same color as mixing B into A at 30%, in both methods and at every ratio.