freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design

Lesson Summary

In this freeCodeCamp tutorial we are looking at the hsl() property. This is a new one for me and had never looked into how it works before today (that I can recall at the moment anyways). Using hsl() allows us to represent color similar to the color property, rgb property etc. The h in hsl() stands for the hue or "color". This is a number from 0 to 360. Hue utilizes the color wheel concept as opposed to the color spectrum we have encountered. The s in hsl() stands for saturation or how much gray or non-gray something has. This one can be confusing at first but understanding if something is fully saturated (100%) then there is no gray in it. As something loses saturation it becomes grayer. Lastly the l stands for lightness which is how black or white something is. 50% is a normal colors lightness.

Subscribe To Monthly Newsletter. Chance to Win Monthly Prizes

* indicates required