HSL

Share

What is HSL in Image Editing?

HSL is a way to represent a color using three numeric values: Hue, Saturation, and Lightness. HSL is used an alternative for the RGB representation, which uses 3 values too: red, green, and blue.

In HSL, hue is a value from 0° to 360° degrees. The pure RGB colors red, green, and blue would be at the angles 0°, 120°, and 240°, respectively. After blue, the hues become purple, pink, and then "loop back" completely when they reach 360° degrees, going back to red.

Generally, the data of the colors of the pixels in an image would be in RGB format, not in HSL. That is, the numbers that are save in image files will be in RGB format, and in the memory they will be in RGB format. The HSL values are merely calculated from the RGB values. When we change the hue of something using HSL, the RGB values are calculated from the HSL, and it's the RGB that is saved in the image.

Important: saturation and lightness in HSL are values calculated in a very simple way from RGB values, and don't consider the perception of human vision. In models that consider human vision, the term "luma" is used instead of lightness. In which case, for human beings, that pure blue RGB color is always darker than the pure green RGB color, therefore blue would have a luma lower than green. In HSL, both colors would have the same lightness.

In HSL, the brightness equals to the average between the greatest and smallest RGB complement. For example, in 255, 0, 0 RGB, the greatest complement is the R (255), and the smallest would be G or B (0). (255 + 0) / 2 = 127.5(How to Read This Math?). The lightness would be then 127.5 in a scale from 0 to 255, or 50 if the scale is from 0 to 100. The saturation is calculated from this lightness.

Learn More

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *