Modifying Hue value with GLSL
Hi, I just started to learn shader and what I would like to do is changing the HUE value of an image.
Does anyone know how to do it?
I did found some articles/tutorials talk about HUE but I don't really understand it. I was looking for an easy way to change the HUE value.
Hope I can get some useful replies here
I found these methods online
vec3 RGBToHSL(vec3 color)
vec3 hsl; // init to 0 to avoid warnings ? (and reverse if + remove first part)
float fmin = min(min(color.r, color.g), color.b); //Min. value of RGB
float fmax = max(max(color.r, color.g), color.b); //Max. value of RGB
float delta = fmax - fmin; //Delta RGB value
hsl.z = (fmax + fmin) / 2.0; // Luminance
if (delta == 0.0) //This is a gray, no chroma...
hsl.x = 0.0; // Hue
hsl.y = 0.0; // Saturation
else //Chromatic data...
if (hsl.z < 0.5)
hsl.y = delta / (fmax + fmin); // Saturation
hsl.y = delta / (2.0 - fmax - fmin); // Saturation
float deltaR = (((fmax - color.r) / 6.0) + (delta / 2.0)) / delta;
float deltaG = (((fmax - color.g) / 6.0) + (delta / 2.0)) / delta;
float deltaB = (((fmax - color.b) / 6.0) + (delta / 2.0)) / delta;
if (color.r == fmax )
hsl.x = deltaB - deltaG; // Hue
else if (color.g == fmax)
hsl.x = (1.0 / 3.0) + deltaR - deltaB; // Hue
else if (color.b == fmax)
hsl.x = (2.0 / 3.0) + deltaG - deltaR; // Hue
if (hsl.x < 0.0)
hsl.x += 1.0; // Hue
else if (hsl.x > 1.0)
hsl.x -= 1.0; // Hue
float HueToRGB(float f1, float f2, float hue)
if (hue < 0.0)
hue += 1.0;
else if (hue > 1.0)
hue -= 1.0;
if ((6.0 * hue) < 1.0)
res = f1 + (f2 - f1) * 6.0 * hue;
else if ((2.0 * hue) < 1.0)
res = f2;
else if ((3.0 * hue) < 2.0)
res = f1 + (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;
res = f1;
vec3 HSLToRGB(vec3 hsl)
if (hsl.y == 0.0)
rgb = vec3(hsl.z); // Luminance
if (hsl.z < 0.5)
f2 = hsl.z * (1.0 + hsl.y);
f2 = (hsl.z + hsl.y) - (hsl.y * hsl.z);
float f1 = 2.0 * hsl.z - f2;
rgb.r = HueToRGB(f1, f2, hsl.x + (1.0/3.0));
rgb.g = HueToRGB(f1, f2, hsl.x);
rgb.b= HueToRGB(f1, f2, hsl.x - (1.0/3.0));
But I found it very slow because first I need to convert my RGB to HUE then adjust the HUE and lastly convert it back to RGB.
I'll be making it to run on mobile device so I was looking for better/faster methods.
Why do you operate on HSV colors in the first place?
Actually my scenario is like this:
I was trying to do an effect in games.
Because I wanted to have different colors for different characters, so I asked my artist to give me one default color then later on I can modify the HUE in codes to get different color without using different set of textures.
I'm not sure is there any other better way for me to achieve what I want.
That doesn't answer the question. Why do you need color values to be represented using the HSV color space? Why don't you have your artist specify the colors in RGB directly?
Hmm... I don't know
Basically he draw a shape filled with gradient color in Photoshop, then he told me if I want to change color then I need to adjust the HUE. @@?
Last edited by birdkingz; 01-21-2013 at 06:52 AM.
Do you specify the color programmatically or with pre-determined values, i.e. do you change the color based on some runtime calculation or do you know all the possible colors at compile time?
Yea, I will know all the possible colors at compile time because each characters will have their own color and it will be preset by us.
Just that I need to change the color during runtime because once the player selects different characters, I have to change the color of that texture as well.
So why don't you code those colors directly as RGB values? BTW, what formats do your game assets have?
Hmm, the image looks like this
Reason why I need to change the Hue value is because I need to maintain the glowing, gradient effects.. that's what my artist told me.
I did try to modify the RGB value end up it goes very weird, like something tinted on top of the color.
I did try with grayscale image first then only set the RGB value, the result doesn't look as good as adjusting the Hue only.