css中 hsl() 的用法

好的 👍 我来详细介绍一下 CSS hsl() 的用法。

---

1. 基本语法

color: hsl(hue, saturation, lightness);

• hue（色相）

  • 取值范围：0 ~ 360（角度值，代表色环的角度）
  • 0 或 360 → 红色
  • 120 → 绿色
  • 240 → 蓝色
  • 其他角度就是这三色之间的过渡

• saturation（饱和度）

  • 取值范围：0% ~ 100%
  • 0% = 灰色（没有颜色）
  • 100% = 最纯的颜色

• lightness（亮度）

  • 取值范围：0% ~ 100%
  • 0% = 黑色
  • 50% = 正常亮度
  • 100% = 白色

---

2. 示例

/* 纯红色 */
color: hsl(0, 100%, 50%);

/* 纯绿色 */
color: hsl(120, 100%, 50%);

/* 纯蓝色 */
color: hsl(240, 100%, 50%);

---

3. 调整亮度和饱和度

/* 低饱和度（灰调红） */
color: hsl(0, 30%, 50%);

/* 高亮度（粉色） */
color: hsl(0, 100%, 80%);

/* 低亮度（暗红） */
color: hsl(0, 100%, 20%);

---

4. 带透明度的写法 ------ hsla()

类似于 rgba()，可以增加一个 alpha（透明度）参数：

/* 半透明蓝色 */
color: hsla(240, 100%, 50%, 0.5);

---

5. 常见应用

1. 渐变背景 （配合 linear-gradient 使用）：

   background: linear-gradient(
     to right,
     hsl(200, 100%, 50%),
     hsl(200, 100%, 80%)
   );

2. 动态主题（用 HSL 调整亮度/饱和度，比 HEX 更直观）：

   :root {
     --theme-hue: 200;
   }
   
   body {
     background: hsl(var(--theme-hue), 50%, 95%);
     color: hsl(var(--theme-hue), 80%, 20%);
   }

---