Programmatically, how does hue blending work in photoshop?

Question

In Photoshop you can set a layer's blending mode to be "Hue". If that layer is, for example, filled with blue then it seems to take the layer below and makes it all blue wherever a non-whiteish color exists.

I'm wondering what it's actually doing though. If I have a background layer with a pixel aarrggbb and the layer on top of that is set to blend mode "Hue" and there's a pixel aarrggbb on that layer, how are those two values combined to give the result that we see?

It doesn't just drop the rrggbb from the layer below. If it did that it'd color white and black as well. It also wouldn't allow color variations through.

If a background pixel is 0xff00ff00 and the corresponding hue layer pixel is 0xff0000ff then I'm assuming the end result will just be 0xff0000ff because the ff blue replaces the ff green. But, if the background pixel is 0x55112233 and the hue layer pixel is 0xff0000ff, how does it come up with the shade of blue that it comes up with?

The reason I ask is that I'd like to take various images and change the hue of the image programmatically in my app. Rather than storing 8 different versions of the same image with different colors, I'd like to store one image and color it as needed.

Answer 1

I found an algorithm to convert RGB to HSV here: http://www.cs.rit.edu/~ncs/color/t_convert.html

Of course, at the bottom of that page it mentions that the Java Color object already has methods for converting between RGB and HSV, so I just used that.

Answer 2

I've been researching a way to replicate that blending mode in javascript/canvas but I've only come up with the "colorize" filter/blend mode. (Examples below)

Colorize algorithm:

1. convert the colors from RGB to HSL;
2. change the Hue value to the wanted one (in my case 172⁰ or 0.477);
3. revert the update HSL to RGB

Note: this is ok on the desktop but it's noticeably slow on a smartphone, I found.

You can see the difference by comparing these three images. Original:

colorize:

Fireworks' "blend hue" algorithm (which I think is the same as Photoshop's):

The colorize filter might be a good substitute.

RGB/HSL conversion question

Hue/Chroma and HSL on Wikipedia