CODEWITHSUNDEEP
objective-cuiviewcalayeruicolorcgcolor
Vulkan
Vulkan

Reputation: 1074

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

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

enter image description here

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.

Upvotes: 0

Views: 146

Answers (1)

Hamish
Hamish

Reputation: 80811

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) blue

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

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)

light yellow

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)

light blue

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)

sludge

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:

light green

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

enter image description here

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:

enter image description here

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.

Upvotes: 3

Related Questions