Use HSL color guide in CSS3
The HSL method of CSS3 is widely supported by modern browsers, but many developers do not like to use it, partly because the HSL color mode is very different from other CSS color modes:
You can easily convert the hexadecimal color mode to the RGB color mode, but it is more difficult to convert to the HSL color mode.
The Hex and RGB colors in Photoshop can be used directly in the CSS file, but the HSB mode colors in Photoshop and HSL are different.
The color range of HSL is the same as Hex and RGB colors.
Although there are some limitations above, the HSL color mode is still a recommended color mode.
Understand the HSL color model system
To understand HSL colors, you first need to understand colors from another angle. Pay attention to the color wheel above, you can see three colors of red, green and blue. What is red at the end is set to 0 degrees, green is 120 degrees, and blue is 240 degrees. They divide the color wheel into three parts. Among them are yellow, cyan, and magenta (CMYK color system). Their angles are 60 degrees, 180 degrees and 300 degrees, respectively.
Starting from the top of the color wheel and rotating clockwise, it is the colorful colors of the rainbow. Starting at 60 degrees, they are: yellow, green, cyan, blue, magenta and red.
HSL color refers to the degree of color value in the color palette above.
For example, purple is between blue (240°) and magenta (300°), so its HSL color is hsl(270,100%,50%). If you want purple to be bluish, you have to move the angle value to the blue direction of the color wheel to get hsl(255,100%,50%).
You will notice that there are two percentage values after the angle. The first value is the saturation of the color, which is the "intensity" of the value. In the outermost layer of the color wheel, the color saturation is 100%, and the outermost color is the most "colorful". The more the color wheel moves to the center, the grayer the color. So saturation can also be understood as: how far is the color from gray? When the saturation of HSL colors is 0%, they all become the same gray.
HSL saturation value: hsl(45,x%,50%)
Brightness refers to whether the color is biased toward white or black. A brightness value of 50% means that the color is located between black and white, and the color will basically remain the same as the original color. Decreasing the brightness increases the black tone: when the brightness is 0%, the color changes to black. Increasing the brightness increases the white tone: when the brightness value is 100%, the color becomes white.
HSL brightness value: hsl(90,100%,x%)
