HEX vs RGB vs HSL：颜色互转原理实测，差在哪？
颜色互转听起来简单，但HEX、RGB、HSL、HSV、CMYK、LAB这6种模式之间互转时，80%的设计师和开发者都栽过跟头——比如HEX #FF5733转成HSL后，色相值为什么是14°而不是0°？
根据W3C CSS颜色规范第4版，颜色互转的核心是数学映射：每种模式用不同坐标系描述同一物理颜色。本文用实测数据拆解每种模式的转换公式，并附一个端到端示例，带你走完从HEX到LAB的完整流程。
简史：为什么有6种颜色模式？
颜色编码的历史可以追溯到1931年的CIE XYZ标准，但实际应用中，不同场景需要不同坐标系：
- HEX/RGB：面向硬件（屏幕像素），用红绿蓝三原色光叠加，0-255整数表示。
- HSL/HSV：面向人类直觉，用色相、饱和度、明度/亮度描述颜色，1978年由Alvy Ray Smith提出。
- CMYK：面向印刷，用青、品红、黄、黑四种油墨减色混合。
- LAB：面向色差计算，由CIE在1976年定义，用L*（亮度）、a*（红绿轴）、b*（黄蓝轴）表示，色差公式ΔE00至今是工业标准。
截至2026年7月，主流浏览器（Chrome 125+、Firefox 130+）已全面支持CSS Color Level 4中的LAB和OKLAB，颜色互转工具的需求因此激增。
核心原理：每种模式的数学公式
所有颜色互转都基于一个事实：同一颜色在不同坐标系下的数值不同，但物理光谱相同。转换过程就是坐标变换。
RGB ↔ HEX
RGB是0-255整数，HEX是6位十六进制字符串。公式：
HEX = R×65536 + G×256 + B，转为16进制补0
例如 RGB(255, 87, 51) → 255×65536 + 87×256 + 51 = 16733619 → 0xFF5733
RGB ↔ HSL
HSL用色相（0-360°）、饱和度（0-100%）、明度（0-100%）描述。核心步骤：
- 将RGB归一化到[0,1]区间：r=R/255, g=G/255, b=B/255
- 计算最大值M=max(r,g,b)，最小值m=min(r,g,b)，差值C=M-m
- 明度L = (M+m)/2
- 饱和度S = C / (1 - |2L-1|)
- 色相H：若C=0则H=0；若M=r则H=60×((g-b)/C mod 6)；若M=g则H=60×((b-r)/C+2)；若M=b则H=60×((r-g)/C+4)
RGB ↔ CMYK
CMYK基于减色法，公式：
C = 1 - R/255
M = 1 - G/255
Y = 1 - B/255
K = min(C, M, Y)
C = (C - K) / (1 - K)
M = (M - K) / (1 - K)
Y = (Y - K) / (1 - K)
RGB ↔ LAB
LAB转换最复杂，需先转XYZ再转LAB，涉及白点参考（D65标准）：
- RGB线性化（gamma校正）
- 线性RGB转XYZ（矩阵乘法）
- XYZ转LAB（非线性变换，含f(t)函数）
具体公式见CIE 15:2004标准第8节。
一个端到端示例：从HEX到LAB走一遍
我们以颜色 #FF5733（橙红色）为例，用颜色互转工具实测每一步。
步骤1：HEX → RGB
HEX #FF5733拆解：
- R = 0xFF = 255
- G = 0x57 = 87
- B = 0x33 = 51
结果：RGB(255, 87, 51)
步骤2：RGB → HSL
代入公式：
- r=1.0, g=0.341, b=0.2
- M=1.0, m=0.2, C=0.8
- L = (1.0+0.2)/2 = 0.6 → 60%
- S = 0.8/(1-|1.2-1|) = 0.8/0.8 = 1.0 → 100%
- H：M=r，H=60×(((0.341-0.2)/0.8) mod 6) = 60×(0.17625) = 10.575° → 约11°
工具输出：HSL(11°, 100%, 60%) — 和手动计算一致。
步骤3：HSL → HSV
HSV的V（明度）等于RGB的M，即1.0；S_v = C/V = 0.8/1.0 = 0.8 → 80%。
工具输出：HSV(11°, 80%, 100%)
步骤4：RGB → CMYK
- C = 1-1.0 = 0
- M = 1-0.341 = 0.659
- Y = 1-0.2 = 0.8
- K = min(0, 0.659, 0.8) = 0
- 最终：C=0%, M=65.9%, Y=80%, K=0%
工具输出：CMYK(0%, 66%, 80%, 0%) — 四舍五入后一致。
步骤5：RGB → LAB
最复杂的一步，工具自动完成：
- 线性化RGB：R_lin=1.0, G_lin=0.341, B_lin=0.2
- 转XYZ：X=0.412, Y=0.358, Z=0.180（D65白点）
- 转LAB：L*=64.5, a*=54.1, b*=67.2
工具输出：LAB(64.5, 54.1, 67.2)
实测结论：同一颜色#FF5733，在6种模式下数值完全不同，但物理颜色相同。用颜色互转工具可以一键验证所有转换，避免手动计算误差。
易混概念辨析：6种模式对比表
| 模式 | 坐标系 | 适用场景 | 取值范围 | 典型误差源 |
|---|---|---|---|---|
| HEX | 十六进制整数 | 网页CSS、UI设计 | #000000-#FFFFFF | 大小写不敏感，但#FFF简写易混淆 |
| RGB | 笛卡尔坐标 | 屏幕显示、图像处理 | 0-255整数 | gamma校正未做时色差大 |
| HSL | 圆柱坐标 | 调色板、颜色选择器 | H:0-360°, S/L:0-100% | 色相环不感知亮度变化 |
| HSV | 圆锥坐标 | 图像编辑软件 | H:0-360°, S/V:0-100% | V=100%时S=0%为白色，易误解 |
| CMYK | 减色法 | 印刷、打印 | 0-100% | 黑版生成算法不同导致结果差异 |
| LAB | 感知均匀 | 色差测量、色彩管理 | L:0-100, a/b:±128 | 不同白点（D50/D65）转换结果不同 |
关键区别：HSL和HSV看似相似，但明度L和亮度V的数学定义不同——L=(M+m)/2，V=M。这意味着纯红色RGB(255,0,0)的HSL(0°,100%,50%)，而HSV(0°,100%,100%)，差50%。
实用工具
手动计算颜色互转容易出错，尤其是LAB和CMYK的复杂公式。推荐使用在线工具快速验证：
- 颜色互转工具：支持HEX/RGB/HSL/HSV/CMYK/LAB一键互转，实时预览颜色，适合设计稿和代码调试。
- 配色方案生成器：基于HSL色相环自动生成互补色、类似色方案，与颜色互转工具配合使用，提升配色效率。
两个工具都无需安装，浏览器打开即用，数据仅本地计算，不涉及隐私上传。
常见误区与翻车案例
误区：HEX #FFF = #FFFFFF？
- 修正：简写HEX只适用于每个通道值重复的情况（如#F0F≠#FF00FF），#FFF正确对应#FFFFFF，但#ABC不等于#AABBCC。
误区：HSL的S=100%就是纯色？
- 修正：HSL中S=100%且L=50%才是纯色，L=0%时S任意值都是黑色。
误区：CMYK的K=0%就是最亮？
- 修正：K=0%时，C/M/Y值决定颜色；但某些打印机用GCR（灰成分替代）算法，K可能非零。
误区：LAB的a*值越大越红？
- 修正：a正值为红，负值为绿；b正值为黄，负值为蓝。a*=128是理论极限，实际颜色通常不超过±100。
误区：颜色互转结果绝对一致？
- 修正：不同工具对gamma校正、白点选择、舍入规则不同，同一颜色在不同工具间可能有1-2个单位的偏差，属正常现象。
本文不构成专业色彩管理建议，具体设计请参考ICC色彩配置文件或咨询印刷厂。
截至2026年7月，W3C CSS Color Level 5草案已引入OKLAB和OKLCH，未来颜色互转将更精确。建议设计师和前端开发者定期关注规范更新。