Calculate the resulting RGB from two colors, one of them is transparent

I am looking for a formula to convert them.

I know that to transform overall transparency it

alpha * new + (1 - alpha) * old

I have:

Color A : RGB( 85, 113, 135 ) Color B : RGB( 43, 169, 225 ) 

Color A has an opacity of 90% and fits on top of color B, resulting in

 Color C : RGB( 65, 119, 145 ) 

My question is: how to get Color C? If I replace Color B with another, how do I get Color C?

Here is another example, the same base color:

 Color A : RGB( 85, 113, 135 ) Color B : RGB( 45, 67, 82 ) -------- Color C : RGB( 65, 109, 131 ) 

These are working examples made with images. I am trying to calculate the remaining color C to assign a background color.


UPDATE, see accepted answer. red in the above examples is strange - the accepted answer has the correct formula for all colors, I tested it in Photoshop.

+6
math css transparency alpha-transparency
source share
1 answer

It looks like your formula is exactly the formula used in your examples, calculated for each component and rounded.

R_c: = ceiling (R_a * alpha) + ceiling (R_b * (1 - alpha))

 G_c := ceiling(G_a * alpha) + ceiling (G_b * (1 - alpha)) B_c := ceiling(B_a * alpha) + ceiling (B_b * (1 - alpha)) 

It is strange, however, that the component R does not comply with the rules. I tend to wonder why.

+5
source share

All Articles