CODEWITHSUNDEEP
cssopacityrgbamixing
user1288838
user1288838

Reputation:

rgba color mixing css

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!

Upvotes: 1

Views: 4625

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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)

Upvotes: 8

Related Questions