user90598
user90598

Reputation:

How to calculate an RGB colour by specifying an alpha blending amount?

I'm writing a colour picker that gets the pixel RGB values from wherever you point to on the screen. I want to also have the option of specifying that the colour I picked already has an alpha value. I'm just wondering how I can calculate the resulting colour.

For example:

The resulting pixel colour is 240,247,249 but I know that the original colour had a 10% opacity and was on top of a white (255,255,255) background. What's the calculation to work out the original RGB values?

Upvotes: 71

Views: 65665

Answers (3)

Daniel Peñalba
Daniel Peñalba

Reputation: 31847

The following pseudo-code resolves your problem:

    CalculateSolidColorFromTransparentColor(Color color, Color background)
    {
        alpha = color.A / 255;
        oneminusalpha = 1 - alpha;

        newR = ((color.R * alpha) + (oneminusalpha * background.R));
        newG = ((color.G * alpha) + (oneminusalpha * background.G));
        newB = ((color.B * alpha) + (oneminusalpha * background.B));
    }

Note that input color and backgroud has values expressed in [0..255]

Upvotes: 10

Peter Perháč
Peter Perháč

Reputation: 20782

I'm just wondering how come you know its alpha and not its r,g,b... Unless the blending mode used is in every case Normal, you won't be able to calculate the original value. And even if all is ideal, you will only be able to approximate, as some rounding has probably taken place already when going from original to result. Also, you will most likely have to round when going back from result to original.

If the blending mode is Normal, then it's not too difficult :-)

opacity*original + (1-opacity)*background = resulting pixel

original R = (resulting R - ((1-opacity)*background R)) / opacity.
original G = (resulting G - ((1-opacity)*background G)) / opacity.
original B = (resulting B - ((1-opacity)*background B)) / opacity.

in which opacity is (alpha/100).

Upvotes: 40

unwind
unwind

Reputation: 399703

The standard blending equation is:

out = alpha * new + (1 - alpha) * old

Where out, new and old are RGB colors, and alpha is a floating point number in the range [0,1].

So, you have (for red):

240 = 0.1 * newR + 0.9 * 255

Solving for newR, we get:

newR = (240 - 0.9 * 255) / 0.1

which evaluates to 105. Repeat for the other components, and you're done.

Upvotes: 111

Related Questions