CSS 函数 - hsl()_CSS 菜鸟教程

CSS 中的 hsl（） 函数用于根据这些颜色通道的色调、饱和度和亮度分量，使用红色、绿色和蓝色通道定义颜色。它允许您通过指定这三种原色中每一种的强度来指定颜色。

要添加颜色透明度，可以将可选的 alpha 组件传递给 hsl（） 函数。

使用单个公式，可以使用 hsl（） 定义互补色。如果一种颜色的色相角为 0，则其互补色的色相角将为 180deg - 0。

旧函数 hsla（）是函数 hsl（）的别名，它们都接受相同的参数并以相同的方式运行。

可能的值

hsl（） 函数的函数表示法是 hsl（H S L[ / A]）。

H：可以包含表示色相角度的任一格式：
- a<number>：0 到 255 之间的任何数字。
- <angle>：0 度到 360 度之间的任何值。
- 关键词 none
S：可以包含表示饱和度的任一格式：
- <percentage>：介于 0%（完全饱和）和 100%（完全不饱和）之间的任何值。
- 关键词 none
L：可以包含代表亮度的任一格式：
- <percentage>：0%（全黑）、100%（全白）和 50%（正常）之间的任何值。
- 关键词 none
A：代表颜色的透明度。它是一个可选值。
- <alpha-value>：0 到 1 之间的任何数字，其中 1 对应于完全不透明度，0 对应于完全透明。
- 关键词 none

红色、绿色和蓝色分量的值在序列化中四舍五入，因为函数表示法将其序列化为 sRGB。

语法

hsl(60deg 25% 50%) | hsl(60deg, 25%, 50%) | hsl(60deg 25% 50% / 0.5)

CSS hsl（） - 带或不带 alpha 值

以下示例显示了 hsl（）函数的用法，其中所有三个值都带有 alpha 值（数字值）和不带 alpha 值（数字值）：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.color-hsl-nocomma{
	 	 	 background-color: hsl(70deg 60% 80%);
	 	}
	 	.color-hsl-comma{
	 	 	 background-color: hsl(20deg, 90%, 20%);
	 	 	 color: white;
	 	}
	 	.color-hsl-alpha-number{
	 	 	 background-color: hsla(20deg 80% 60% /1);
	 	}
	 	.color-hsl-alpha-percent{
	 	 	 background-color: hsla(90deg 80% 60% /0.6);
	 	}
	 	</style>
</head>
<body>
	 	<div class="color-hsl-nocomma">hsl(70deg 60% 80%)</div>
	 	<div class="color-hsl-comma">hsl(20deg, 90%, 20%)</div>
	 	<div class="color-hsl-alpha-number">hsla(20deg 80% 60% /1)</div>
	 	<div class="color-hsl-alpha-percent">hsla(90deg 80% 60% /0.6)</div>
</body>
</html>

CSS hsl（） - 使用 'none' 作为值之一

以下示例显示了 hsl（）函数的用法，其中一个值为 None（色调、饱和度、亮度和 alpha 值）：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.hsl-hue-none{
	 	 	 background-color: hsl(none 60% 80%);
	 	}
	 	.hsl-sat-none{
	 	 	 background-color: hsl(20deg, none, 20%);
	 	
	 	}
	 	.hsl-light-none{
	 	 	 background-color: hsla(20deg 80% none /1);
	 	 	 color: white;
	 	}
	 	.hsl-alpha-none{
	 	 	 background-color: hsla(90deg 80% 60% /none);
	 	}
	 	</style>
</head>
<body>
	 	<div class="hsl-hue-none">hsl(none 60% 80%)</div>
	 	<div class="hsl-sat-none">hsl(20deg, none, 20%)</div>
	 	<div class="hsl-light-none">hsla(20deg 80% none /1)</div>
	 	<div class="hsl-alpha-none">hsla(90deg 80% 60% /none)</div>
</body>
</html>

CSS hsl（） - 使用 conic-gradient（）

以下示例显示了 conic-gradient（）函数中 hsl（）函数的用法：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid black;
	 	 	 margin-bottom: 10px;
	 	}
	 	.hsl-conic{
	 	 	 background: conic-gradient(hsl(270 100% 50%),
	 	 	 hsl(180 100% 50%),
	 	 	 hsl(0 100% 50%),
	 	 	 hsl(90 100% 50%));
	 	}
	 	</style>
</head>
<body>
	 	<p>hsl() with conic-gradient()</p>
	 	<div class="hsl-conic"></div>
</body>
</html>

<< CSS 函数 - hwb() CSS 函数 - rgb() >>