Affinity Suite: Alpha transparency calculation

[Pyanepsion]

Hello everyone,

When we work in the Affinity suite and create an image with a single layer, alpha transparency modifies the perception of RGB colours in the software. But how do you calculate the equivalent colour without transparency? This is an important question, because not all software handles transparency in the same way, which can lead to differences in colour rendition.

Let's take a concrete example:

Suppose we have an image consisting solely of a rectangle with RGB colour (117, 120, 123) and alpha transparency of 70%. How can we determine the resulting colour if this transparency was not applied, in other words, the ‘flattened’ colour with no alpha transparency effect?

Happy creating!

[thomaso]

A simple method: Place a white object behind the transparent object for colour measuring.

[walt.farrell]

I would try:

1. Add a white Fill layer, or a white Rectangle, under your existing rectangle. Sample the resulting color of the top Rectangle.
   or
2. In Document Setup (Designer, Publisher) or the Document menu (Photo), turn off Transparent Background. Sample the resulting color of the top Rectangle.

[thomaso]

6 minutes ago, walt.farrell said:

turn off Transparent Background. Sample the resulting color

Oh, it's that easy! Thanks!

[walt.farrell]

You're welcome, thomaso.

[David in Яuislip]

Calculate per channel like this, Opacity =0..1 
Rnew=255-Opacity*(255-R)
255-0.7(255-117) = 158

[lacerto]

Obsolete.

[NotMyFault]

47 minutes ago, lacerto said:

---and more generally, not assuming white as the bottom layer, for each channel: 

A*(UPPER-LOWER)+LOWER

...proceeding in z-order from the bottom to the top (flattening two layers at a time). For absolute transparency flattening, the bottom layer is always white (and if there is no color, the flattened channel value is a tint).

Perhaps someone more mathematically oriented forum member can put the formula in more elegant form. 

the formula is only valid for gamma=1, which is used for RGB/32.

All other formats normally use gamma 2.2.

For layers, the gamma value can be changed in layer blend ranges - normally nobody does this.

Test layers use gamma=1.45 by default, so layer blending can differ for text and other layers (visible when layer opacity is not 100%. For a test, use a text layer and rectangle, both 50% opacity, each covering a different part, but touching at the edges. blend color will differ.)

 

for more details seee

https://en.wikipedia.org/wiki/Alpha_compositing

 

[NotMyFault]

4 hours ago, Pyanepsion said:

Hello everyone,

When we work in the Affinity suite and create an image with a single layer, alpha transparency modifies the perception of RGB colours in the software. But how do you calculate the equivalent colour without transparency? This is an important question, because not all software handles transparency in the same way, which can lead to differences in colour rendition.

Let's take a concrete example:

Suppose we have an image consisting solely of a rectangle with RGB colour (117, 120, 123) and alpha transparency of 70%. How can we determine the resulting colour if this transparency was not applied, in other words, the ‘flattened’ colour with no alpha transparency effect?

Happy creating!

The questions is not fully defined.

When you take this literally, the color within the layer is independent from the alpha channel, and stays constant RGB colour (117, 120, 123).

The "resulting" color depends on what is below the "single" layer - but when you only one layer, there is nothing below.

Affinity allows 2 options for an "inherent" Background:

• white background: this is kind of cheating, as you have a virtual second layer in the file, conflicting with the setting of "one single layer". If you ignore, you get the layer blending of a white background with your top layer. depending on the gamma value of the top layer, default 2.2. If you play with the gamma value of the layer, the result will change strongly.
• transparent background: then there is no "resulting", as the layer color is what you set, and alpha is irrelevant.

 

 

[lacerto]

Obsolete.

[NotMyFault]

11 hours ago, lacerto said:

this is basically just how transparency flattening is done in pragmatic terms within 8-bit color mode [Normal blend mode].

Sorry to say, that is not correct. You must consider gamma, otherwise you will get wrong results.

the correct formula is

(Blend mode normal is called “over”):

PS: forgot to add the chapter about gamma correction which is a bit further down in the wiki

the important difference is the Greek letter gamma use as exponent

If you use color picker, you will see the same values in Photo, maybe off by 1 due to rounding.

[NotMyFault]

 

