HSL (for hue, saturation, lightness) and HSV (for hue, saturation, value; also known as HSB, for hue, saturation, brightness) are alternative representations of the RGB color model, designed in the 1970s by computer graphics researchers to more closely align with the way human vision perceives color-making attributes.
HSL is part of color model in graphic designing and image editing. Adjusting Hue, Saturation and Lightness of an image is easy to do with just simple dialing of values. HSL is like a tool which comes pre-installed in the image adjustment menu of any image and graphic design software.
HSL is user-friendly because even with basic knowledge, you can imagine how specific color looks like. It is very easy to change entire color of any type of graphic file and designs like logo, vector art or even an entire image.
Also Read: RGB, CMYK AND Image Resolution: Explained
What is HSL and what does it mean? HSL stands for Hue, Saturation, and Lightness. When humans view an object it's color is described by its hue, saturation, and brightness.
The HSL representation models the way different paints mix together to create color in the real world, with the lightness dimension resembling the varying amounts of black or white paint in the mixture. Fully saturated colors are placed around a circle at a lightness value of ½, with a lightness value of 0 or 1 corresponding to fully black or white, respectively.
The HSL color space was invented for television in 1938 by Georges Valensi as a method to add color encoding to existing monochrome broadcasts, allowing existing receivers to receive new color broadcasts (in black and white) without modification as the luminance (black and white) signal is broadcast unmodified. It has been used in all major analog broadcast television encoding including NTSC, PAL and SECAM and all major digital broadcast systems and is the basis for composite video.
1. HUE
So what exactly is Hue? Hue literally means color. Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. When it is used in a color name, it indicates that a modern pigment has been used instead of the traditional one. For example, Cadmium Red Pale Hue is a “color of cadmium red pale”. It is important to note that a hue color is not necessarily inferior.
2. SATURATION
So what exactly is Saturation? Saturation is the intensity, or richness, of that color. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
The higher the saturation of a color, the more vivid it is. The lower the saturation of a color, the closer it is to gray. Lowering the saturation of a photo can have a “muting” or calming effect, while increasing it can increase the feel of the vividness of the scene.
3. LIGHTNESS / BRIGHTNESS
So what is Lightness or Brightness? Lightness (or brightness) is the amount of white or black mixed in with the color. It's also calculated as a percentage value between 0% and 100%. 0% lightness will also always be black.
Lightness (which is sometimes referred to as ‘value’ or ‘tone’) relates to the amplitude of the color – or its proximity to the white or black end of the tonal scale. A color with low value is close to black, while one with high value is close to white.
KEY POINTS:
HSL vs HSB: HSL & HSB are same where L stands for Lightness and B stands for Brightness. In designing terms both Lightness and Brightness are same.
HSL HSB in Color System: These are values to determine Hue, Saturation and Lightness/Brightness in a system where these values when adjusted change the color tone of the selected layer.
HSL vs RGB: The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive. you can tweak colors whenever you want. HSL is meant to be more easy to understand. Formats like RGB and Hex are more machine readable than human readable.
HSL Colors: For Web style sheets, there are 360×99×98 = 3.49 million possible HSL color choices.
