Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Hue, Saturation, Color and Luminosity blend modes.

Discussion in 'Shaders' started by FoxyShadow, Jan 14, 2018.

  1. FoxyShadow

    FoxyShadow

    Joined:
    Aug 14, 2016
    Posts:
    41
    I'm looking for a formula for these four blend modes in Photoshop or at least some of them. I know that it somehow playing with HSL color values, but how? Thank you for help.
     
  2. bgolus

    bgolus

    Joined:
    Dec 7, 2012
    Posts:
    12,329
  3. FoxyShadow

    FoxyShadow

    Joined:
    Aug 14, 2016
    Posts:
    41
    Thanks for the reply, but seems like I'm missing something. For example, file in that liks says this for the Hue blending:

    float3 BlendHue(float3 base, float3 blend) {
    float3 baseHSL = RGBToHSL(base);
    return HSLToRGB(float3(RGBToHSL(blend).r, baseHSL.g, baseHSL.b));
    }

    I'm opening Photoshop and making base color blue (RGB(0,0,1); HSL(240,100,30)) and blend color white (RGB(1,1,1), HSL(0,0,100))

    So according to this formula resulting color should be HSL(0,100,30). But Photoshop making HSL(0,0,10). Totally different result. What's wrong? :)
     
  4. bgolus

    bgolus

    Joined:
    Dec 7, 2012
    Posts:
    12,329
    I’m guessing Photoshop does more than how the blend is described. Specifically, if the saturation is zero, there’s no color, so an HSL of (0,100,30), which is dark red, probably wasn’t what the artist was intending. My off the cuff guess is something like this is what photoshop is doing:

    Code (CSharp):
    1. float3 BlendHue(float3 base, float3 blend)
    2. {
    3.     float3 baseHSL = RGBToHSL(base);
    4.     float3 blendHSL = RGBToHSL(blend);
    5.     return HSLToRGB(float3(blendHSL.r, blendHSL.g > 0.0 ? baseHSL.g : 0.0, baseHSL.b));
    6. }
     
    Last edited: Jan 16, 2018
  5. FoxyShadow

    FoxyShadow

    Joined:
    Aug 14, 2016
    Posts:
    41
    But how in the world it got L = 10 and not 30?...)
     
  6. bgolus

    bgolus

    Joined:
    Dec 7, 2012
    Posts:
    12,329
    Because while doing an RGB to HSL (or HSB, which is different!) conversion is an easy way to replicate the blend, it's not what Photoshop is actually doing. Searching around I found exactly what it's doing from an official Adobe pdf file, which contradicts pretty much every other site out there that tries to describe what they're doing.

    https://web.archive.org/web/2017020...am/Adobe/en/devnet/pdf/pdfs/PDF32000_2008.pdf

    Pages 326 through 328.

    The short version is it's not calculating the HSL at all, and it's using a more traditional definition of what luminance is than the "Lightness" of HSL.

    HSL's "L" is Lightness. It's defined as the average of the brightess RGB component value and the darkest RGB component value. So RGB 1, 0, 0 is L == 50%, but so is RGB 0, 0, 1 and RGB 1, 1, 0, even though those each have a significantly different perceptual brightness.

    HSB is what Photoshop actually uses for it's color picker, and that's different too. HSB's "B" is Brightness is simply the max RGB component value. HSB is also called HSV where the V means Value as it's more accurately what it's representing.

    Luminance on the other hand is is 0.3 * R + 0.59 * G + 0.11 * B which better matches the human perception of the brightness of each color. Those are the values that Photoshop uses according to that pdf file.
     
    Marco-Sperling and FoxyShadow like this.
  7. FoxyShadow

    FoxyShadow

    Joined:
    Aug 14, 2016
    Posts:
    41
    I'll look into it, thank you very much for your help. I have a lot of questions about shaders.... they are making me crazy.
     
  8. FoxyShadow

    FoxyShadow

    Joined:
    Aug 14, 2016
    Posts:
    41
    I don't even know how did you manage to find this archive... but thank you again. This document can become handy in a lot of situations.