HSL is a very intuitive way to choose colors. If you need to "darken a little more" or "lighten up a little bit", using the hexadecimal combination can be quite troublesome. Fortunately, through HSL, it's just a simple number change.
HSL color model is a color standard of industry, by changing the hue (H), saturation (S), Brightness (L) of three color channels and their superposition to each other to get a wide variety of colors, HSL is to represent the hue, saturation, brightness three channels of color, This standard contains almost all the colors that human vision can perceive, and is one of the most widely used color systems.
Syntax:<length> <percentage> <percentage> For example: div {BACKGROUND:HSL (30, 50%, 80%);}
HSL represents Hue (hue, also known as "hue"), saturation (saturation), and lightness (lightness). Hue is the color of a color plate (refer to the above picture). Color selection by degrees to determine, 0º is red, 120º is green, and 240º is blue. Of course, you can choose between the different color combinations in the middle, so you have these:
Saturation (saturation) is how much of the color is used. 0% means grayscale, which means we don't use this color, and 100% means the color is full. In layman's terms, saturation is the color of the depth of the degree, bright degree lightness (lightness) is that the color is much brighter. Lower setting means darker, higher setting means brighter, 0% and 100% mean black and white respectively.
HSL is supported by most browsing numbers, including Safari 3.2+, Chrome, Firefox, Opera 9.6+,ie.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv= content-language" content= "Utf-8"/> <meta name= "robots" content= "all" /> <meta name= "Author" content= "TENCENT-ISRD"/> <meta name= "Copyright" content= "Tencent"/> <title >HSL colors</title> </pead> <body> <div style= "BACKGROUND-COLOR:HSL (240,100%,50%); color: White; " > Blue background in firefox browser </div> </body> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
