HSL colour model

• The HSL and HSB are very similar models and are often used interchangeably. They both represent colours based on Hue, Saturation, and a third component.
• In the HSB colour model brightness refers to the overall luminance of a colour.
• In the HSB colour model, brightness represents the colour independent of adding white or black. It’s like a dimmer switch for the chosen colour.
• In the HSL colour model, lightness refers to how light or dark a colour appears, considering how our eyes perceive brightness relative to a neutral grey. This is why a 50% light value represents a medium tone, even though it might not be the same brightness for all hues.
• Both the HSB colour model and the HSL colour model are usually represented as a cylinder, where the hue is represented by an angle around the central axis, the saturation is represented as the distance from the central axis, and the brightness or lightness is represented as a distance along the vertical axis.

• The difference between the two models lies in how the lightness and brightness components are calculated. In HSB, the brightness value is calculated by summing the highest and lowest RGB components and then dividing by two. In HSL, the lightness value is calculated by averaging the highest and lowest RGB components.
• Both models are used to represent colours in a way that is more intuitive and user-friendly for adjustments compared to the RGB model.
• Due to the similarity between HSB and HSL, they are often used interchangeably, and the difference in implementation is minor. Many software applications, including Adobe software, implement HSB (Hue, Saturation, Brightness) as a way to adjust colours easily and intuitively.

HSB colour model

HSL_color_solid_cylinder.png: SharkDderivative work: SharkD  Talk, CC BY-SA 3.0, via Wikimedia Commons