The test file shows the impact of gamma. Both the text and the upper rectangle share the same global color 117/120/123, and use 70% opacity.

no matter if you use white or black background, the blendung results differs due to gamma 1.45 for text and 2.2 for all other layer types.

you cannot ignore gamma for semi-transparent layers, in RGB/8.

alpha blending.afphoto

[lacerto]

Obsolete.

[NotMyFault]

5 minutes ago, lacerto said:

I think that OP and I were talking about transparency flattening, and if you try, you can see that the simplistic formula that I gave gives correct results both in 8-bit RGB and CMYK color modes within normal blend mode. For other blend modes, calculations are more complex, but for the question OP asked, the answer I gave should give an easily verifiable idea.

Again, no. The OP talked about 70% opacity, and there the simplistic formula gives wrong results. It only gives correct for 100% opacity.

i provided all evidence i could, the wikipedia article, a test file where you can reproduce, screenshots, … and step out for good.

[lacerto]

Obsolete.

[lacerto]

Obsolete.

[lacerto]

Obsolete.

[Pyanepsion]

My aim is to obtain a precise calculated result. The colour differences are not very distinct from the grey I used previously, so I'm changing to a blue-green to illustrate the calculation more clearly.

According to Wikipedia, the formula for obtaining the resulting colour from two objects a and b is as follows:

Cr = ((Ca αa + Cb αb (1- αa))/(αa + αb (1 - αa))

In our case:

α = 70 %
Initial colour: (R 66, G 152, B 181)
Background colour (White): (R 255, G 255, B 255)

According to this formula, we should obtain:

Resulting colour: (R 88, G 189, B 189)

However, we can see that the result obtained is different from this expected value.

 

 

 

transparency.xlsx transparency.afdesign

Edited August 21 by Pyanepsion
Error on files.

[lacerto]

Obsolete.

[NotMyFault]

1 hour ago, Pyanepsion said:

My aim is to obtain a precise calculated result. The colour differences are not very distinct from the grey I used previously, so I'm changing to a blue-green to illustrate the calculation more clearly.

According to Wikipedia, the formula for obtaining the resulting colour from two objects a and b is as follows:

Cr = ((Ca αa + Cb αb (1- αa))/(αa + αb (1 - αa))

In our case:

α = 70 %
Initial colour: (R 66, G 152, B 181)
Background colour (White): (R 255, G 255, B 255)

According to this formula, we should obtain:

Resulting colour: (R 88, G 189, B 189)

However, we can see that the result obtained is different from this expected value.

 

 

 

transparency.xlsx 10.19 kB · 0 downloads transparency.afdesign

You need to add the gamma conversion. I edited my older post. The correct formulas are

[NotMyFault]

Actually, Wikipedia might be slightly off wrt gamma.

some software uses a linear section for values near 0. I assume most apps ignore this detail, as the difference is probably barely noticeable or even get truncated due to rounding in RBG/8.

https://en.wikipedia.org/wiki/Gamma_correction
 

The sRGB color space standard used with most cameras, PCs, and printers does not use a simple power-law nonlinearity as above, but has a decoding gamma value near 2.2 over much of its range, as shown in the plot to the right/above. Below a compressed value of 0.04045 or a linear intensity of 0.00313, the curve is linear (encoded value proportional to intensity), so γ = 1. The dashed black curve behind the red curve is a standard γ = 2.2power-law curve, for comparison.

[NotMyFault]

2 hours ago, lacerto said:

where I now disabled it so that regular (consistent) transparency flattening is now applied for text in all Adobe apps, at least.

You can do that, but there are good reasons why text uses 1.45 gamma by default.

Text rendering of small fonts gets ugly and unreadable when rasterized.

i just found a blog explaining the importance of gamma excellently:

https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/

 

[lacerto]

Obsolete.

[lacerto]

Obsolete.

[Pyanepsion]

6 hours ago, NotMyFault said:

You need to add the gamma conversion. I edited my older post. The correct formulas are

I don't quite understand the explanations, or at least I can't get the result I was hoping for: to get the same look with 70% blue-green and another 100% colour obtained by calculation. Could you correct this formula?

(See previous Excel and Affinity Designer files).

Cr = ((Ca αa + Cb αb (1- αa))/(αa + αb (1 - αa))