HEX、RGB、HSL、CMYK 该用哪个

四种格式描述的是同一件事：一个颜色。差别在表达方式适合什么操作。

格式	本质	适合
HEX #1a73e8	RGB 的十六进制写法	写进代码、设计稿交付
RGB rgb(26,115,232)	三个 0~255 通道	需要按通道算的时候
HSL hsl(214,76%,51%)	色相 / 饱和度 / 亮度	手动调色、生成色阶
CMYK	青品黄黑四色油墨比例	印刷

HEX 只是 RGB 的另一种写法

#1a73e8 拆成 1a 73 e8，就是 26、115、232 三个字节的十六进制。两位十六进制 = 一个字节 = 一个通道，所以 HEX 天生紧凑（7 个字符），这也是它在 CSS 里用得最多的原因。

简写规则：每两位相同才能缩成三位。#ffffff → #fff 可以，#1a73e8 不行。

带透明度的 8 位写法 #1a73e880 最后两位是 alpha，80 = 128/255 ≈ 50%。老浏览器不认，要兼容就用 rgba()。

HSL 适合「调」，HEX 适合「存」

想让一个主色衍生出 hover、pressed、disabled 三种状态，用 HSL 只需要改一个数字：

--primary: hsl(214, 76%, 51%);
--primary-hover: hsl(214, 76%, 45%);   /* 只改亮度 */
--primary-active: hsl(214, 76%, 39%);

用 HEX 就得先转成 RGB 再凭感觉调，调完还要担心色相漂移。

但 HSL 有两个必须知道的局限：

一、L 不是「感知亮度」

hsl(60, 100%, 50%) 是纯黄，hsl(240, 100%, 50%) 是纯蓝。两者 L 都是 50%，但黄色看起来亮得多 —— 因为人眼对绿、黄波段的敏感度远高于蓝。

这意味着「把所有颜色的 L 都设成 50%」不会得到亮度一致的一组色。要做真正等亮度的色阶，得用 OKLCH / LCH（现代 CSS 已支持 oklch()），或者手动补偿。

二、降低 L 在暗色主题下会失效

白底上的 hover 状态通常「加深一点」，L: 51% → 45% 看着很清楚。但同一个色值放到暗色背景（#111）上，加深等于让按钮消失在背景里。

正确做法是区分「背景色」和「前景色」两个变量，暗色主题下分别定义，而不是在同一个色值上做算术。这一点在对比度那篇里有具体的验收线。

色相环上的实用角度

记几个位置就够日常用：

关系	角度差	用途
同类色	0~15°	色阶、hover
邻近色	30~60°	和谐的配色
互补色	180°	强调、对比（慎用大面积）
三角配色	120°	三个主色

生成一组配色时，固定 S 和 L，只把 H 按 30° 或 45° 递进，比随手挑颜色稳定得多。

CMYK：屏幕上的颜色印不出来

RGB 是发光，色域宽；CMYK 是反光（油墨吸光），色域窄。两者不重合的部分就是「设计稿很好看，印出来发灰」的原因。

最典型的三个问题色：

• 荧光绿、亮橙：超出 CMYK 色域，印出来必然暗淡
• 纯黑 #000000：印刷用四色叠出来的黑会发灰、油墨过厚，应该用单色黑（K=100）
• 浅色大面积底：屏幕上的 #f5f5f5 印出来可能几乎看不见

要印的东西，一开始就在 CMYK 模式下取色，别等印厂说「这个颜色做不出来」。

一个常被忽略的问题：颜色不该散落在代码里

同一个主色在 CSS、图表配置、canvas 绘制、邮件模板里各写一遍 #1a73e8，改品牌色那天必然漏掉几处。

正确做法是定义 CSS 变量或设计 token：

:root {
  --brand: #1a73e8;
  --brand-strong: #1557b0;
}

需要同时给 canvas 或第三方库用颜色值，就从一个源导出，而不是复制粘贴。

转换与取色

临时要转一个色值、看某个 HEX 的 CMYK 近似值、或者把设计给的颜色换成 HSL 好做色阶，用颜色转换器，四种格式同时显示，改一侧其余立刻更新。

做图需要把取到的颜色统一批处理（比如给一批图换底色），用图片格式转换配合调色，比逐张打开设计软件快。

---

挑格式的口诀：写进代码用 HEX，调色阶用 HSL，印刷必须 CMYK，需要透明度看场景（8 位 HEX 或 rgba）。至于「这个颜色可读吗」，那是另一套标准 —— 对比度，不属于颜色格式能解决的问题。