In a previous article, we discussed the definition of color models and color spaces and the important distinction between them. In this article, we will delve deeper into two popular color models – HSV (or HSB) and HSL – and explore their practical differences, advantages and disadvantages.
Before we begin, I need to make a quick disclaimer: there’s a slight difference between HSV and HSB in how brightness is calculated. However, it’s worth noting that many software applications use the terms HSV and HSB interchangeably and implement the models in the same way. So, in practice, there may be no difference between the two. For the purpose of this article, we’ll treat them interchangeably; if you want to learn more, scroll to the bottom for a quick explanation.
HSV and HSL
HSV/HSB and HSL are often presented as cones and bi-cones respectively.
In the HSV/HSB model, the cone shape represents the range of colors from pure white to pure black, with the hue changing along the circumference of the cone. The saturation value increases from the center point (White) towards the outer rim of the cone, with the most saturated colors at the outer rim.
In the HSL model, the bi-cone shape represents the same range of colors from white to black, with the hue changing along the circumference of the bi-cone. The saturation value increases from the center point towards the outer rim of the bi-cone, once again with the most saturated colors at the outer rim.
As similar as these may sound, there are some key differences that need to be taken into account.
HSV/HSB Color Model
The HSV/HSB color model, also known as Hue, Saturation, Value or Hue, Saturation, Brightness represents colors based on three dimensions:
- Hue: The hue is the color’s position on the color wheel, measured in degrees from 0 to 360.
- Saturation: Saturation represents the purity of the color. The higher the saturation, the more pure the color appears. Saturation is measured on a scale from 0% to 100%. In the HSV/HSB color model, 0% saturation is represented with White.
- Value/Brightness: Value/Brightness represents the brightness of the color. The value or brightness dimension is represented on a scale from 0% to 100%. The lower the percentage, the darker the color will be; the higher the percentage, the purest the color will be.
HSL Color Model
The HSL color model, also known as Hue, Saturation, Lightness is similar to the HSV/HSB color model but with some key differences:
- Hue: The hue is still the color’s position on the color wheel, measured in degrees from 0 to 360.
- Saturation: Saturation still represents the purity of the color, measured on a scale from 0% to 100%. In the HSL color model, 0% saturation is represented with Middle Grey.
- Lightness: Lightness represents the brightness of the color. The higher the lightness, the brighter the color appears. Lightness is measured on a scale from 0% (black) to 100% (white).
Practical Examples
One of the advantages of the HSL model is that it provides a very intuitive way to manipulate colors. For example, to create a darker version of a color, you can simply decrease its lightness value. To make a color more intense, you can increase its saturation value. Similarly, to get white, you can just increase lightness independently of saturation.
That is one of the main differences with the HSV/HSB model: to get white, you first need to max out the value/brightness and then desaturate the color.
Let’s have a look at these wireframe cones and bi-cones to visualize how the different components of each model interact with each other to define a color:
To get pure red, in the HSV/HSB Color Model I will have to max out both the Saturation and the Value/Brightness (H:0; S:100; V/B:100). In the HSL Color Model, I will have to stop midway with the lightness value, in order to get to the purest form of that color (H:0; S:100; L:50).
Now, what if I want to change color and get pure white?
In the HSV/HSB model, I am already maxed out in Value/Brightness. But, as we saw before, we can reduce the saturation to 0%. That will definitely work, even though it won’t be as intuitive as in the HSL Color Model. There, Lightness is at 50% and if I want to achieve white, I can just max it out to 100%, without touching the saturation control.
Conclusion
In conclusion, the choice of color model depends on the specific needs of the user and the type of work they are doing. While they are both different representations of the RGB Color Model and will manage to get you to the same colors, I personally think that the HSL Color Model works more intuitively. That said, experimenting with both models can help you better understand how they work and which one is best suited for your specific needs. Overall, having a good understanding of color theory and color models is essential for anyone who works with colors.
* HSV and HSB are very similar color models, and the terms are often used interchangeably. However, there is one potential difference between the two models when it comes to how brightness is calculated.
In the HSV model, the brightness value (V) is based on the maximum RGB component value. This means that the brightness of a color is determined by the highest value among the Red, Green and Blue components of the color.
In some versions of the HSB model, the brightness value (B) is calculated based on the average RGB component value, rather than the maximum value. This means that the brightness of a color is determined by the average value of the Red, Green and Blue components of the color.
Additional Resources:
