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 as a visual system. The values of HSL are supported in Safari, Firefox, Chrome, Opera 10+ and IE9+. HSl has three values- Hue, Saturation and Lightness.
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 between reflect various shades.
Saturation is shown in percentage. The full color is 100%.
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 gives an opportunity to guess the colors before tweaking. It is easy in usage and helps to create groups of matching colors. The lightness and saturation can be varied, but the hue should be kept same.
Feel free to try making your color combinations by using our tool.