Search code examples
language-agnosticcolorsrgba

Determine RGBA colour received by combining two colours


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.


Solution

  • 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.