什么是色彩模型？
色彩模型是用数学元组描述颜色的体系。与其说"那种暖橙红色"，设计师可以用 #FF4500、rgb(255, 69, 0) 或 hsl(16, 100%, 50%) 来精准表达——无歧义、可复现、跨工具传递。
对颜色的系统化描述需求由来已久。1666 年，艾萨克·牛顿用三棱镜将白色阳光分解成彩虹光谱，证明"白光"包含所有可见色。但光谱本身并不能告诉我们如何混合或规范化一种颜色。
1905 年，艾伯特·孟塞尔提出了第一套实用色彩秩序体系，他将颜色排列在三个轴上——色相（Hue）、明度（Value）和饱和度（Chroma）——构成一棵感知树。这个体系是 HSL 和 HSV 的直接前身。
现代科学基础于 1931 年奠定。国际照明委员会（CIE）发布了 CIE 1931 XYZ 色彩空间——第一个基于人类观察者配色实验、严格数学化、设备无关的颜色描述标准。计算机中使用的所有色彩模型最终都可追溯到这一标准。
数字时代带来了硬件驱动的模型。CRT 显示器通过混合红、绿、蓝荧光点发光（RGB）；喷墨打印机喷涂青、品红、黄、黑墨水（CMYK）。每种介质都需要自己的模型，而在它们之间转换的需求，催生了你现在正在使用的这类工具。
RGB —— 屏幕的语言
RGB（红、绿、蓝）是一种加色模型。叠加光线会增加亮度；三个通道全部最大值（255, 255, 255）得到白色；全为零得到黑色。这与显示器、电视和手机屏幕的工作原理完全一致——数百万个像素，每个都是一组红、绿、蓝子像素，以不同强度发光。
每个通道取值范围为 0 到 255（8 位，256 个等级），共有 256³ = 16,777,216 种不同颜色，即常说的"24 位真彩色"。对于 HDR 显示器，每通道 10 位（1024 个等级）正逐渐成为标准。
RGB 是 CSS、Canvas API、WebGL 着色器和图像处理库的原生语言。它的弱点在于感知直觉性差——若想让一种蓝色稍微亮一点，你不知道该调哪个数字。
HEX —— 网页的紧凑色彩记法
HEX 只是用十六进制编码的 RGB。每个通道（十进制 0–255）转换为两位十六进制字符串（00–FF），整个颜色以 # 为前缀。
255 十进制 = FF 十六进制
128 十进制 = 80 十六进制
0 十进制 = 00 十六进制
因此 rgb(255, 128, 0) 变为 #FF8000。这种格式简洁、可直接复制粘贴，广泛应用于 HTML、CSS 和设计工具的色板中。
当每个通道两位数字相同时，可用简写形式：#FF8800 → #F80。CSS 还支持 8 位形式 #RRGGBBAA，用于带透明度的颜色（如 #FF800080 = 50% 透明橙色）。
HEX 对开发者很方便，但在语义清晰度上并不优于 RGB——在没有拾色器的情况下调整颜色仍是反复试错。
HSL —— 为人类设计的模型
HSL（色相、饱和度、亮度）以贴合人类直觉的方式重新组织了色彩空间：
- 色相 H：色轮角度，0°–360°。红色 = 0°，黄色 = 60°，绿色 = 120°，青色 = 180°，蓝色 = 240°，洋红色 = 300°，再回到红色 = 360°。
- 饱和度 S：0%–100%。为 0% 时所有颜色变为灰色；100% 时颜色最为鲜艳。
- 亮度 L：0%–100%。0% 恒为黑色；100% 恒为白色；50% 为"纯"色相。
这让设计操作变得自然："让这个颜色亮 20%" 只需将 L: 50% 调为 70%；"降低一半饱和度" 就是 S: 80% → 40%。CSS hsl() 在设计系统中被广泛使用，因为它允许通过简单的算术运算来调整颜色。
HSL 是 RGB 立方体的圆柱重映射，计算效率高，但有感知上的缺陷：hsl(60, 100%, 50%)（黄色）看起来比 hsl(240, 100%, 50%)（蓝色）亮得多，尽管两者的 L 值同为 50%。若需感知均匀性，请使用 Lab 或 oklch。
HSV / HSB —— Photoshop 的模型
HSV（色相、饱和度、明度）又称 HSB（色相、饱和度、亮度），结构上与 HSL 相似，但用**明度（Value）**替换了亮度（Lightness）：
- 明度 V：0%–100%。V=0% 时颜色恒为黑色，无论 H 和 S 是什么。V=100% 时颜色达到最高亮度（但不一定是白色）。
核心区别：在 HSL 中，纯色位于 L=50%；在 HSV 中，纯色位于 V=100%、S=100%。在 HSL 中将 L 提高到 50% 以上会加白（调淡），而 HSV 中没有原生的调淡操作——降低 S 才能加白。
Adobe Photoshop、Illustrator 等大多数专业拾色器使用 HSV/HSB，因为其"全亮度"模型在挑选鲜艳颜色时感觉更自然。设计师通常偏好用 HSV 创建调色板，开发者则偏好用 HSL 编写 CSS。
CMYK —— 印刷模型
CMYK（青、品红、黄、黑）是一种减色模型。与加色的 RGB（叠加光线得到白色）不同，减色模型处理的是纸上的油墨——每种油墨吸收（减去）特定波长，我们看到的是反射光。
- 青色吸收红光；反射蓝+绿
- 品红色吸收绿光；反射红+蓝
- 黄色吸收蓝光；反射红+绿
- 黑色改善阴影深度并节省油墨成本（CMY 混合很难产生真正的黑色）
每个通道用百分比 0–100% 表示。CMYK 是胶版印刷、包装、杂志等一切需要将油墨印到纸张的介质的标准。
重要警示：RGB 与 CMYK 并不能完全互换。 许多鲜艳的 RGB 颜色（荧光绿、电蓝色）超出了 CMYK 色域，印刷时会变得暗淡。在将文件发送到印刷厂之前，务必在 CMYK 模式下打样验证。
CIE L*a*b* —— 感知均匀性
Lab（或 CIELAB）是一种设备无关的色彩空间，设计目标是让相等的数值距离对应相等的感知色差。它由 CIE 于 1976 年创建，用以解决早期模型感知不均匀的问题。
- L* ：亮度，0（黑）到 100（白）
- a* ：绿色（负值）到红色（正值），大约 −128 到 +127
- b* ：蓝色（负值）到黄色（正值），大约 −128 到 +127
Lab 是色彩科学的黄金标准，用于图像编辑（Photoshop 的 Lab 模式）和色差计算（ΔE）。ΔE < 1 人眼无法察觉；ΔE < 3 对大多数印刷工作可以接受。
Lab 是现代 CSS oklch() 的基础，它将 Lab 重新打包为极坐标系（亮度、色度、色相），更易于使用。
RGBA 与 HSLA —— 透明度
RGB 和 HSL 都支持Alpha 通道——第四个值，从 0（完全透明）到 1（完全不透明）——分别形成 RGBA 和 HSLA。
rgba(255, 99, 71, 0.5) /* 番茄色，50% 不透明 */
hsla(9, 100%, 64%, 0.7) /* 相同颜色，70% 不透明 */
现代 CSS 还支持斜杠语法：rgb(255 99 71 / 50%)。Alpha 合成遵循 Porter-Duff"over"操作：最终显示颜色是图层颜色与背后内容按 Alpha 值混合的结果。
数学转换公式
RGB ↔ HEX
// RGB 转 HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(v).toString(16).padStart(2, '0'))
.join('');
}
// HEX 转 RGB
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
RGB ↔ HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}
色彩空间与配置文件
色彩空间定义了设备或文件能表示的可见颜色子集：
| 色彩空间 | 覆盖范围 | 典型用途 |
|---|---|---|
| sRGB | ~35% 可见光 | 网页、标准显示器、JPEG |
| Adobe RGB | ~50% 可见光 | 专业摄影、印刷 |
| Display P3 | ~45% 可见光 | iPhone、Mac、现代显示器 |
| ProPhoto RGB | ~90% 可见光 | RAW 照片编辑 |
| Rec. 2020 | ~75% 可见光 | HDR 视频、4K 广播 |
网页设计师绝大多数在 sRGB 下工作，这是 CSS、PNG 和 JPEG 默认的色彩空间。然而，Safari 和 Chrome 现在支持 CSS color() 函数配合 display-p3，以及可引用 sRGB 之外颜色的 oklch() 函数。
ICC 配置文件是告知软件如何将颜色数值映射到真实光线的数据文件。导出图像时"嵌入配置文件"，可确保颜色在不同设备上保持一致。
CSS 颜色用法
CSS 已经从基本的十六进制值发展成丰富的颜色生态系统：
:root {
--primary: #3B82F6;
--primary-hsl: hsl(217, 91%, 60%);
/* oklch 用于 P3 宽色域 */
--accent: oklch(70% 0.2 250);
}
.text-accessible {
color: #1a1a1a; /* 白底对比度 16.1:1 — AAA 级 */
background: #ffffff;
}
命名颜色：CSS 定义了 140 个命名颜色，从 aliceblue 到 yellowgreen，可读性强但灵活性差。
现代颜色函数：
rgb(255 99 71)— 现代空格分隔语法hsl(9deg 100% 64%)— 可读、易调整oklch(70% 0.2 250)— 感知均匀，支持宽色域color(display-p3 1 0.389 0.279)— 显式宽色域
CSS 自定义属性（变量）是现代主题化的基石。基于 HSL 的变量可以通过算术运算轻松生成完整的色阶，也让暗色模式切换变得优雅。
无障碍访问与对比度
WCAG（网页内容无障碍指南）规定了文字可读性的对比度要求：
- AA 级：普通文字 4.5:1，大字体 3:1（18pt 或 14pt 加粗）
- AAA 级：普通文字 7:1，大字体 4.5:1
对比度由相对亮度计算得出：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中 L1 为较亮颜色的亮度，L2 为较暗颜色的亮度。
常见安全组合：黑色（#000000）配白色（#ffffff）= 21:1（完美 AAA）；#767676 灰色配白色 = 恰好 4.5:1（AA 通过）。
设计工具中的颜色处理
Figma：内部以 RGB 存储颜色。拾色器提供 HEX、RGB、HSL、HSB 和 CSS 表示。设计令牌（变量）可通过 Figma Variables API 发布到代码，导出为 CSS 自定义属性或 JSON。
Sketch：使用 RGB 命名色板和共享颜色库，支持印刷交付物的 CMYK 导出提示。Stark 等插件可添加 WCAG 对比度检查。
Adobe Photoshop / Illustrator：原生支持 CMYK、Lab 和色彩配置文件工作流程。Photoshop 拾色器默认使用 HSB（HSV）。Illustrator 的"重新着色图稿"功能使用 HSB 进行调色板和谐操作。
应用场景：品牌规范、设计令牌与跨媒介一致性
品牌规范为组织定义了权威颜色集。一个完整的品牌颜色规范可能是：
Pantone 286 C
CMYK: 100 / 72 / 0 / 18
RGB: 0 / 84 / 166
HEX: #0054A6
这种多格式规范确保这种蓝色无论是丝网印在 T 恤上、印刷在宣传册里，还是显示在网站上，看起来都保持一致。
设计令牌是将语义角色映射到颜色值的具名变量。Style Dictionary 等工具可将令牌转换为平台特定文件：Web 的 CSS 变量、iOS 的 Swift 常量、Android 的 XML 资源。
对比：HSL vs HSV，sRGB vs 宽色域
HSL vs HSV：两者都源自 RGB，感知均匀性都不足。HSL 的纯色在 L=50%，HSV 的纯色在 V=100%、S=100%。HSV 更适合拾色器 UI，HSL 更适合 CSS 操作。要获得真正的感知均匀性，应使用 oklch/Lab。
sRGB vs 宽色域：sRGB 约覆盖 CIE 1931 马蹄形 35%，对大多数网页工作足够。Display P3 覆盖约 45%，在现代 Apple/Samsung 屏幕上能显示更鲜艳的绿色和红色。CSS @media (color-gamut: p3) 允许渐进增强。
色彩管理最佳实践
- 尽早确定色彩空间——以 sRGB 为默认，渐进增强至 P3。
- CSS 变量使用 HSL——便于数学生成色阶和主题切换。
- 品牌颜色提供多种格式——Pantone、CMYK、RGB、HEX 一个不少。
- 每个文字-背景组合都检查 WCAG 对比度。
- 导出图像时嵌入 ICC 配置文件。
- 设计系统中使用语义令牌而非原始十六进制值。
- 暗色模式下测试颜色：基于 HSL 的变量让暗色模式主题化更优雅。
- 不要假设 RGB 等于 CMYK：关键色彩资产务必与印刷供应商确认打样。
- 现代 CSS 考虑使用 oklch——兼顾感知均匀性和宽色域支持。
- 记录颜色决策：记录颜色选择的原因——无障碍依据、品牌历史、情感意图。
常见问题解答
Q1：HEX 和 RGB 有什么区别？
它们以不同方式表示相同信息。#FF8000 和 rgb(255, 128, 0) 是完全相同的颜色——HEX 只是使用了十六进制记法。HEX 更紧凑；RGB 对大数字更直观。
Q2：为什么我的 RGB 颜色印出来不一样？ 屏幕是加色的（发光），印刷是减色的（油墨）。许多鲜艳的屏幕颜色——尤其是电蓝色和荧光绿——无法用油墨重现，会被"色域映射"到最近的可印色，看起来更暗淡。
Q3：什么时候用 HSL，什么时候用 HSV？ 编写 CSS 或构建设计令牌时用 HSL；在 Photoshop/Illustrator 拾色器中工作或构建自定义拾色器组件时用 HSV。
Q4：oklch 是什么？为什么比 HSL 更好？
oklch 是使用 Oklab 感知色彩空间的 CSS 颜色函数。与 HSL 不同，它在不同色相间保持一致的感知亮度，并支持宽色域 Display P3 颜色。
Q5：如何检查两种颜色的对比度是否足够？
分别计算两种颜色的相对亮度，然后用公式：(较亮 + 0.05) / (较暗 + 0.05)。结果需 ≥ 4.5 才能通过 WCAG AA。本工具内置了对比度检查器。
Q6：本工具的 RGB→CMYK 转换准确吗？ 数学转换是设备无关的近似值。专业印刷工作需要针对特定打印机和纸张的 ICC 颜色配置文件——转换结果因印刷机类型差异显著。本工具适合估算参考；正式印刷前务必向印刷商确认打样。