HEX、RGB、HSL 各管什么？调色时该用哪个

HEX 和 RGB 都是对同一个颜色空间的两种记法，信息量完全相同；HSL 换了个角度，把颜色拆成色相、饱和度、明度三个可独立调节的维度。差别不在精度，在可操作性。

什么时候用 HEX

复制粘贴、设计稿交付、写死一个品牌色。它的优点是短、无歧义、能直接塞进任何地方。#RRGGBB 每两位一个通道，#RGB 是简写形式（#f00 等于 #ff0000）。

8 位写法 #RRGGBBAA 带透明度，但可读性差，团队协作里不如 rgb(0 0 0 / 50%) 直观。

什么时候用 RGB

需要按通道微调的时候，比如「蓝色通道再压一点让阴影偏暖」。以及做半透明叠加时，现代语法更清楚：

background: rgb(43 89 255 / 12%);

这个写法比 rgba(43,89,255,0.12) 短，也比 8 位 HEX 好读。

什么时候用 HSL

生成色阶、做 hover 态、构建主题变量。因为调色时人脑想的是「同一个色相，再深一点」，而不是「把 R 减 20」。

--brand:        hsl(227 100% 58%);
--brand-hover:  hsl(227 100% 50%);   /* 只改明度 */
--brand-subtle: hsl(227 100% 96%);   /* 只改明度，做浅底 */

同理，做禁用态通常是降饱和：hsl(227 20% 70%)，比手动调灰更不容易跑偏。

HSL 的局限：感知亮度不均匀

HSL 的 L 是数学上的亮度，不是人眼感知的亮度。同样 L=50%，黄色看起来比蓝色亮得多。所以严格做设计系统时，HSL 生成的多色阶会显得参差不齐。

更现代的选择是 OKLCH：它的 L 接近感知亮度，同样 L 值下不同色相看起来明度一致。浏览器支持已经不错，降级方案是保留 HSL 变量作为 fallback。做小项目时用 HSL 足够，做多主题系统才值得引入。

一个实用检查

文字和背景的对比度是否达标，跟用什么格式无关，但调的时候容易忘。正文对比度至少 4.5:1，大号标题 3:1。用 HSL 微调时，把 L 拉开 40 个百分点以上通常才安全——浅灰字配白底是最常见的翻车点。