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%);
   }