Calculate resulting RGB from 2 colors, one is transparent
Asked Answered
F

1

9

I'm looking for a formula to convert them.

I know to convert a general transparency it is

alpha * new + ( 1 - alpha ) * old

I have:

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

Color A has 90% opacity and is laid on top of Color B, resulting in

Color C : RGB( 65, 119, 145 )

My question is, how does it get Color C? If I substitute Color B for another thing, how do I get Color C?

Here's another example, same base color:

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

Those are working examples done with images -- I'm trying to now calculate the remaining Color C so I can assign a background color.


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

Ferrer answered 17/8, 2010 at 19:21 Comment(3)
Where are you getting your examples from? What program created them? Does it use any sort of color correction?Hugely
examples are from a web page that I'm working on, photoshop has created the images, but they're being implemented on the web.Ferrer
@ Andreas -- can you point it out please? I can upload images if that would helpFerrer
B
8

It appears that your formula is precisely the formula used in your examples, calculated per component, and rounded up.

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))

Strange, though, the R component doesn't appear to follow the rules. I'm inclined to wonder why.

Beitz answered 17/8, 2010 at 19:29 Comment(3)
ceiling(85 * 0.9) = 77 (R-a * alpha) that's higher than 65, am I mising something?Ferrer
@Kerry: I'm not sure. I wrote a small program to test the equation and observed that in your test case, the green and blue values adhered to the formula, but R did not.Beitz
Your solution is correct -- I checked it in Photoshop, and it is working fine. It has to do with Firefox somehow.Ferrer

© 2022 - 2024 — McMap. All rights reserved.