A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)-CSS Tutorial-php.cn

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

青灯夜游

Release： 2018-10-17 11:21:37

Original

6678 people have browsed it

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);

Copy after login

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>

Copy after login

Rendering:

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

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%);

Copy after login

A 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%);

Copy after login

A 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);

Copy after login

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>

Copy after login

Rendering:

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

From the above example, we can see that the hue, saturation, and brightness of these six colors are the same, but different colors are displayed by changing the transparency.

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);

Copy after login

Let’s take a look at the browser compatibility of hsl() and hsla():

A brief discussion on how to use hsl() and hsla() to set color values in css (detailed explanation with pictures and text)

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!