Can you mix views of different colours to create new colours?

Question

I was hoping that having a yellow view on top of a blue view would create a smaller green view. :D

UIView *blueView = [UIView new];
blueView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);
blueView.alpha = 0.5;
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView];

UIView *yellowView = [UIView new];
yellowView.frame = CGRectMake(40.0, 40.0, 100.0, 100.0);
yellowView.alpha = 0.5;
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview: yellowView];

Didn't work though... Any ideas on this?

I'd like to use it for circles too.

Answer 1

Because computer color blending is additive, mixing blue and yellow together will never make green.

Colors are represented with an RGB value (usually from 0-255 as each component only occupies a single byte, but I'll be representing them here from 0-1 for simplicity).

When blending with other colors, these RGB values are interpolated according to the alphas of the respective colors (how opaque they are). A larger alpha value means a larger weighting towards that given color.

Blue's RBG value is (0, 0, 1)

Yellow's RBG value is (1, 1, 0)

Therefore when first blending with the white background, the yellow will end up:

(1, 1, 0) * 0.5 + (1, 1, 1) * 0.5 = (0.5, 0.5, 0) + (0.5, 0.5, 0.5) = (1, 1, 0.5)

Now when blue gets blended with the white background, you'll get:

(0, 0, 1) * 0.5 + (1, 1, 1) * 0.5 = (0, 0, 0.5) + (0.5, 0.5, 0.5) = (0.5, 0.5, 1)

Finally, the resulting color that you get when blending them together depends which one you draw first. If you draw the blue first (like you've done), you'll get the blended blue with the un-blended yellow together:

(0.5, 0.5, 1) * 0.5 + (1, 1, 0) * 0.5 = (0.25, 0.25, 0.5) + (0.5, 0.5, 0) = (0.75, 0.75, 0.5)

Ew.

---

I think the best way to approximate to green is to try and aim for light green

You can achieve this by mixing cyan (0, 1, 1) and yellow (1, 1, 0) together with alphas of 0.5.

That way you'll end up with (0.75, 1, 0.5) if you add the cyan before the yellow:

And (0.5, 1, 0.75) if you mix the yellow before the cyan:

However you'll never be able to end up with a color of (0, 1, 0) simply by mixing two colors together (unless those colors are (0, 1, 0) to begin with).

---

If you look at the computer color gamut:

Imagine picking your two colors on it, and drawing a straight line between them.

This line represents the different colors you can achieve by additively blending these two colors together at varying alphas.

This shows how no two colors could have green along this line, besides green & green. This is also true for red and blue, as they are the extremes of the color gamut.

---

However, you may be able to achieve your desired result by using a different blend-mode to the normal additive one. You can do this easily in Core Graphics using CGContextSetBlendMode(). Have a look at the Core Graphics blend-mode docs.