Jump to content

Recommended Posts

Hi,

I'm struggling to understand the blend mode "saturation". I didn't find any Affinity specific definition about this blend mode, so falling back to Wikipedia https://en.wikipedia.org/wiki/Blend_modes#Hue,_saturation_and_luminosity, but the article leaves some room for (mis-)interpretations as it mixes the terms Saturation, Chroma, HSV and HSL without proper clarity.

What i assume: When applying a layer with blend mode "saturation", the result will use the luminosity and hue of the bottom layer, but the saturation of the top layer (excluding edge cases like white/black/grey):

  • Using the HSL templates from https://en.wikipedia.org/wiki/Template:Hsl-swatches
  • and adding an gradient rectangle with S from 0 to 100%.
  • set blend mode to "saturation".
  • Then either use the info panel (with mode set to HSL), or my secret sauce procedural texture filter to inspect the result.
  • Unfortunately, the resulting hue strongly depends on the color of the bottom layer

Please look at the info panel with 5 samplers applied to the blue (hue 240°)

Layer not applied:

S: 100 / 75 / 50 / 25 / 0

image.thumb.png.06e6a7fb68d625b89839c79e2a536873.png

 

Layer applied:

S: 72 / 52 / 41 / 40 / 0

image.thumb.png.e3048b585d28e32ead3938f7a8522ef3.png

The layer has a sat of 36% at the line.


image.thumb.png.604a2c151b78016132c9d3258f11291b.png

 

