11

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.

Charles
  • 50,943
  • 13
  • 104
  • 142
Aleks G
  • 56,435
  • 29
  • 168
  • 265

1 Answers1

22

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.

Nikolai Ruhe
  • 81,520
  • 17
  • 180
  • 200
  • Great, thanks! Except you seem to have swapped the colours around. If I follow that article, I need to replace the two colours around in your answer. – Aleks G May 28 '12 at 09:35
  • Oops, I didn't read the question thoroughly and put white in the foreground. But you're right: Ca is foreground, Cb is background. – Nikolai Ruhe May 28 '12 at 09:42
  • I'm confused by the notation that is used here. Are `a` and `α` the same variable, or are they different variables? – Anderson Green Jun 02 '13 at 14:50
  • @AndersonGreen `αa`, `αb` and `αr` are three variables. They designate the first source's (a), second source's (b) and result's (r) alpha components. – Nikolai Ruhe Jun 03 '13 at 07:36
  • @NikolaiRuhe What do `Cr`, `Ca` and `Cb` represent, then? – Anderson Green Jun 28 '13 at 18:59
  • @AndersonGreen They stand for all three color components, again r for result, a and b for the sources. – Nikolai Ruhe Jun 28 '13 at 19:39