无论你是前端工程师、UI 设计师，还是偶尔需要在网页上换个颜色的非技术人员，都免不了碰到 #FF6347、rgb(255,99,71)、hsl(9,100%,64%) 这类奇妙数字。它们都代表同一个颜色——番茄红，却用完全不同的方式描述。本文从光学物理出发，逐一解析每种色彩模型的设计逻辑、相互换算的方法，以及在设计与开发实务中如何选用。
一、色码是什么？为什么需要多种色彩模型？
人眼可感知的可见光波长约在 380 nm（紫色端）到 700 nm（红色端）之间，但这套连续光谱对计算机而言太难处理——计算机需要一套明确的数字语言。不同的色彩模型（Color Model）从不同角度描述颜色：有些模仿光的物理叠加特性，有些考量印刷油墨的现实需求，有些则从人类的视觉感知出发。每种模型都有其适用场景，选哪种取决于"你在为什么媒介设计"。
简单说：屏幕显示用 RGB、HEX 或 HSL；印刷输出用 CMYK；设计师调色时偏好 HSL；工程师写 CSS 时最常粘贴 HEX。
二、RGB：光的加法混色，数字世界的基础
RGB 代表红（Red）、绿（Green）、蓝（Blue）三个颜色通道，每个通道的值从 0 到 255（8 位 = 256 阶），共可表达 256³ = 16,777,216 种颜色。RGB 属于加法混色：三种光叠加在一起，最终得到白色；完全无光则是黑色。这与绘画时混合颜料（越混越深）的直觉完全相反，但符合光的物理行为。
在 CSS 中，RGB 的常见写法是 rgb(255, 99, 71)。若需要控制透明度，可使用 rgba(255, 99, 71, 0.5)，其中第四个参数 Alpha 介于 0（完全透明）至 1（完全不透明）之间。
在硬件层面，几乎所有屏幕技术——LCD、OLED、Micro-LED——都在驱动层面使用 RGB 三通道来控制每个像素的发光强度，RGB 是最接近底层物理现实的色彩语言。
三、HEX：十六进制的色码速记法
HEX 色码（十六进制色码）是 RGB 的另一种表示形式，格式为 #RRGGBB，其中每对字符代表一个 RGB 通道，以十六进制（0–9 + A–F）表示 0 到 255 的整数值。例如 #FF6347：
FF（红）= 十进制 25563（绿）= 十进制 9947（蓝）= 十进制 71
若每个通道的两位字符完全相同，可缩写为三位：#F06 等同于 #FF0066。HEX 格式简洁、在代码中占用字符少，且几乎所有设计工具都提供一键复制 HEX 的功能，是前端开发与 CSS 的主流色码格式。
四、HSL 与 HSB：以人类感知为中心的色彩描述
HSL 代表 Hue（色相）、Saturation（饱和度）、Lightness（亮度），设计上更贴近人类的视觉感知方式：
- 色相（Hue）：0 到 360° 的角度值，对应色相环的位置。0° = 红色、120° = 绿色、240° = 蓝色。
- 饱和度（Saturation）：0% 为完全去饱和的灰阶，100% 为最鲜艳的纯色。
- 亮度（Lightness）：0% 为纯黑，50% 为最自然的显色亮度，100% 为纯白。
HSL 最大的优势是直觉性。对设计师来说，"把这个橙色调暗一点"，在 HSL 中只要降低 Lightness 即可；在 RGB 中则需要同时手动调整三个数值。CSS 原生支持 HSL 语法：hsl(9, 100%, 64%) 同样代表番茄红。
容易混淆的 HSB（又称 HSV）：HSB 的 100% Brightness 是"全亮纯色"，而非白色；HSL 的 100% Lightness 则是纯白。Adobe 系列工具（Photoshop、Illustrator）传统上使用 HSB，Figma 及 CSS 使用 HSL。
五、CMYK：印刷世界的四色减法混色
CMYK 代表青色（Cyan）、洋红（Magenta）、黄色（Yellow）、黑色（Key/Black）。油墨属于减法混色：油墨吸收特定波长的光，混合越多颜料，反射的光越少，颜色越深。独立黑色通道 K 的存在，既能印出真正的黑色，也减少大面积用黑时的油墨消耗。
CMYK 是平面设计印刷品的标准色彩模型，但屏幕显示不适用。RGB 的色域比 CMYK 更宽——屏幕上看到的某些高饱和电光色，在印刷上无法重现。设计稿交付印刷厂前，务必进行色域转换与打样确认。
六、各色彩模型使用场景整理
| 模型 | 最适用场景 | 主要优点 | 主要限制 |
|---|---|---|---|
| RGB | 屏幕显示、图像处理、程序计算 | 最接近物理底层、精确可计算 | 数值不直觉，调色困难 |
| HEX | 前端开发、CSS、设计稿标注 | 简洁、复制方便、业界通用 | 无法直接"读懂"颜色含义 |
| HSL | UI 设计调色、CSS 动态主题 | 最符合人类视觉直觉 | 需转换才能对应印刷 |
| CMYK | 印刷输出、平面设计稿 | 与实体印刷流程吻合 | 不适用屏幕显示，色域较窄 |
七、色彩换算的数学原理
HEX → RGB：将 HEX 字符串的每两位字符视为十六进制数转换为十进制即可。例如 #1A2B3C：R=0x1A=26、G=0x2B=43、B=0x3C=60。
RGB → HSL（核心公式）：将 R、G、B 正规化至 [0,1] 区间，找出最大值 max 与最小值 min，则 Lightness L = (max + min) / 2。若 max ≠ min，Saturation S = delta / (1 − |2L − 1|)。Hue 依最大值通道计算对应角度（0–360°）。
八、WCAG 对比度规范与无障碍设计
WCAG（Web Content Accessibility Guidelines）规定了文字与背景颜色之间的最低对比比例：
- AA 等级（一般文字）：对比比例 ≥ 4.5:1
- AA 等级（大型文字，≥ 18pt 或粗体 14pt）：对比比例 ≥ 3:1
- AAA 等级（最高标准）：对比比例 ≥ 7:1
对比比例计算公式为 (L1 + 0.05) / (L2 + 0.05)，L1、L2 分别是两种颜色的相对亮度。纯黑（L=0）与纯白（L=1）的对比比例为 21:1，是最大值。全球约 8% 的男性存在某种程度的色觉辨识障碍，达到 WCAG AA 等级是现代 UI 设计的基本门槛。
九、配色实战：选出协调且可用的颜色组合
从主色出发，用 HSL 快速建立调色盘：确定品牌主色后，固定色相（H 值），调整饱和度与亮度，即可快速衍生深色版（文字/边框）、主色版（CTA 按钮）、浅色版（背景/hover 状态）。
利用色相环决定配色关系：互补色（色相差 180°）对比强烈；类比色（色相差 30–60°）视觉和谐；三角配色（相差 120°）活泼有层次。绝对不要单靠颜色传递信息——色弱用户无法区分纯靠颜色区分的状态，须同时加入图标或文字说明。
十、色码在现代 CSS 中的新语法
CSS Color Level 4 引入了新的色彩语法：color(display-p3 0.5 0.2 0.8) 支持广色域显示；oklch(60% 0.18 255) 基于感知亮度均匀的色彩空间，是近年设计师社区最热门的新格式；color-mix(in hsl, #FF6347 40%, #1E90FF) 可直接在 CSS 中混合两种颜色。
结语
色码背后承载着光学物理、人类感知心理学、印刷工艺与数字无障碍设计等多个领域的知识。了解 RGB 的加法混色本质，掌握 HSL 的直觉逻辑，熟知 WCAG 对比度规范，能让你的作品在视觉上更专业、在使用体验上更友善。把这些原理内化后，色码工具就不只是一个"输入换算"的黑盒子，而是你手中真正理解的设计语言。