颜色格式

HEX、RGB 与 HSL 有什么区别？

理解 HEX、RGB 和 HSL 如何表示同一种屏幕颜色、Alpha 如何工作，以及每种 CSS 格式适合什么场景。

发布于 2026/7/5 ·更新于 2026/7/5

HEX、RGB 和 HSL 是颜色在 sRGB 等色彩空间中的不同记法，它们可以产生完全相同的显示结果：

.sample {
  color: #00ffff;
  color: rgb(0 255 255);
  color: hsl(180 100% 50%);
}

以上三行都表示青色。

HEX 简洁紧凑

六位 HEX 用 00 到 FF 的三组数保存红、绿、蓝。三位格式是简写，#0ff 会展开为 #00ffff；八位格式在末尾加入 Alpha，四位格式则是它的简写。可用十六进制转 RGB 检查这些形式。

RGB 明确列出红、绿、蓝通道，通常范围为 0–255。现代 CSS 可在斜杠后加入透明度：rgb(0 255 255 / 60%)，很适合接收图片或 Canvas API 的数据。

HSL 用角度表示色相，再用百分比表示饱和度和明度。旋转色相或降低饱和度很直观，但相同的 HSL 步长并不代表相同的视觉差异，现代均匀色阶可考虑 OKLCH。

没有一种格式适合所有情况。项目应保持一个稳定的源格式，只在边界转换，并在需要时保留 Alpha。RGB 转十六进制工具还能同时显示 HSL、HSV 和 OKLCH。