Real-time transparency has become so commonplace in modern games and PC applications that it’s almost taken for granted.  However, the specific formula that performs this now-ubiquitous effect is worth understanding.

Transparency is simply a weighted average between the color values of two pixels.  As an example, consider the following two colors:

Pure red, or RGB(255, 0, 0)

Pure blue, or RGB(0, 0, 255)

At 50% transparency – or a pure blending between these two colors – we would simply add the individual color amounts together and divide by two.  This gives us a new color -

Purple, or RGB(127, 0, 127)

Not entirely surprising, eh?

The effect is certainly more impressive when applied pixel-by-pixel across an entire image, as the downloadable project demonstrates.