HSL color
Besides RGB, CSS also allows us to declare color values as Hue, Saturation, and Lightness (HSL).
HSL isn’t the same as HSB! Don’t make the mistake of thinking that the Hue, Saturation, and Brightness (HSB) value shown in the color picker of image editing applications such as Photoshop is the same as HSL—it isn’t!
What makes HSL comparatively intuitive to use is that it’s relatively simple to understand the color that will be represented, based on the values given. For example, unless you’re some sort of color-picking ninja, I’d wager you couldn’t instantly tell me what color rgb(255, 51, 204)
is. Any takers? No, me neither.
However, show me the HSL value of hsl(315, 100%, 60%)
and I could take a guess that it is somewhere between a magenta and a red color (it’s actually a festive pink color). How do I know this? Simple: “Young Guys Can Be Messy Rascals!” This mnemonic will help you to...