RGB 和 HSL 有什么区别？什么时候该用哪个

一、RGB：面向机器的加色模型

RGB 就是 Red、Green、Blue。它把颜色拆成红、绿、蓝三盏灯的亮度，每盏从 0 调到 255。显示器、手机屏、投影仪，发光的都是这三盏灯，所以 RGB 是机器实际执行的颜色语言。

它叫"加色模型"也是这个原因：三盏灯全灭是黑，全开是白。跟调颜料正好反过来，颜料越混越暗，屏幕越叠越亮。

/* 一个清爽的天蓝 */
background: rgb(52, 152, 219);

二、HSL：面向人类的直观坐标

HSL 换了个角度，用三个肉眼能直接感知的维度来描述颜色：H 色相（是什么颜色）、S 饱和度（艳不艳）、L 明度（亮不亮）。它不关心屏幕怎么发光，只管你看到的是什么。

三个维度分别管什么

• H 色相：0 到 360 度，围成一个色相环。0 是红，120 是绿，240 是蓝。
• S 饱和度：0% 是灰，100% 是最艳。
• L 明度：0% 是黑，100% 是白，50% 附近是正色。

L 到 50% 时颜色最"正"，往上加白变浅，往下加黑变深。hsl(207, 90%, 61%) 里的 61% 就是中等偏亮的蓝，调到 71% 更亮，调到 41% 更深——只动一个数。

/* 同一个天蓝，用 HSL 写 */
background: hsl(207, 90%, 61%);

三、同一颜色两种表示的互转

两者能互转，因为本质是同一个颜色空间的不同坐标。公式不复杂，但手算容易出错，实际用的时候直接上工具更省事。以 RGB→HSL 为例，核心就三步：

RGB 转 HSL 的思路

1. 先把 0–255 归一化到 0–1：r = R / 255，g、b 同理。
2. 取最大值和最小值，算差值 Δ，再得 L = (最大 + 最小) / 2。
3. H 由哪个通道最大决定，S 和 L 一起算出来。

反过来 HSL→RGB 同样是确定性的。日常基本不用手算——

四、写 CSS 时该选哪种

没有哪个更好，只有哪个更顺手。

一个常用做法：把主色拆成 HSL 变量存起来，悬停态用 calc(var(--l) + 8%)，深浅就自动出来了，不用再单独找色值。

:root {
  --brand-h: 207;
  --brand-s: 90%;
  --brand-l: 61%;
}
.btn {
  background: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
}
.btn:hover {
  background: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 8%));
}

五、调色时为什么 HSL 更好用

调色说到底是"在颜色空间里挪动位置"。RGB 的空间对人类不友好：想往"更蓝"走，得同时降 R、降 G、升 B，三个轴绑在一起。HSL 把色相、艳度、亮度拆成三个独立旋钮，调哪个只动哪个。

• 换色系：只转 H，S 和 L 不动，整组颜色一起换 hue，做主题换肤很快。
• 统一质感：固定 H 和 L，只动 S，从灰到艳的一组渐变就出来了。
• 做层次：固定 H 和 S，只动 L，按钮的常态、悬停、按下三档自然有节奏。

简单说：RGB 是机器语言，HSL 是人话。写死一个颜色用 RGB 没问题，但只要涉及"调"，HSL 基本都更省力。