HSL is another way to describe color with 3 parameters. RGB is the way computer
screens work, but not very intuitive. HSL is more intuitive, but you need to
convert it to RGB before you can draw a pixel with it. The nicest application of
this color model is that you can easily create rainbow gradients or change the
color, lightness or saturation of an image with this color model.
HSL color obviously has the parameters H, S and L, or Hue, Saturation and
Lightness.
Hue indicates the color sensation of the light, in other words if the
color is red, yellow, green, cyan, blue, magenta, ... This representation looks
almost the same as the visible spectrum of light, except on the right is now the
color magenta (the combination of red and blue), instead of violet (light with a
frequency higher than blue):
Hue works circular, so it can be represented on a circle instead. A hue of 360�
looks the same again as a hue of 0�.
Saturation indicates the degree to which the hue differs from a neutral
gray. The values run from 0%, which is no color, to 100%, which is the fullest
saturation of a given hue at a given percentage of illumination. The more the
spectrum of the light is concentrated around one wavelength, the more saturated
the color will be.
Lightness indicates the illumination of the color, at 0% the color is
completely black, at 50% the color is pure, and at 100% it becomes white. In HSL
color, a color with maximum lightness (L=255) is always white, no matter what
the hue or saturation components are. Lightness is defined as (maxColor+minColor)/2
where maxColoris the R, G or B component with the maximum value, and minColor
the one with the minimum value.
In this tutorial, Hue, Saturation and Lightness will be presented as numbers
between 0-255 instead, so that the HSL model has the same 24 bits as the RGB
model.
The HSL color model is for example used in Paint Shop Pro's color picker.
The HSV Color
Model
The HSV color model (sometimes also called HSB), uses the parameter Value
instead of Lightness. Value works different than Lightness, in that the color
with maximum value (V=255) can be any color like red, green, yellow, white,
etc..., at it'smaximum brightness. Value is defined as maxColor, where maxColor
is the R, G or B component with the maximum value. So the colors red (255,0,0)
and white (255,255,255) both have a Value of 255 indeed.
In HSL, the Lightness showed the following behavior when increased:
In HSV, Value does the following:
The Hue and Saturation parameters work very similar to the ones in HSL. HSV is
generally better at representing the saturation, while HSL is better at
representing the brightness. However, HSV is again better to decrease the
brightness of very bright images.
We can compare the HSL and HSV model a bit better by comparing their plots:
Here is the plot of HSL (left) and HSV (right) with S=255, Hue on the horizontal
axis, and Lightness/Value on the vertical axis (maximum lightness at the top):
While the top of the HSL curve is white because white is the color with maximum
brightness, the top of the HSV curve contains all colors, because the saturation
is 255 and in HSV, saturation 255 has to be a color while white should have 0
saturation. The top of the HSV curve is the same as the center horizontal line
of the HSL curve, and the complete HSV curve is exactly the same as the bottom
half of the HSL picture.
Here is the plot of HSL (left) and HSV (right) with L=255 and V=255
respectively, Hue on the horizontal axis, and Saturation on the vertical axis
(maximum saturation at the bottom):
The HSL curve is completely white, because white is the only color with L=255 in
the HSL model. The HSV curve, now shows all colors that have one or more of
their color components equal to 255. The HSV picture here, is exactly the same
as the top half of the previous HSL picture where S=255.
And here's the plot of HSL (left) and HSV (right) with L=128 and V=128
respectively, and again Hue on the horizontal axis, and Saturation on the
vertical axis (maximum saturation at the bottom):
Color
Model Conversions
To draw the plots given above, color model conversion functions have to be used:
first you describe the color as HSL or HSV, but to plot it on screen, it has to
be converted to RGB first. Transformations from RGB to HSL/HSV are handy as
well, for example if you load an RGB image and want to change it hue, you have
to convert it to HSL or HSV first, then change the hue, and then change it back
to RGB.
The color model conversion formulas are already in QuickCG, in the QuickCG.cpp
file.
RGB to HSL
The following function converts from RGB color to HSL color. You give it a
ColorRGB and it returns a ColorHSL. Both ColorRGB and ColorHSL are simple
structs with 3 integers, the only difference is their names. The RGBtoHSL
function calculates the values for ColorHSL.
First the variables r, g, b, h, s, l are declared as floating point numbers.
Internally, the function works with floating point numbers between 0.0 and 1.0,
for better precision. At the end of the function, the results can very easily be
converted back to integers from 0-255. The function can also easily be modified
to work with other ranges, e.g. if you'd want to use 16 bit per color channel,
or represent Hue as a value between 0� and 360�.
ColorHSL RGBtoHSL(ColorRGB colorRGB)
{
float r, g, b, h, s, l; //this function works with floats between 0 and 1
r = colorRGB.r / 256.0;
g = colorRGB.g / 256.0;
b = colorRGB.b / 256.0;
|
Then, minColor and maxColor are defined. Mincolor is the value of the color
component with the smallest value, while maxColor is the value of the color
component with the largest value. These two variables are needed because the
Lightness is defined as (minColor + maxColor) / 2.
float maxColor = max(r, max(g, b));
float minColor = min(r, min(g, b));
|
If minColor equals maxColor, we know that R=G=B and thus the color is a shade of
gray. This is a trivial case, hue can be set to anything, saturation has to be
set to 0 because only then it's a shade of gray, and lightness is set to R=G=B,
the shade of the gray.
//R == G == B, so it's a shade of gray
{
h = 0.0; //it doesn't matter what value it has
s = 0.0;
l = r; //doesn't matter if you pick r, g, or b
}
|
If minColor is not equal to maxColor, we have a real color instead of a shade of
gray, so more calculations are needed:
- Lightness (l) is now set to it's definition of (minColor + maxColor)/2.
- Saturation (s) is then calculated with a different formula depending if
light is in the first half of the second half. This is because the HSL model
can be represented as a double cone, the first cone has a black tip and
corresponds to the first half of lightness values, the second cone has a
white tip and contains the second half of lightness values.
- Hue (h) is calculated with a different formula depending on which of the
3 color components is the dominating one, and then normalized to a number
between 0 and 1.
else
{
l = (minColor + maxColor) / 2;
if(l < 0.5) s = (maxColor - minColor) / (maxColor + minColor);
else s = (maxColor - minColor) / (2.0 - maxColor - minColor);
if(r == maxColor) h = (g - b) / (maxColor - minColor);
else if(g == maxColor) h = 2.0 + (b - r) / (maxColor - minColor);
else h = 4.0 + (r - g) / (maxColor - minColor);
h /= 6; //to bring it to a number between 0 and 1
if(h < 0) h ++;
}
|
Finally, H, S and L are calculated out of h,s and l as integers between 0 and
255 and "returned" as the result. Returned, because H, S and L were passed by
reference to the function.
ColorHSL colorHSL;
colorHSL.h = int(h * 255.0);
colorHSL.s = int(s * 255.0);
colorHSL.l = int(l * 255.0);
return colorHSL;
}
|
HSL to RGB
This is the opposite conversion, so this function will calculate the inverse of
the RGBtoHSL function.
First, internally the variables with small letters are defined as floating point
numbers between 0 and 1 again. Some temporary values for the calculations are
also declared.
ColorRGB HSLtoRGB(ColorHSL colorHSL)
{
float r, g, b, h, s, l; //this function works with floats between 0 and 1
float temp1, temp2, tempr, tempg, tempb;
h = colorHSL.h / 256.0;
s = colorHSL.s / 256.0;
l = colorHSL.l / 256.0;
|
Then follows a trivial case: if the saturation is 0, the color will be a
grayscale color, and the calculation is then very simple: r, g and b are all set
to the lightness.
//If saturation is 0, the color is a shade of gray
if(s == 0) r = g = b = l;
|
If the saturation is higher than 0, more calculations are needed again. red,
green and blue are calculated with the formulas defined in the code.
//If saturation > 0, more complex calculations are needed
else
{
//Set the temporary values
if(l < 0.5) temp2 = l * (1 + s);
else temp2 = (l + s) - (l * s);
temp1 = 2 * l - temp2;
tempr = h + 1.0 / 3.0;
if(tempr > 1) tempr--;
tempg = h;
tempb = h - 1.0 / 3.0;
if(tempb < 0) tempb++;
//Red
if(tempr < 1.0 / 6.0) r = temp1 + (temp2 - temp1) * 6.0 * tempr;
else if(tempr < 0.5) r = temp2;
else if(tempr < 2.0 / 3.0) r = temp1 + (temp2 - temp1) * ((2.0 / 3.0) - tempr) * 6.0;
else r = temp1;
//Green
if(tempg < 1.0 / 6.0) g = temp1 + (temp2 - temp1) * 6.0 * tempg;
else if(tempg < 0.5) g = temp2;
else if(tempg < 2.0 / 3.0) g = temp1 + (temp2 - temp1) * ((2.0 / 3.0) - tempg) * 6.0;
else g = temp1;
//Blue
if(tempb < 1.0 / 6.0) b = temp1 + (temp2 - temp1) * 6.0 * tempb;
else if(tempb < 0.5) b = temp2;
else if(tempb < 2.0 / 3.0) b = temp1 + (temp2 - temp1) * ((2.0 / 3.0) - tempb) * 6.0;
else b = temp1;
}
|
And finally, the results are returned as integers between 0 and 255.
ColorRGB colorRGB;
colorRGB.r = int(r * 255.0);
colorRGB.g = int(g * 255.0);
colorRGB.b = int(b * 255.0);
return colorRGB;
}
|
RGB to HSV
The function RGBtoHSV works very similar as the RGBtoHSL function, the only
difference is that now the variable V (Value) instead of L (Lightness) is used,
and Value is defined as maxColor. This can immediately be calculated at the
beginning of the function:
ColorHSV RGBtoHSV(ColorRGB colorRGB)
{
float r, g, b, h, s, v; //this function works with floats between 0 and 1
r = colorRGB.r / 256.0;
g = colorRGB.g / 256.0;
b = colorRGB.b / 256.0;
float maxColor = max(r, max(g, b));
float minColor = min(r, min(g, b));
v = maxColor;
|
Then, the saturation is calculated. If the color is black, the value of
saturation doesn't matter so it can be set to 0. This has to be done to avoid a
division by zero.
if(maxColor == 0)//avoid division by zero when the color is black
{
s = 0;
}
else
{
s = (maxColor - minColor) / maxColor;
}
|
Finally, the hue is calculated. If saturation is 0, the color is gray so hue
doesn't matter. Again this case is handled separately to avoid divisions by
zero.
if(s == 0)
{
h = 0; //it doesn't matter what value it has
}
else
{
if(r == maxColor) h = (g - b) / (maxColor-minColor);
else if(g == maxColor) h = 2.0 + (b - r) / (maxColor - minColor);
else h = 4.0 + (r - g) / (maxColor - minColor);
h /= 6.0; //to bring it to a number between 0 and 1
if (h < 0) h++;
}
|
And finally, the results are returned as integers between 0 and 255.
ColorHSV colorHSV;
colorHSV.h = int(h * 255.0);
colorHSV.s = int(s * 255.0);
colorHSV.v = int(v * 255.0);
return colorHSV;
}
|
HSV to RGB
First the floating point numbers between 0 and 1 are declared again:
ColorRGB HSVtoRGB(ColorHSV colorHSV)
{
float r, g, b, h, s, v; //this function works with floats between 0 and 1
h = colorHSV.h / 256.0;
s = colorHSV.s / 256.0;
v = colorHSV.v / 256.0;
|
The trivial case for saturation = zero is handled:
//If saturation is 0, the color is a shade of gray
if(s == 0) r = g = b = v;
|
The HSV model can be presented on a cone with hexagonal shape. For each of the
sides of the hexagon, a separate case is calculated:
//If saturation > 0, more complex calculations are needed
else
{
float f, p, q, t;
int i;
h *= 6; //to bring hue to a number between 0 and 6, better for the calculations
i = int(floor(h)); //e.g. 2.7 becomes 2 and 3.01 becomes 3 or 4.9999 becomes 4
f = h - i; //the fractional part of h
p = v * (1 - s);
q = v * (1 - (s * f));
t = v * (1 - (s * (1 - f)));
switch(i)
{
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
}
|
And again, the results are "returned" as integers between 0 and 255.
ColorRGB colorRGB;
colorRGB.r = int(r * 255.0);
colorRGB.g = int(g * 255.0);
colorRGB.b = int(b * 255.0);
return colorRGB;
}
|
HSL and
HSV Arithmetic
The functions given above are already in the QuickCG, and thanks to them we can
do HSL and HSV arithmetic on images.
The examples will be performed on the flower image again:
Changing Hue
It doesn't matter if you change hue with the HSL or HSV model, the results are
the same, so for no particular reason at all let's do it with HSL here.
The following code will load the BMP image, convert it to HSL, change the Hue by
adding a certain value to it, and convert it back to RGB to display it (put this
code in the main function in the main.cpp file):
ColorRGB image[200][133];
int main(int argc, char *argv[])
{
ColorRGB colorRGB;
ColorHSL colorHSL;
screen(200, 133, 0, "HSL and HSV Color");
loadBMP("pics/flower.bmp", image[0], 200, 133);
for(int x = 0; x < w; x++)
for(int y = 0; y < h; y++)
{
//store the color of the image in variables R, G and B
colorRGB = image[x][y];
//calculate H, S and L out of R, G and B
colorHSL = RGBtoHSL(colorRGB);
//change Hue
colorHSL.h += int(42.5 * 1);
colorHSL.h %= 255;
//convert back to RGB
colorRGB = HSLtoRGB(colorHSL);
//plot the pixel
pset(x, y, colorRGB);
}
redraw();
sleep();
return 0;
}
|
The Hue is modulo divided through 255, because it has to be between 0 and 255,
and it's circular, so a hue of 260 is the same as a hue of 5. The value 42.5 was
chosen to be 255/6, representing a hue shift of 60�. Here are screenshots of the
result for a hue shift of 0�, 60�, 120�, 180�, 240� and 300� (360� gives the
same result as 0� again):
You can also set Hue to a constant, to give the whole image the same color. For
example, here hue is set to 25, which is orange:
Changing
Saturation
You can change the saturation to make the image more colorful, or more like
pastel, or grayscale. This time, the results are slightly different if you use
the HSL or HSV color model.
For example, to increase the saturation by multiplying it with 2.5, change the
lines of the code that changed the hue to:
colorHSV.s = int(colorHSV.s * 2.5);
if(colorHSV.s > 255) colorHSV.s = 255;
|
If Saturation is higher than 255, it's truncated. On the left is the result if
you use HSL, on the right if you use HSV. The result is pretty similar to the
original image because the saturation in it was quite high already. Only the
background became a bit more green.
If you multiply it with 0.5 instead, you'll decrease the saturation by halving
it:
You can also decrease the saturation by substracting a value from it instead:
colorHSV.s = colorHSV.s - 100;
if(colorHSV.s < 0) colorHSV.s = 0;
|
The background will be grayscale now, while the flower with it's high saturation
still has some color:
If saturation is set to 0, the image will be grayscale, in a different way if
you use HSL or HSV, and both are also different from the "average" formula to
grayscale an image:
And this is what you get if you set saturation equal to 128 for all pixels. The
flower and background look equally colorful now:
Changing
Brightness
Finally, HSL and HSV can also be used to change the brightness of an image.
Again, the HSL and HSV model will work differently. HSL gives bad result when
making an image with white or near white pixels darker.
You can also decrease the saturation by substracting a value from it instead:
colorHSV.l -= 50;
if(colorHSV.l < 0) colorHSV.l = 0;
|
Here's the result for HSL on the left and HSV on the right:
And setting brightness equal to 192 for all pixels gives:
