Hue, Saturation, Color and Luminosity blend modes.

Unity Engine
1

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
1 Like
3

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? :slight_smile:

4

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:

float3 BlendHue(float3 base, float3 blend)
{
    float3 baseHSL = RGBToHSL(base);
    float3 blendHSL = RGBToHSL(blend);
    return HSLToRGB(float3(blendHSL.r, blendHSL.g > 0.0 ? baseHSL.g : 0.0, baseHSL.b));
}
5

But how in the world it got L = 10 and not 30?..)

6

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/20170209143444/http://wwwimages.adobe.com/www.adobe.com/content/dam/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.

2 Likes
7

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

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.