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

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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]