Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate resulting RGB from 2 colors, one is transparent

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.

like image 966
Kerry Jones Avatar asked Aug 17 '10 19:08

Kerry Jones


People also ask

What is RGB for transparent color?

RGBA Colors An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Can RGB value represent transparency?

rgb() The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.

How do you find opacity of a color?

Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.

How is opacity calculated?

The opacity of a coating is a measure of light that is incident on the coating divided by the amount of light that is transmitted.


1 Answers

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.

like image 61
kbrimington Avatar answered Nov 15 '22 23:11

kbrimington