好的 👍 我來詳細介紹一下 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%);
   }
   

---