How to combine two colors with varying alpha values

Question

I have two colors, c₀ and c₁. They have variable alpha, red, green and blue values: (a₀, r₀, b₀, g₀) and (a₁, r₁, b₁, g₁). I'm wondering if there is a simple formula for combining these colors to obtain the correct new color (c₂).

Let's say that c₀ overlays c₁. I understand that if they had equal alpha values, then averaging their comparative red, green and blue values would do the trick. But when the alpha values differ, I'm noticing this doesn't work properly—it seems alpha determines the level at which each color's RGB values "contribute" to the final color.

Otherwise stated,

If a₀=a₁ then:
    a₂=a₀=a₁,
    r₂=(r₀+r₁)/2,
    g₂=(g₀+g₁)/2,
    b₂=(b₀+b₁)/2
Else:
    a₂=(a₀+a₁)/2,
    r₂=?,
    g₂=?,
    b₂=?

Answer 1

Short answer:

if we want to overlay c₀ over c₁ both with some alpha then

a₀₁ = (1 - a₀)·a₁ + a₀

r₀₁ = ((1 - a₀)·a₁·r₁ + a₀·r₀) / a₀₁

g₀₁ = ((1 - a₀)·a₁·g₁ + a₀·g₀) / a₀₁

b₀₁ = ((1 - a₀)·a₁·b₁ + a₀·b₀) / a₀₁

Note that division by a₀₁ in the formulas for the components of color. It's important.

Long answer:

The basic formula for the color when c₀ overlays opaque c₁ with alpha a₀ is

r_{0 over 1} = (1 - a₀)·r₁ + a₀·r₀

// the same for g & b components

So if there is another color c₂ and c₁ actually is not opaque but has an alpha a₁ we can overlay first c₁ over c₂ and then c₀ over the resulting color.

r_{1 over 2} = (1 - a₁)·r₂ + a₁·r₁

r_{0 over (1 over 2)} = (1 - a₀)·((1 - a₁)·r₂ + a₁·r₁) + a₀·r₀

If we had a color c₀₁ which overlays c₂ with the same result as overlaying first c₁ and then c₀ it would be like this:

r_{01 over 2} = (1 - a₀₁)·r₂ + a₀₁·r₀₁

Ok, let's make them equal:

(1 - a₀₁)·r₂ + a₀₁·r₀₁ = (1 - a₀)·((1 - a₁)·r₂ + a₁·r₁) + a₀·r₀ = (1 - a₀)·(1 - a₁)·r₂ + (1 - a₀)·a₁·r₁ + a₀·r₀

so

1 - a₀₁ = (1 - a₀)·(1 - a₁) = 1 - ((1 - a₀)·a₁ + a₀)

a₀₁·r₀₁ = (1 - a₀)·a₁·r₁ + a₀·r₀