A common way of communicating color is through visual systems, such as charts. In these kinds of visual systems, every color includes a special set of coordinates. HSL can also be considered a visual system. The values of HSL are supported in Safari, Firefox, Chrome, and Opera 10+ HSL has three values- Hue, Saturation, and Lightness.
Hue
Hue is the degree on the color wheel, starting from 0 to 360. 0 (or 360) means red, 120 is green, and 240 is blue. The rest of the numbers reflect various shades.
Saturation
Saturation is shown in percentage. The full color is 100%.
Lightness
Lightness is shown in percentage value as well. 100% is white (light), 0% is black (dark), and, finally, 50 % means average.
HSL provides a wide range of colors and tones. The biggest advantage of HSL is that it allows guessing the colors before tweaking. It is easy to use and helps to create groups of matching colors. The lightness and saturation can be varied, but the hue should be kept the same.
Feel free to try making your color combinations by using our tool.