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

math colors alphablending
user90598 picture user90598 · Apr 14, 2009 · Viewed 51.4k times · Source

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

unwind picture unwind · Apr 14, 2009

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.

Related questions

Mixing two colors "naturally" in javascript

The problem: I want to mix two colors in javascript, and get the result color. There are a lot of similar question on SO, however I doesn't find anything that actually works correctly. I know that mixing two different colored …

Read More
What is the math behind the Colour Wheel

I want to create a pie with 12 slices, with each slice a different colour. Pretty much every colour wheel seems to follow the same format; eg: http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm . But what algorithms are there for …

Read More
Mixing two RGB color vectors to get resultant

I am trying to mix two source RGB vectors to create a third "resultant vector" that is an intuitive mix of the first two. Ideally, I would be able to emulate "real paint mixing characteristics", but for simplicity, I am …

Read More