← 返回博客

HSL 颜色值使用完全指南

2026-04-07 · 5 分钟阅读

理解 HSL 三个参数

HSL 是色调（Hue）、饱和度（Saturation）、亮度（Lightness）的缩写，是一种比 HEX 和 RGB 更符合人类直觉的颜色表示方法。

hsl(H,   S%,  L%)
hsl(220, 80%, 50%)  /* Medium blue */
hsl(0,   0%,  50%)  /* Middle gray */
hsl(45,  100%, 60%) /* Golden yellow */

CSS 中 HSL 的语法

在 CSS 中使用 hsl() 函数表示颜色，现代 CSS 规范也支持使用空格分隔而不使用逗号：

/* Traditional comma syntax */
color: hsl(220, 80%, 50%);
background: hsla(220, 80%, 50%, 0.5);

/* Modern space syntax (CSS Color Level 4) */
color: hsl(220 80% 50%);
color: hsl(220 80% 50% / 0.5); /* with alpha */

两种语法在现代浏览器中均有效。推荐使用逗号语法以获得更广泛的浏览器兼容性，或使用空格语法以与 CSS Color Level 4 规范保持一致。

HSL 的最大优势：可预测的颜色调整

HSL 最强大的特性是，你可以通过只修改一个参数来可预测地改变颜色外观。这在 HEX 或 RGB 格式中几乎不可能做到：

在设计系统中使用 HSL 变量

将 HSL 的三个分量拆分为独立的 CSS 自定义属性，是构建灵活设计系统的有力技术：

:root {
  --primary-h: 220;
  --primary-s: 80%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark:  hsl(var(--primary-h), var(--primary-s), 30%);
  --primary-muted: hsl(var(--primary-h), 30%, 60%);
}

/* Dark mode override: just change lightness */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-l: 60%; /* Slightly lighter in dark mode */
  }
}

使用 HSL 实现主题切换

HSL 非常适合实现深色/浅色模式切换。由于颜色的"感觉"（色调和饱和度）保持不变，只需调整亮度值即可实现协调的主题切换，而不会产生颜色感觉突变的问题：

:root {
  --bg: hsl(220, 20%, 98%);
  --text: hsl(220, 20%, 10%);
  --surface: hsl(220, 20%, 94%);
}

[data-theme="dark"] {
  --bg: hsl(220, 20%, 8%);
  --text: hsl(220, 20%, 92%);
  --surface: hsl(220, 20%, 14%);
}

HSL 的局限性

尽管 HSL 对人类非常直观，但它并不是感知均匀的颜色空间。这意味着，不同色调的颜色即使 L 值相同，在人眼看来也可能有明显的亮度差异。例如，hsl(60, 100%, 50%)（黄色）看起来比 hsl(240, 100%, 50%)（蓝色）亮得多，即使两者的 L 值都是 50%。

如需感知均匀的颜色调整，可以考虑使用 CSS Color Level 4 中的 oklch() 函数，它在现代浏览器中获得了越来越广泛的支持。

色轮上的关键色调值

立即免费使用相关工具

免费使用 →