Why does mixing blue and yellow give grey instead of green?

Screens mix light additively. Blue and yellow sit opposite each other in RGB, so their average is a desaturated mid-tone. Green from blue and yellow is subtractive pigment mixing, which behaves differently.

What ratio should I mix two colors at?

50/50 gives the true midpoint. Shifting to 70/30 keeps one color clearly dominant while picking up a tint of the other, which is usually what you want for a hover or accent state.

How do I make a color lighter without washing it out?

Mixing with white reduces saturation as it lightens. To keep the color vivid, use the tints and shades tool or a lightness-based palette scale, which hold saturation steady.

Color Tool

Color Mixer

Mix two colors together and explore the full gradient of steps between them. Click any swatch to copy its hex code.

Export Mix Chart

:root {
  --mix-0: #007FFF;
  --mix-10: #2077F2;
  --mix-20: #406FE6;
  --mix-30: #6066D9;
  --mix-40: #805ECD;
  --mix-50: #9F56C0;
  --mix-60: #BF4EB3;
  --mix-70: #DF45A7;
  --mix-80: #FF3D9A;
}

Export Mix Chart

:root {
  --mix-0: #007FFF;
  --mix-10: #2077F2;
  --mix-20: #406FE6;
  --mix-30: #6066D9;
  --mix-40: #805ECD;
  --mix-50: #9F56C0;
  --mix-60: #BF4EB3;
  --mix-70: #DF45A7;
  --mix-80: #FF3D9A;
}

Screen mixing is not paint mixing

Mixing blue and yellow on screen gives grey, not green. Screens mix additively in RGB, where averaging opposing hues lands near the desaturated midpoint, while paint mixes subtractively. If you expected green, you were expecting pigment behaviour.

Mixing is the operation behind tints, shades, and tones: blend with white for a tint, with black for a shade, with grey for a tone.

Frequently asked

Why does mixing blue and yellow give grey instead of green?: Screens mix light additively. Blue and yellow sit opposite each other in RGB, so their average is a desaturated mid-tone. Green from blue and yellow is subtractive pigment mixing, which behaves differently.
What ratio should I mix two colors at?: 50/50 gives the true midpoint. Shifting to 70/30 keeps one color clearly dominant while picking up a tint of the other, which is usually what you want for a hover or accent state.
How do I make a color lighter without washing it out?: Mixing with white reduces saturation as it lightens. To keep the color vivid, use the tints and shades tool or a lightness-based palette scale, which hold saturation steady.

Related tools

← All tools