HSL: An Intuitive Way to Represent Color in CSS
When writing CSS, the most common formats we use for expressing a color are either a hex code like #BADA55 or an RGB value like rgb(125, 130, 110). Design tools like Sketch or Figma often use these formats as their default.
The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components.
One reason is that HSL models color in three dimensions, and these dimensions make a lot of sense to our perception of color as humans.
Let's take the hex code #BADA55. Just by glancing at it, do you have any idea what the actual color is? If you've been a front-end developer for as long as I have, you might know this one. But what if I change the code to #12DA55? How is the color affected?
What about rgb(12, 134, 200)? We know that RGB stands for red, green, and blue, so we can infer that the resulting color is a blend of those values. If the b is really high compared to the r and g, we can guess the color is on the blue side of the spectrum, but how would you get an orange or a yellow from blending these values?
