Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use hsl () and hsla () to set color values in css. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

There are two ways to set color values in css: hsl () and hsla (). They basically use the HSL color mode to set colors, so let's take a look at what HSL color mode is.

HSL color mode is a color standard in the industry, which obtains all kinds of colors by changing the three color channels of hue (H), saturation (S) and luminance (L) and superposing them with each other. The HSL color standard includes almost all the colors that human vision can perceive, and it is one of the most widely used color systems at present.

HSL is a color that represents three channels of hue, saturation and brightness.

And HSLA is based on HSL to add a transparency (A) setting.

Now that you know what the HSL color mode is, let's take a look at how hsl () and hsla () are used in css to set color values.

Hsl () and color values in css

The basic syntax of hsl ():

Hsl (Hmam Speni L)

H (hue: Hue): derived from the color disk, where 0,360 are red, nearly 120are green, 240are blue

S (saturation: Saturation): the value is a percentage, 0% represents grayscale, 100% represents the highest saturation

L (Luminance: Lightness): the value is also a percentage, where 0% is the darkest, 50% is the average, and 100% is the brightest.

We can use a simple code example to see how hsl () sets the color value:

Hsl () and color

.demo {width:400px;height:240px;margin:50pxauto;}

.hslL1 {background:hsl (320100% focus 50%); height:40px;}

.hslL2 {background:hsl (320pr 50% 50%); height:40px;}

.hslL3 {background:hsl (320100% focus 75%); height:40px;}

.hslL4 {background:hsl (202100% focus 50%); height:40px;}

.hslL5 {background:hsl (202, 50%, 50%); height:40px;}

.hslL6 {background:hsl (202100% focus 75%); height:40px;}

That's all of the article "how to use hsl () and hsla () to set color values in css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.