How can I mix two ARGB pixels ?
Example
Here A is (Red with Alpha) and B is ( Blue with Alpha ).
The RGB values of the pixels to be blended are added together using a percentage of the color of each pixel. If even blending is desired then 50% of each RGB value of the source pixels is added to 50% of each RGB value of the target pixels to make the color of the blended pixel.
To start mixing in RGB, think of each channel as a bucket of red, green, or blue paint. With 8 bits per channel, you have 256 levels of granularity for how much of that color you want to mix in; 255 is the whole bucket, 192 = three quarters, 128 = half bucket, 64 = quarter bucket, and so on.
In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency.
Taken from the same Wikipedia article where you got the image:
Translating to values which range from 0 to 255:
rOut = (rA * aA / 255) + (rB * aB * (255 - aA) / (255*255))
gOut = (gA * aA / 255) + (gB * aB * (255 - aA) / (255*255))
bOut = (bA * aA / 255) + (bB * aB * (255 - aA) / (255*255))
aOut = aA + (aB * (255 - aA) / 255)
The above is the wrong algorithm. This can be verified by substituting aA = 0. Then it turns out that if you are trying to blend color B with completely transparent color A, i.e. invisible, then logically the color B remains unchanged, but according to this formula it will be changed. The result of incorrect blending with gradient transparency. Therefore, the correct solution would be like this:
aOut = aA + (aB * (255 - aA) / 255)
rOut = (rA * aA + rB * aB * (255 - aA) / 255)/aOut
gOut = (gA * aA + gB * aB * (255 - aA) / 255)/aOut
bOut = (bA * aA + bB * aB * (255 - aA) / 255)/aOut
The result of correct blending with gradient transparency.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With