颜色理论基础与配色技巧

August 7, 2026 in 艺术与创作 2 minutes

从视觉生理机制出发,解析三原色系统、色彩空间与实用配色技巧

视觉基础与加色、减色混合

颜色理论: 三原色系统是建立在人类视觉生理基础上一套精妙的编码方案。

三色接收器

视网膜上有视杆细胞和视锥细胞,三种视锥细胞对红、绿、蓝最为敏感(并非只感应某一种光,这也限制了有些单色还原不出来)。

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°)的颜色。

冷暖对比

方法: 大面积的冷色(蓝、青)搭配小面积的暖色(橙、黄)。