Now my questions:

  1. I would expect that the hue and luminosity stays untouched, and hue gets changed to 36%, for pixels at the ruler (L 1/2)
  2. I do not understand why the blend result differs from 36% saturation (except black / white where sat=0 is expected). Can someone explain? How is the blend mode defined in Affinity?
  3. The Info panel shows that the luminosity changes, too which is totally unexpected (based on Wikipedia's description).
  4. Is it possible to get a blend result using a chosen saturation value (similar to the Wikipedia template charts) with help of blend modes or adjustments / filters? Luminosity and hue should stay untouched.

Thank you for helping with your expertise.

Link to post
Share on other sites

Hmm the more i dig the more it looks like a bug in Affinity.

I'v used the test images (from the help section) of a known brand to compare what "other" apps deliver.

The results differ strongly to Affinity.

Is someone here in the forum with access to Photoshop, who can provide the output both of PS and Photo, using self-created test images?

 

Link to post
Share on other sites
4 hours ago, NotMyFault said:

The results differ strongly to Affinity.

In what way?

I followed the admittedly brief guide in the SLR Lounge article linked by @v_kyr

As I understand it, using Saturation Blend Mode, a fully saturated overlay of any hue whatsoever will boost the saturation of all hues in the underlying layer - the higher the saturation in the underlying layer, the higher the saturation of the resulting blend, no matter what the hue of the overlay. The SLR Lounge article uses a fully saturated rainbow layer to illustrate this.

I set up an AP document with an image overlaid with a rainbow-filled rectangle and a black-to white greyscale gradient-filled rectangle. Both the overlays have their blend mode set to Saturation. The rainbow colours were defined using HSL sliders to give full saturation, 50% lightness and a range of hues from Red to Violet. The greyscale layer is simply a black-to-white gradient.

19769442_Screenshot2021-05-04at08_34_56.png.b3558d4b045f0702207a9557d785f817.png

 

In my original RGB/8 jpg, straight out of the camera, a row of red tulips is highly saturated (because they're pretty much pure red) while the rest of the garden is of average saturation. The rainbow layer at 100% opacity boosts the saturation of the tulips while leaving the rest of the garden relatively unchanged.

Original:

500388444_Screenshot2021-05-04at08_07_31.png.b377653a8a2072222d379d9ef4098762.png

Rainbow layer applied:

1861800318_Screenshot2021-05-04at08_08_59.png.5a1eed75320031a959aaae488b8d4e54.png

(Sorry about the dark band, there's a glitch in the rainbow.)

Sampling with the info panel in HSL mode, the hues stay identical, there's a minor change in luminosity, the saturation is increased to 100% across the entire image.

Reducing the opacity of the overlay gradually reduces the saturation effect, again without affecting the hues. 

If I turn off the rainbow, activate the greyscale ramp with 100% opacity and reconvert to RGB/8, I get an almost completely desaturated image:

865598270_Screenshot2021-05-04at08_25_26.thumb.png.c4ae9bc018ac18f30b879319a2fb5dd2.png

I say "almost" because at the white end of the ramp, the Info panel shows around 1% saturation across the image.

Reducing the opacity of the greyscale layer increases the saturation of the overall image, until around 20% I get something that has balanced out the saturation and may be just about usable with further tweaking:

937578695_Screenshot2021-05-04at08_28_59.thumb.png.5a16c4e315cb4acf4a2fb4dc2a4fcdb8.png

Again, the hues of the original are unaffected, no matter what the greyscale value of the overlay. Only the saturation is modified, with tiny changes in luminosity.

As far as I can see, this is the same behaviour described for Photoshop in the SLR Lounge article. 

I don't really understand the information about chroma and luminance colour space in the Wikipedia article you referred to - my post just describes the effects I'm seeing.

(And it doesn't help that the Affinity Photo Help files give no description of what the Saturation Blend Modes is meant to do.)

EDIT: didn't mean to post this final image but I'll leave it here. It shows the effect if the colour format of the underlying image is changed to RGB/32 (HDR).

 

Screenshot 2021-05-04 at 08.24.14.png

Affinity Photo 1.9.3,  Affinity Designer 1.9.3, Affinity Publisher 1.9.3, Mac OSX 11.2, 2018 MacBook Pro 15"

Betas as they happen... 

Link to post
Share on other sites

-- Walt

Windows 10 Home, version 20H2 (19042.685),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop (2021-04-06):  32GB memory, Intel Core i7-10750H @ 2.60GHz
, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU
Affinity Photo 1.9.2.1035 and 1.9.4.1048 Beta   / Affinity Designer 1.9.2.1035 and 1.9.4.1048 Beta  / Affinity Publisher 1.9.2.1035 and 1.9.2.1024 Beta

Link to post
Share on other sites
3 minutes ago, walt.farrell said:

The followup link reference from the above one ...

Quote

... is dead, so that related posting is not of much help at all here! - BTW, sometimes it's a good idea to test followup links too then!

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
7 minutes ago, walt.farrell said:

additional reference material

Unfortunately the link from the first of these posts to the guide itself is dead. The second link (ultimately to @dmstraker's comprehensive PDF) is live and really helpful.

Affinity Photo 1.9.3,  Affinity Designer 1.9.3, Affinity Publisher 1.9.3, Mac OSX 11.2, 2018 MacBook Pro 15"

Betas as they happen... 

Link to post
Share on other sites
33 minutes ago, h_d said:

In what way?

Hi h-d,

i think i fully understand what is described about the saturation blend mode. My issue is that Affinity does not show the expected behavior:

  • In Affinity, i get strong Luminosity changes : down from 50 to 25, when applied to HSL 240/100/50 (bottom) using HSL 0/36/50(top).
  • You can inspect all HSL values in my screenshots, when looking at the info panel at tho top right

Original

image.thumb.png.ebe1527a43379cb186e797a20f5ffc8c.png

with blend:

image.thumb.png.957bf4a46027c529365f659f0dcb52af.png

blend layer:

image.thumb.png.c497d02f9134d0b15db510ba541b6f91.png

 

 

Link to post
Share on other sites

Hi all,

to be more specific about my issue:

according to all documentation (from other vendors), the blend mode "saturation" should not change hue or luminance.

But all my tests actually show that luminance drops e.g. from 50 to 25.

The actual questions is: bug or feature?

image.png.ad841b7849fc5a39fefd1a62d9afce6a.png

Link to post
Share on other sites
1 hour ago, NotMyFault said:

image.png.ad841b7849fc5a39fefd1a62d9afce6a.png

Where did you find that table?

-- Walt

Windows 10 Home, version 20H2 (19042.685),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop (2021-04-06):  32GB memory, Intel Core i7-10750H @ 2.60GHz
, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU
Affinity Photo 1.9.2.1035 and 1.9.4.1048 Beta   / Affinity Designer 1.9.2.1035 and 1.9.4.1048 Beta  / Affinity Publisher 1.9.2.1035 and 1.9.2.1024 Beta

Link to post
Share on other sites
2 hours ago, walt.farrell said:

Where did you find that table?

i have 2 interdependent sources which show the exact same formulas:

I'm now sure that Affinity delivers different results, either a bug or intentionally.

you can find 2 videos explaining my observations via the bug report:

 

Edited by NotMyFault
Added link to bug report.
Link to post
Share on other sites
11 hours ago, v_kyr said:

The followup link reference from the above one ...

... is dead, so that related posting is not of much help at all here! - BTW, sometimes it's a good idea to test followup links too then!

Sorry. Simon just posted this.

https://theeagerlearner.com/wp-content/uploads/2021/05/BlendModes01.pdf

-- Walt

Windows 10 Home, version 20H2 (19042.685),
   Desktop: 16GB memory, Intel Core i7-6700K @ 4.00GHz, GeForce GTX 970
   Laptop (2021-04-06):  32GB memory, Intel Core i7-10750H @ 2.60GHz
, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU
Affinity Photo 1.9.2.1035 and 1.9.4.1048 Beta   / Affinity Designer 1.9.2.1035 and 1.9.4.1048 Beta  / Affinity Publisher 1.9.2.1035 and 1.9.2.1024 Beta

Link to post
Share on other sites

Code-wise, I think this is how it works:

If you go to https://www.easyrgb.com/en/math.php and RGB->HSL, there's code to convert RGB from each pixel to HSL. Apply this to both the top (Blend) layer and the bottom (Base) layer. Then reconstitute RGB using the HSL->RGB code, using the S from the top Blend layer and H and L from the bottom Base layer.

The same principle applies to the Hue and Luminosity blend modes. For the Colour blend mode, the H and S are taken from the Blend layer and just the L from the Base layer.

Summary for colour blend modes:

            Hue = Hue(Blend) + Saturation(Base) + Luminance(Base)
 Saturation = Hue(Base) + Saturation(Blend) + Luminance(Base)
       Colour = Hue(Blend) + Saturation(Blend) + Luminance(Base)
Luminosity = Hue(Base) + Saturation(Base) + Luminance(Blend)

Aside: Related to the easyrgb.com code, I did a video on how Hue is calculated.

Dave Straker

Cameras: Sony A7R2, RX100V

Computers: Win10: Chillblast i9 Custom + Philips 40in 4K & Benq 23in; Surface Pro 4 i5; iPad Pro 11"

Favourite word: Aha. For me and for others.

Link to post
Share on other sites
4 minutes ago, dmstraker said:

Code-wise, I think this is how it works:

If you go to https://www.easyrgb.com/en/math.php and RGB->HSL, there's code to convert RGB from each pixel to HSL. Apply this to both the top (Blend) layer and the bottom (Base) layer. Then reconstitute RGB using the HSL->RGB code, using the S from the top Blend layer and H and L from the bottom Base layer.

The same principle applies to the Hue and Luminosity blend modes. For the Colour blend mode, the H and S are taken from the Blend layer and just the L from the Base layer.

Summary for colour blend modes:

            Hue = Hue(Blend) + Saturation(Base) + Luminance(Base)
 Saturation = Hue(Base) + Saturation(Blend) + Luminance(Base)
       Colour = Hue(Blend) + Saturation(Blend) + Luminance(Base)
Luminosity = Hue(Base) + Saturation(Base) + Luminance(Blend)

Aside: Related to the easyrgb.com code, I did a video on how Hue is calculated.

Hi Dave,

i saw your video when you published it, exiting work 👍👍

Actually, i already independently created some procedural texture filters which convert between HSL and RGB, and used them to check if affinity follows these formulas.

It doesn't.

 

to calculate Hue (left, as brightness) from RGB (right):

var mi=min(R,G,B);var ma=max(R,G,B);var dd=ma-mi;var i0=1-sign(ma-mi);var ir=1-sign(ma-R);var ig=1-sign(ma-G);var ib=1-sign(ma-B);var hh=(1-i0)*60*(ir*(G-B)/dd + ig*(2+(B-R)/dd) + ib*(4+(R-G)/dd));var h2=fmod(hh,360); var h3=fmod(h2,360)/360; h3+(1-sign(h2))/2

To calculate SAT:

var mi=min(R,G,B); var ma=max(R,G,B);var dd=ma-mi; var ll=(ma+mi)/2; dd/(1-abs(2*ll-1))

To LUM

rgbtoi (R,G,B)

(using Rec.709 weight factors)

or (R+G+B)/3 (equal weights)

Example image calculating hue from RGB

image.thumb.png.d3a884815cfd7cf27c582af195a135cb.png

Link to post
Share on other sites
On 5/4/2021 at 5:09 PM, NotMyFault said:

i have 2 interdependent sources which show the exact same formulas:

I'm now sure that Affinity delivers different results, either a bug or intentionally.

 

Affinity will be doing the same as Photoshop, which is explained quite well at https://en.wikipedia.org/wiki/Blend_modes#Hue,_saturation_and_luminosity

The article makes clear that Photoshop performs these blend modes in a Hue, Chroma, Luma colour space instead of Hue, Saturation, Lightness.

Another way of putting it is that the Saturation and Luminosity blend modes are misleadingly named in Photoshop and Affinity.

Link to post
Share on other sites
6 minutes ago, anon2 said:

 

Affinity will be doing the same as Photoshop, which is explained quite well at https://en.wikipedia.org/wiki/Blend_modes#Hue,_saturation_and_luminosity

The article makes clear that Photoshop performs these blend modes in a Hue, Chroma, Luma colour space instead of Hue, Saturation, Lightness.

Another way of putting it is that the Saturation and Luminosity blend modes are misleadingly named in Photoshop and Affinity.

That seems to answer my question.

Blend mode saturation uses both S and L from the blend layer, not only S.

@dmstraker: In this case, you may consider amend your excellent tutorials to include this detail (which drove me crazy the last week).

 

Link to post
Share on other sites
12 minutes ago, NotMyFault said:

Blend mode saturation uses both S and L from the blend layer, not only S.

No, you've misunderstood.

The blend mode name Saturation is misleadingly named in Photoshop (and Affinity) because it uses Chroma from the top layer and Hue and Luma from below.

Link to post
Share on other sites

...the Wiki HSL/HSV page quotes luma calc as:

{\displaystyle Y'_{\text{601}}=0.2989\cdot R+0.5870\cdot G+0.1140\cdot B} (SDTV)
Y240′=0.212⋅R+0.701⋅G+0.087⋅B{\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B}{\displaystyle Y'_{\text{240}}=0.212\cdot R+0.701\cdot G+0.087\cdot B} (Adobe)
Y709′=0.2126⋅R+0.7152⋅G+0.0722⋅B{\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B}{\displaystyle Y'_{\text{709}}=0.2126\cdot R+0.7152\cdot G+0.0722\cdot B} (HDTV)
Y2020′=0.2627⋅R+0.6780⋅G+0.0593⋅B{\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B}{\displaystyle Y'_{\text{2020}}=0.2627\cdot R+0.6780\cdot G+0.0593\cdot B} (UHDTV, HDR)
 
I'm guessing APh uses 601.

Dave Straker

Cameras: Sony A7R2, RX100V

Computers: Win10: Chillblast i9 Custom + Philips 40in 4K & Benq 23in; Surface Pro 4 i5; iPad Pro 11"

Favourite word: Aha. For me and for others.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.