Embracing HSL: The Secret to Simplified Color Management in CSS
Even if you feel yourself being in the intricate world of CSS, it’s not necessary that you need to solve the complicated maze. And talk about HSL (Hue, Saturation, Lightness) — a tremendous simplification system that is aimed to serve as the navigation light of color management, helping to make it not that difficult.
Understanding HSL
HSL, primarily known for its easily understandable color encoding, markedly differs from hex value and RGB color models whose syntax is commonly confusing.
Hue
Visualize the arc of around 0 and 360 as a colorful circle where every degree of the circle represents a specific shade of color. If red is picked at the starting point and 360 degrees at the end of the wheel, picking hues will be like landing a number on the wheel.
/* Example of a vivid sky blue */
color: hsl(200, 100%, 50%);Saturation
Tinting the hue from a gray at 0% to a full brilliancy of the color at 100% is what saturation does.It’s about the “colorfulness.”
/* Example of a desaturated sky blue */
color: hsl(200, 50%, 50%);