How alpha blending works with a transparent background in photoshop

1
votes

I have two squares: red with color (255, 0, 0) 50% opacity, blue with color (0, 0, 255) 50% opacity and black opaque background. At the intersection of these colors, Photoshop shows the color (128, 0, 64) ( photoshp screenshot ).

And I agree whith that. Blue color first blends with black background:

(0, 0, 255) * 0.5 + (0, 0, 0) * ( 1 - 0.5) = (0, 0, 127.5) alpha = 0.5 + 1 * (1 - 0.5) = 1

Then the result is mixed with red:

(255, 0, 0) * 0.5 + (0, 0, 127.5) * (1 - 0.5) = (127.5, 0, 63.75) alpha = 0.5 + 1 * (1 - 0.5) = 1

But if background is transparent photoshop gives color (170, 0, 85) with 75% opacity ( photoshp screenshot ).

How does it get that color? I expected (127.5, 0, 127.5) with 75% opacity, because there is nothing in background to blend with.

1
graphicsglslphotoshop

1 Answers

1
votes

Following the math described in this article, alpha blending blue square with 50% opacity onto the black background with 0% opacity results in this:

alpha_bg = 0
alpha_fg = 0.5
alpha_blended = alpha_fg + alpha_bg * (1 - alpha_fg) = 0.5
color_blended = ({0, 0, 255} * alpha_fg + {0, 0, 0} * (alpha_bg * (1 - alpha_fg))) / alpha_blended =
    ({0, 0, 255} * 0.5 + {0, 0, 0} * 0) / 0.5 = {0, 0, 255}

Then, repeating these calculations for blending the red square with 50% opacity on top of the color we calculated above:

alpha_bg = 0.5
alpha_fg = 0.5
alpha_blended = alpha_fg + alpha_bg * (1 - alpha_fg) = 0.5 + 0.5 * (1 - 0.5) = 0.75
color_blended = ({255, 0, 0} * alpha_fg + {0, 0, 255} * (alpha_bg * (1 - alpha_fg))) / alpha_blended =
    ({255, 0, 0} * 0.5 + {0, 0, 255} * (0.5 * (1 - 0.5))) / 0.75 = {170, 0, 85}