hsl 是一种表示颜色的 CSS 属性值，它代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。hsl 提供了一种更直观的方式来定义颜色，特别是对于设计师和前端开发者来说。
语法
color: hsl(hue, saturation, lightness);
hue（色相）：表示颜色的角度，范围是 0 到 360 度。0 度是红色，120 度是绿色，240 度是蓝色。saturation（饱和度）：表示颜色的鲜艳程度，范围是 0% 到 100%。0% 是灰色，100% 是全色。lightness（亮度）：表示颜色的明暗程度，范围是 0% 到 100%。0% 是黑色，100% 是白色。
示例
/* 红色 */
color: hsl(0, 100%, 50%);/* 绿色 */
color: hsl(120, 100%, 50%);/* 蓝色 */
color: hsl(240, 100%, 50%);/* 灰色 */
color: hsl(0, 0%, 50%);
使用示例
以下是一个使用 hsl 定义背景颜色的示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HSL Example</title><style>.red {background-color: hsl(0, 100%, 50%);}.green {background-color: hsl(120, 100%, 50%);}.blue {background-color: hsl(240, 100%, 50%);}.gray {background-color: hsl(0, 0%, 50%);}</style>
</head>
<body><div class="red">Red</div><div class="green">Green</div><div class="blue">Blue</div><div class="gray">Gray</div>
</body>
</html>
总结
hsl是一种表示颜色的 CSS 属性值，代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。- 提供了一种更直观的方式来定义颜色，特别适合设计师和前端开发者。
- 语法为
hsl(hue, saturation, lightness)，其中hue的范围是 0 到 360 度，saturation和lightness的范围是 0% 到 100%。