language agnostic - Determine RGBA colour received by combining two colours

Question

I have two colours defined as RGBA (in my specific examples, one of the set is [white with alpha 0.85] and [57, 40, 28 with alpha 0.25]. The second colour is drawn over the first one (i.e. white with alpha is the background and the second colour is used for drawing). How can I figure out what the RGBA colour of the combination is going to be? I need to do this one-off - so any tools is fine (e.g. I'm happy to draw something in photoshop and see what comes out).

I have several sets to combine, but not too many. Any pointers? Thanks.

Answer 1

When using Painter's algorithm most color compositing is done using Porter-Duff "Over" mode:

Resulting alpha:

αr = αa + αb (1 - αa)

Resulting color components:

Cr = (Ca αa + Cb αb (1 - αa)) / αr

So for your example:

alpha = 0.25 + 0.85 * (1 - 0.25)                        = 0.8875

red   = (57 * 0.25 + 255 * 0.85 * (1 - 0.25)) / 0.8875  = 199.2
green = (40 * 0.25 + 255 * 0.85 * (1 - 0.25)) / 0.8875  = 194.4
blue  = (28 * 0.25 + 255 * 0.85 * (1 - 0.25)) / 0.8875  = 191.1

See wikipedia article on alpha compositing.