# 颜色理论基础与配色技巧从视觉生理机制出发，解析三原色系统、色彩空间与实用配色技巧 ### 视觉基础与加色、减色混合 颜色理论: 三原色系统是建立在人类视觉生理基础上一套精妙的编码方案。 #### 三色接收器 视网膜上有视杆细胞和视锥细胞，三种视锥细胞对红、绿、蓝最为敏感（并非只感应某一种光，这也限制了有些单色还原不出来）。 ##### RGB 和 HSB - **RGB**: 适合机器 - **HSB**: 对应于 rgb 的数值关系，差值，数值，适合人类 ##### 加色混合三原色 红，绿，蓝。混合颜色越多，越亮，趋向于白色 ##### 减色混合三原色 青，品红，黄。混合颜色越多，越暗，趋向于黑色 --- ### RGB、HSB 与颜色转换 #### RGB：面向硬件的加色模型 ##### 基本原理 RGB 是**加色混合**模型，对应显示器的三组发光体（红/绿/蓝LED或荧光粉）。 - 原理：人眼视网膜有三种视锥细胞，分别对长波（L/红）、中波（M/绿）、短波（S/蓝）敏感。 - 显示器只需刺激这三种细胞到正确比例，大脑就"以为"看到了某种颜色——**不关心物理光谱是什么形状**。 - 数值范围通常为 0-255（8-bit），如纯红 = (255, 0, 0)。 ##### 特点 - ✅ 与硬件一一对应，计算机处理直接 - ❌ 不直观：(128, 64, 192) 是什么颜色？人脑很难直接想象 - ❌ 调整某个通道会同时改变明度、色调、饱和度，不可分离操作 --- #### HSB（HSV）：面向人类直觉的柱坐标模型 HSB 三个分量分别对应人感知颜色的三个独立维度： | 分量 | 英文 | 含义 | 范围 | | :--- | :--- | :--- | :--- | | **H** | Hue（色相） | 颜色的"种类"，对应色环角度 | 0°–360° | | **S** | Saturation（饱和度） | 颜色的"纯度/鲜艳程度" | 0%–100% | | **B/V** | Brightness/Value（明度） | 颜色的"亮暗" | 0%–100% | ##### 几何形态 想象一个**倒置的六棱锥**（或圆柱）： - 顶部圆周是色环（H） - 从圆心向外是饱和度（S） - 从上到下是明度（B/V） ##### 特点 - ✅ 符合人脑描述颜色的方式："这是一个偏暗的、不太饱和的蓝色" - ✅ 调色时三个维度独立：改H换颜色种类，改S调鲜艳程度，改B调明暗 - ❌ 不是线性的感知均匀模型（这一点后面说） - ❌ 不能直接驱动硬件，必须转回RGB才能显示 > 📝 **HSB = HSV**，只是叫法不同（Photoshop用HSB，学术界多用HSV）。另有HSL模型，L代表Lightness，计算方式不同，别混淆。 --- #### RGB 与 HSB 如何对应同一种颜色 它们不是两种不同的颜色，而是**同一颜色的两套坐标系**——就像同一个地点可以用直角坐标 (x, y) 也可以用极坐标 (r, θ) 描述。 ##### 数学转换关系 **RGB → HSB 的核心逻辑：** ``` 设 R, G, B ∈ [0, 1]（归一化后） M = max(R, G, B) ← 最亮通道 m = min(R, G, B) ← 最暗通道 C = M - m ← 色度（Chroma） 明度： V = M 饱和度：S = C / M （若 M=0 则 S=0） 色相 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] ``` **HSB → RGB 是上述过程的逆运算**（分段线性插值）。 ##### 一个具体例子 | 描述 | RGB | HSB | | :--- | :--- | :--- | | 纯红 | (255, 0, 0) | H=0°, S=100%, B=100% | | 粉色 | (255, 128, 192) | H=330°, S=50%, B=100% | | 深绿 | (0, 100, 0) | H=120°, S=100%, B=39% | | 灰色 | (128, 128, 128) | H=0°, S=0%, B=50% | > 🔑 **关键理解：** 转换是无损的、一一对应的（在RGB色域内）。HSB并没有"创造"新颜色，只是换了一种人类更易读的描述方式。 ##### 为什么需要两套系统？ - **RGB 是"机器语言"：** 显示器/传感器直接读写 - **HSB 是"人类语言"：** 设计师/摄影师思考和沟通用 你在 Photoshop 里拖色环选色，底层仍然存储为 RGB 值。两者之间的桥梁就是上述数学公式。 --- ### 色域与颜色还原的限制 这才是真正深刻的物理问题。 #### 人眼可见的所有颜色：CIE 色度图 1931年，CIE（国际照明委员会）通过大量颜色匹配实验，建立了**CIE xy 色度图**： - 横轴 x、纵轴 y 表示色度（去掉亮度维度） - **马蹄形曲线边界** = 单色光（380nm–700nm 的纯光谱色） - 内部区域 = 人眼可见的所有颜色 - 底部直线连接 380nm 和 700nm，为紫色线（非光谱色） #### 任何 RGB 系统只是一个三角形 在色度图上，任何一个 RGB 显示系统（sRGB、Adobe RGB、DCI-P3、Rec.2020）都表现为**一个三角形**： - 三个顶点 = 该系统的红/绿/蓝原色的色度坐标 - 三角形内部 = 该系统能显示的所有颜色（即**色域/Gamut**） - 三角形外部 = 该系统无法显示的颜色 #### 问题所在：三角形永远装不下马蹄形 > ⚠️ **核心原因：光谱轨迹是弯曲的，而三原色混合只能形成直线边界的三角形。** - 马蹄形边界向外凸出（尤其在青绿色 500-520nm 区域） - 三角形的边是直线，必然有一部分光谱色落在三角形外面 - 这意味着：**无论你怎么选三原色，总有一些真实存在的单色光无法被 RGB 三通道混合出来** #### 具体哪些颜色最容易丢失？ | 色域 | 最容易丢失的区域 | | :--- | :--- | | **sRGB**（普通显示器/网页） | 鲜艳的青绿色、深红橙色、饱和紫 | | **Adobe RGB**（印刷/专业） | 仍然缺少部分极端青绿和蓝紫 | | **DCI-P3**（电影/手机） | 覆盖较好但仍有边角缺失 | | **Rec.2020**（超高清标准） | 接近马蹄形但仍不完全覆盖 | > 📌 日常例子：日落时天空那种极其饱和的**光谱蓝紫色**，或者热带鸟类羽毛的**高饱和青绿色**，在大多数屏幕上都会变灰、变暗——因为它们落在了 sRGB 三角形之外。 #### 为什么不能增加原色数量来彻底解决？ 理论上可以： - 三原色 → 三角形 - 四原色 → 四边形 - 无穷多原色 → 逼近马蹄形 实际上已有**多原色显示器**（如 Sharp Quattron 加黄色、一些广色域电视加青色），但： - 成本和驱动复杂度急剧上升 - 需要全链路（拍摄→编码→传输→显示）同步升级 - 目前尚无消费级完美方案 #### 还有一个更深层的原因 人眼三种视锥细胞的光谱响应曲线**有重叠**，且无法被任何三个窄带光源完美模拟。这意味着： - 某些光谱分布会触发视锥细胞产生一种"不可能三角"的响应组合 - 这种颜色在数学上需要**负的 RGB 分量**才能匹配（CIE实验中就出现了负值） - 物理上不存在"负光"，所以永远无法用加色混合再现 --- ### 常用配色方法 #### 单色搭配 **方法**: 选定一个颜色，只改变它的明度（加黑或加白）和饱和度。 #### 邻近色搭配 **方法**: 选择色环上相邻的颜色（例如：红+橙，蓝+青）。 #### 互补色搭配 **方法**: 选择色环上相对（180°）的颜色。 #### 冷暖对比 **方法**: 大面积的冷色（蓝、青）搭配小面积的暖色（橙、黄）。