: Why don't low-opacity colours blend the way I expect? As an experiment, I made three fill layers in Photoshop: one red (#ff0000), one green (#00ff00) and one blue (#0000ff). I set each layer

@Karen819

Contrary to the comments above, alpha blending does not use a subtractive colour system. You can observe that it is not a subtractive scheme by overlaying lots of translucent layers - were it subtractive, it would turn black.

The usual way alpha blending works is in the "over" mode, which is like painting over the previous layers. This works essentially by taking an average of the colour of a layer and the blended colour of layer below. This kind of blending mimics painting with a semitransparent paint on top of another image. It's probably best to use your example:

We begin, for the sake of demonstration, with white

Red Green Blue Alpha
Background 1 1 1 1


and we add a red layer with 33% opacity

Red Green Blue Alpha
Background 1 1 1 1
Red Layer 1 0 0 1/3


the red colour is then blended with the previous layer in a ratio of 1:2 (i.e. 33%)

Red Green Blue
Background Part 2/3 2/3 2/3
Red Layer Part 1/3 0 0
Total 1 2/3 2/3


In this example, where the background has an alpha of 1, it stays at 1 no matter what.

This first layer is actually something like what you'd get if you physically mixed two paints. But when there is more than one overlay, the order matters, and it is not like mixing paints. This becomes apparent when we add the green layer

Red Green Blue Alpha
Background 1 1 1 1
+ Red Layer 1 0 0 1/3
= After Red Layer 1 2/3 2/3 1
+ Green Layer 0 1/3 0 1/3


We do the same, 2/3 of the layer below, and 1/3 of the new layer

Red Green Blue
After-Red-Layer Part 2/3 4/9 4/9
Green Layer Part 0 1/3 0
Total 6/9 7/9 4/9


Already you can see that the alpha values you've used don't match the proportions of the resulting colours. It's slightly more green than red, even though the red and green layer have the same opacity. If the layers were in the other order, then it would be slightly more red than green.

So far we have

Red Green Blue Alpha
Background 1 1 1 1
+ Red Layer 1 0 0 1/3
= After Red Layer 1 2/3 2/3 1
+ Green Layer 0 1/3 0 1/3
= After Green Layer 2/3 7/9 4/9 1


and the last calculation for the blue layer is

Red Green Blue
After-Green Layer Part 4/9 14/27 8/27
Blue Layer Part 0 0 1/3
Total 4/9 14/27 17/27
------------------------------------------------
Total times 27: 12 14 17
Total times 256 = RGB: 113 132 161 (hex:7184a1ff)
(rounded down)


which is this colour:



The way the alpha changes is in the wikipedia article, and is a little more complicated. When the background has an alpha of 1 we don't need to worry about it.

(Mathematically, this scheme has a really nice property where the blended colour is determined by the layers colour and the blended colour made by the previous layers - you don't need to know the colours of all the individual layers below, just the colour these layers make. This is unlike what would happen in physical mixing of the colours, which is more difficult to calculate as the effect adding an extra colour layer requires knowing the colour and 'amounts' of every layer below)

Vote Up Vote Down