颜色转换详解：HEX/RGB/HSL/CMYK 背后的颜色空间
为什么有这么多颜色表示
同一个红色，CSS 里写 #FF0000、rgb(255,0,0)、hsl(0,100%,50%)，印刷里说 CMYK(0,100,100,0)——它们描述的是同一个颜色，但站在不同的”颜色空间”里。不同空间存在的理由不同：有的贴近设备工作方式，有的贴近人眼感知，有的贴近印刷工艺。转换工具就是把这些表示互相翻译。
RGB：屏幕的加色模型
RGB（Red/Green/Blue）是发光设备（屏幕、投影）的颜色模型，原理是加色法——三种光叠加：
- 三色全开（255,255,255）= 白
- 三色全关（0,0,0）= 黑
- 红绿叠加 = 黄，绿蓝 = 青，红蓝 = 品红
每通道 0255（8 位），共 256³≈1677 万色。CSS 的 1）就是直接用这个。rgb(r,g,b) 和 rgba(r,g,b,a)（a 是透明度 0
RGB 是设备相关的——同一组 RGB 值在不同屏幕上显示的实际颜色不同（屏幕色域、亮度、白点都不同）。所以”RGB 准不准”本质上依赖硬件校准，RGB 数值只是”给屏幕的指令”而非”绝对颜色”。
HEX：RGB 的紧凑写法
HEX 就是 RGB 的十六进制写法，把每通道 0255 写成两位十六进制（00FF）拼起来加 #：
#FF0000=rgb(255,0,0)#00FF7F=rgb(0,255,127)
8 位 HEX #RRGGBBAA 还能带透明度（如 #FF000080 = 半透明红）。HEX 和 RGB 是一一对应的纯数学转换，没有任何信息损失，只是写法紧凑、URL/CSS 里更省字符。设计师习惯 HEX，CSS 也广泛接受两者。
HSL：贴近人眼感知的模型
RGB/HEX 对机器友好，对人很不直观——#4A90D9 是什么颜色？你得心算三个通道。HSL（Hue/Saturation/Lightness）就是为了人脑设计的：
- H（色相 Hue）：0~360°，色环上的角度。0=红，120=绿，240=蓝，绕一圈
- S（饱和度 Saturation）：0~100%，颜色有多纯。0=灰色，100% = 最纯
- L（明度 Lightness）：0~100%，0=黑，50% = 纯色，100% = 白
HSL 的好处是调色直觉化：想变暗就把 L 调小，想变淡就把 S 调小，想换色相只动 H。生成配色方案（如同一色相不同明度）用 HSL 极其方便，这也是为什么 [[css-gradient]] 和配色工具内部常以 HSL 计算。
RGB↔HSL 是确定的数学转换（无损失），但要注意 HSL 的感知不均匀——同样 L=50% 的纯黄和纯蓝，人眼觉得黄色亮得多。HSL 的”明度”是数学定义不是人眼感知明度，做无障碍配色对比度时不能直接信 L 值。
HSL 的近亲：HSV/HSB
容易混淆的还有 HSV（也叫 HSB），和 HSL 只在第三个分量定义上不同：
- HSL 的 L：50% 是纯色，往两边走到黑/白
- HSV 的 V（Value）：100% 是纯色，只往黑走，没有”往白”
HSV 在图像编辑软件（拾色器）里常见，HSL 在 CSS 里用。转换工具通常会区分，别混用。
CMYK：印刷的减色模型
CMYK（Cyan 青/Magenta 品红/Yellow 黄/Key 黑）是印刷的颜色模型，原理是减色法——油墨吸收光：
- 青色油墨吸收红光，品红吸收绿光，黄吸收蓝光
- 三色叠加理论上 = 黑，但实际油墨不够纯，叠出来是暗褐色，所以加专门的黑色（K）补强，也省彩墨
CMYK 是四通道百分比（0~100%）。RGB→CMYK 转换不是无损的，因为屏幕（RGB）色域比印刷（CMYK）色域大很多——很多鲜艳的屏幕颜色（如亮蓝、亮绿）印刷印不出来，转换时会被压缩/裁剪到 CMYK 色域内，结果变暗变浊。这就是为什么”设计稿在屏幕上很亮，印出来发暗”——色域不匹配。
做印刷品设计要在 CMYK 模式下工作、用 CMYK 值指定颜色；做网页设计用 RGB/HEX。两者混用会出问题。
色域与”所见即所得”的真相
更高阶的概念是色域（sRGB / Display P3 / Adobe RGB）和色彩管理。同样一个 #FF0000，在 sRGB 屏幕和 P3 广色域屏幕上，实际发出的红是不同的物理光。现代浏览器和操作系统通过 ICC 配置文件做色彩管理，尽量让同一数值在不同设备显示接近——但本质上 RGB 数值不等于绝对颜色。
日常 Web 开发不用深究，默认就是 sRGB 色域。但做跨媒体（屏幕→印刷）或专业摄影时，色域和色彩管理就是必修课。
什么时候用哪个
| 场景 | 推荐表示 |
|---|---|
| CSS 写色值 | HEX 或 rgb/rgba |
| 程序生成配色、调明暗 | HSL（直觉化） |
| 需要透明度 | rgba 或 8 位 HEX |
| 印刷品设计 | CMYK |
| 无障碍对比度计算 | 用相对亮度（基于 RGB 算），别信 HSL 的 L |
小结
颜色表示的本质是不同颜色空间：RGB/HEX 是屏幕加色模型（设备相关），HSL 是人眼感知友好的表示，CMYK 是印刷减色模型。RGB↔HEX↔HSL 之间是无损数学转换，但 RGB↔CMYK 因色域差异会有损失。选哪个表示取决于场景：屏幕用 RGB/HEX，调色用 HSL，印刷用 CMYK。理解了加色/减色和色域，颜色转换就不再是无意义的数字搬运。