CSS hsl() 函数 详解
css3基础 2023-07-29 16:33:44小码哥的IT人生shichen
CSS hsl() 函数
实例
定义不同的 HSL 颜色：
#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%);} /* 浅绿色 */
#p3 {background-color:hsl(120,100%,25%);} /* 深绿色 */
#p4 {background-color:hsl(120,60%,70%);} /* 柔绿色 */
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body>
<p>HSL 颜色：</p>
<p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">淡绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
hsl() 函数使用 Hue-saturation-lightness 模型（HSL）定义颜色。
HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。
| 版本： | CSS3 |
|---|
浏览器支持
表格中的数字注明了完全支持该功能的首个浏览器版本。
| 函数 | |||||
|---|---|---|---|---|---|
| hsl() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS 语法
hsl(hue, saturation, lightness)
| 值 | 描述 |
|---|---|
| hue | 定义色轮上的度数（从 0 到 360）- 0（或 360）为红色，120 为绿色，240 为蓝色。 |
| saturation | 定义饱和度 - 0％ 是灰度，而 100％ 是全彩色（完全饱和）。 |
| lightness | 定义亮度 - 0％ 是黑色、50％ 为正常、100％ 是白色。 |
