How To Calculate Rbg After Applying Alpha On White Background

Question

I wrote a tool for this: https://github.com/igrmk/blec. For your specific case y'all may employ it this fashion

          blec white deadbeef

Last ef is the hex representation of an blastoff channel. Or y'all may use it like this

          blec white deadbe:0.75

Specifying the opacity as a decimal fraction.

Please notation that the suggested formula Y = 255 - P * (255 - X) is not quite accurate due to a gamma correction. More authentic one would exist Y = (255^Yard * (one - P) + X^G * P) ^ (i / G) where Y — resulting RGB component value, X — overlay RGB component value, P — its opacity, Thousand — a value of a gamma. About common value of a gamma is two.2. The reason to include a gamma correction into the formula is to move components into linear space on calculating. Almost every RGB space that is used today interprets color components in a non-linear manner in club to place more color information in 8 bits. Historically it was introduced to compensate a non-linearity of CRT displays.

Here is an example why a gamma correction is important for the blending. Allow's accept this cherry-red image

red

and this bluish paradigm

blue

Permit's take beginning ane fully opaque and set an opacity of the second image equal to ten-axis like this

blue-on-white

Now allow's blend them without a gamma correction (gamma = 1)

gamma=1

Let'south enable a gamma correction and practise the same (gamma = 2.two)

gamma=2.2

As you tin can see there is much more localized transition if we don't use a gamma correction. There are clearly darker colors in the center. If nosotros use a gamma correction so the transition and the lightness become much more shine.

Concluding slope is built using a dithering.

dither

The paradigm contains pixels of but two colors but a probability of blueish linearly increases from 0 in the left to 1 in the correct. The result looks much closer to epitome with gamma = 2.2 in terms of lightness and transition colors. Try to expect at information technology from a distance. And this is what y'all probably expect from blending two colors. We literally blend them past mixing like aquarelle in this case. So gamma is very important affair for blending especially when opacity is close to 0.five.

Let's finally compare the blending of opaque red and blue with alpha of 0.v where the effect of a gamma correction is maximum.

gamma=1 gamma=2.2 dithering

Beginning prototype does not employ a gamma correction, the 2d i uses a gamma of 2.2, and the third one uses a dithering. Every bit you tin see the first 1 is very dissimilar to other 2 (If you don't run across it, read the notes below). So I advise to always use a gamma correction. If y'all employ whatever decent image editor then most probably you are safe and a gamma correction is enabled past default.

Annotation 1: To compare a dithering to a blending you demand to look at images at 100% calibration then that every single pixel of the image occupies exactly one pixel of a screen. This is nigh never the case if you apply a mobile phone or a retina display. If you look at images at unlike scale probably you expect at antialiased image. The antialiasing tin can lead to very inaccurate results because it doesn't use a gamma correction at the moment. I tin confirm it for Chrome 83 on Android 10 and for the latest Safari on iOS thirteen. I guess information technology needs likewise much resources to practise information technology right way. So it effectively decreases a gamma of a display to nearly 1.8 when you look at very dissimilarity noisy images.

Note 2: Not every brandish is calibrated well. If you lot feel like an image with gamma of 2.two and an image with a dithering produce different colors I have a bad news for you. You can check a gamma of yous monitor hither http://web.mit.edu/jmorzins/www/gamma/adilger/gamma.html. However if you lot use a mobile device it is meliorate to use an awarding because an antialiasing can lead to very inaccurate results.

Here is a code to get these pictures https://pastebin.com/fHYtWrMb.