1

Trying to make a function that takes two RGBa values and results in a third. The first value will be of opacity: 1 eg: color: rbga((0,0,0,1);and the second will be any opacity (set by the user). The goal then is to mix the two colors, as if you had COLOR A and then someone took a paint tool and went over it with a semi-transparent COLOR B.

Here is the effect I would like to create. 

not code, just some values: 

(0,0,0,1) & (255,255,255,0.5)  = (128,128,128,1)

(255,0,0,1) & (255,255,255,0.5) = (225,128,128,1)

(0,255,255,1) & (255,255,255,0.5) = (128,255,128,1)

(0,0,255,1) & (255,255,255,0.5) = (128,128,255,1)

(81,188,187,1) & (252,0,255,0.5) = (167,94,221,1)

(81,188,187,1) & (102,192,110,0.5) = (92,190,148,1)

(81,188,187,1) & (255,228,0,0.5) = (168,208,93,1)

Here it is visually: (thought not the exact same example as the data above)

Diagram of the hell I am talking about

Here with values:

example

I will eventually be using javascript to create the function, but really what I need to figure out is the relationship between color 1 and color 2 in a way that I can put in code. I am just not good enough at math to figure this one out. So, here I am.

Thanks in advance!

  • How did you get those values? If I do (81,188,187,1) & (102,192,110,.33) I get (8**7**,189,16**1**,1) and not (88,189,162,1). Or for the second one I get (1**2**8,201,125,1) instead of (138,201,125,1). – Alvaro Montoro Oct 11 '14 at 18:45
  • well the first one looks like a rounding thing. And the 2nd looks like I messed up retyping it. Sorry about that. I got them by doing the action in photoshop (as seen in the picture) and then reading the values with the photoshop eyedropper tool. –  Oct 11 '14 at 19:22

1 Answers1

8

It's simple compositing :)

C = Ca*Aa*(1-Ab) + Cb*Ab

Where Ca is the component (Red, Green or Blue in turn) of Colour A, Cb is the component of Colour B, and Aa and Ab are the alpha values of A and B respectively (in this case, Aa will be 1).

So for (81,188,87,1) and (239,133,11,0.75), you get

81*1*(1-0.75) + 239*0.75 = 199.5
188*1*(1-0.75) + 133*0.75 = 146.75
87*1*(1-0.75) + 11*0.75 = 30

Resulting in (199,146,30,1)

(Alpha is calculated with A = Aa*(1-Ab) + Ab, but that will always be 1 if either alpha value is 1, which it is in your case)

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592