Home >Web Front-end >CSS Tutorial >A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)
A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)
- 青灯夜游Original
- 2018-10-17 10:57:406679browse
How to use hsl() and hsla() to set color values in css? This article will briefly talk about how to set color values in css using hsl() and hsla(). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
There are two ways to set color values in css: hsl() and hsla(). They basically use the HSL color mode method to set colors. So let’s take a look at what HSL color mode.
HSL color mode is a color standard in the industry. It changes the three color channels of hue (H), saturation (S), and brightness (L) and superimposes them on each other. to get a wide variety of colors. The HSL color standard includes almost all colors that can be perceived by human vision and is one of the most widely used color systems currently.
HSL represents the color of the three channels of hue, saturation, and brightness
And HSLA adds a transparency (A) setting on the basis of HSL.
Now that we know what the HSL color mode is, let’s take a look at how to use hsl() and hsla() in css to set color values.
Basic syntax of hsl() and color value
hsl() in css:
hsl(H,S,L);
H (Hue: Hue): Derived from color Disk, where 0 and 360 are red, close to 120 is green, and 240 is blue;
S (saturation: Saturation): the value is a percentage, 0% represents grayscale, and 100% represents the highest Saturation;
L (brightness: Lightness): The value is also a percentage, where 0% represents the darkest, 50% represents the average, and 100% represents the brightest.
We can use a simple code example to see how hsl() sets the color value:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hsl()和颜色</title>
<style>
.demo{width: 400px;height: 240px;margin: 50px auto;}
.hslL1 { background:hsl(320, 100%, 50%); height:40px; }
.hslL2 { background:hsl(320, 50%, 50%); height:40px; }
.hslL3 { background:hsl(320, 100%, 75%); height:40px; }
.hslL4 { background:hsl(202, 100%, 50%); height:40px; }
.hslL5 { background:hsl(202, 50%, 50%); height:40px; }
.hslL6 { background:hsl(202, 100%, 75%); height:40px; }
</style>
</head>
<body>
<div class="demo">
<div class="hslL1"></div>
<div class="hslL2"></div>
<div class="hslL3"></div>
<div class="hslL4"></div>
<div class="hslL5"></div>
<div class="hslL6"></div>
</div>
</body>
</html>Rendering:
It can be seen that they have the same hue, but the saturation or brightness is changed, and it becomes another color
background:hsl(320, 100%, 50%); background:hsl(320, 50%, 50%); background:hsl(320, 100%, 75%);
%20and%20hsla()%20to%20set%20color%20values%20%E2%80%8B%E2%80%8Bin%20css%20(detailed%20explanation%20with%20pictures%20and%20text) "153974305188597A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)")
background:hsl(202, 100%, 50%); background:hsl(202, 50%, 50%); background:hsl(202, 100%, 75%);
%20and%20hsla()%20to%20set%20color%20values%20%E2%80%8B%E2%80%8Bin%20css%20(detailed%20explanation%20with%20pictures%20and%20text) "153974350337740A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)")
The basic syntax of hsla() and color value
hsla() in
##css:hsla(H,S,L,A);H, S, L of hsla() are the same as hsl(), they are It represents hue, saturation, and brightness, and the basic settings are the same, so I won’t introduce them here. Let’s take a look at the A attribute value of hsla(): A (transparency: Alpha): The value is a number between 0 and 1, where 0 represents opaque and 1 represents completely transparent. Let’s take a look at how hsla() sets the color value through a simple code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{width: 400px;height: 240px;margin: 50px auto;}
.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }
.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }
.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }
.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }
.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }
</style>
</head>
<body>
<div class="demo">
<div class="hslaL1"></div>
<div class="hslaL2"></div>
<div class="hslaL3"></div>
<div class="hslaL4"></div>
<div class="hslaL5"></div>
<div class="hslaL6"></div>
</div>
</body>
</html>Rendering: %20and%20hsla()%20to%20set%20color%20values%20%E2%80%8B%E2%80%8Bin%20css%20(detailed%20explanation%20with%20pictures%20and%20text) "153974447468790A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)")
background:hsla(165, 35%, 50%, 0.2); background:hsla(165, 35%, 50%, 0.4); background:hsla(165, 35%, 50%, 0.6); background:hsla(165, 35%, 50%, 0.8); background:hsla(165, 35%, 50%, 1.0);Let’s take a look at the browser compatibility of hsl() and hsla():
Currently hsl() and hsla() are available in Firefox, Browsers such as Google Chrome and Safari have good support and can be used without any prefix.
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Basics Video Tutorial, CSS3 Video Tutorial, bootstrap Video Tutorial
! ###The above is the detailed content of A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text). For more information, please follow other related articles on the PHP Chinese website!