UI 设计知识库 [02] 色彩 · 理论 – 常见问题

碎片

目 录 [隐藏]

1 Lab 与 RGB 互换会损失色彩

2 RGB 色彩空间无法覆盖所有 CMYK 色域

3 色彩感知的个体差异

4 三原色不能混合出所有色彩

5 色彩不等同与波长或者光谱

6 混乱的名词

6.1 明度、亮度 与 辉度（Brightness, Lightness and Luma）

6.1.1 区分

6.1.2 辉度（Luma） vs 亮度、明度

6.1.3 饱和度、纯度 与 色彩度

7 国标色彩术语

Lab 与 RGB 互换会损失色彩

PhotoShop 中有很多使用 Lab 调色或者用 Lab 的 L 通道获取比去色效果更好的灰度图像的技巧，一些书比如《LAB 修色圣典》就很推崇在 Lab 模式下处理图像的方法。有很多人会因为 CIE Lab 色彩空间比通常的 RGB 空间比如 sRGB、Adobe RGB 色域都要广就以为把 RGB 转换到 PhotoShop 的 Lab 色彩空间就是没有损失的，但是实际上 PhotoShop 的 Lab 虽然色域比 sRGB、Adobe RGB 这些 RGB 色彩空间都要广，但是色彩数量并没有这些 RGB 色彩空间多。

PhotoShop 里 Lab 模式图像最多容纳颜色（8位通道）为 101 x 256 x 256 = 6619136 也就是六百多万种这还包括 L 为 0 时 a、b 为任意值都是黑色的 1024 种重复值。而 RGB 模式最多能容纳的颜色（8位通道）为 256 x 256 x 256 = 16777216 也就是一千六百多万种颜色，这意味着这把 RGB 模式的图片转换为 Lab 很可能会损失颜色。

RGB : 29,113,1 和 29,113,2 对应的 PhotoShop Lab 值是相同的

经过测试把含有所有 16777216 种颜色的 sRGB 图片在 Photoshop 中转换为 Lab 再转换回  sRGB 图片与原图颜色对比，93% 的颜色都改变了，而且只剩下 30% 颜色总数。

虽然看起来差别不大，因为颜色都只改变了 1、2 个数值，但是对于 UI 设计这种对颜色数值要精确的领域，要注意转换到 Lab 的色彩损失。

含有所有(16777216 种) 24 位色 RGB 颜色的图片

测试结果：

色彩空间转换引擎色彩总数覆盖率差错数差错率

LAB（photoshop）Adobe (ACE)51296440.306156195400.931

CMYK （Japan Color 2001 Coated）Adobe (ACE)45248570.27167038020.996

Microsoft ICM44608320.266167355560.998

CMYK （U.S Web Coated SWOP v2）Adobe (ACE)42512190.253167398050.998

Microsoft ICM43845530.261167273840.998

RGB 色彩空间无法覆盖所有 CMYK 色域

sRGB 与 Adobe RGB 色彩空间都无法覆盖所有 CMYK 色域。

一般人的印象是 RGB  色彩空间要比 CMYK 的色彩空间色域更大，这没错，但是如果以此认为RGB 色彩空间能覆盖所有 CMYK 色彩空间那就错了，有这个错误的人会误以色域小的 CMYK 图片转换到色域大 RGB 色彩空间不会有色彩的损失。

而实际上常用的 RGB 色彩空间 sRGB 与 Adobe RGB 都不能覆盖所有 CMYK （Japan Color 2001 Coated 或 U.S Web Coated SWOP v2）色彩空间的颜色，这在黄色上特别明显，92 以上的 Y 值就超出了 sRGB 的色域范围，这意味这，CMYK 里高纯度的黄色转换到 RGB 色彩空间就会损失掉。

以下是色彩空间对比图，超出灰色色彩空间的就是 CMYK 超出 RGB 色彩空间的范围：

sRGB 与 CMYK 空间 japan color 2001 比较色域

adobe RGB 与 CMYK 空间 japan color 2001 比较色域

色彩感知的个体差异

这里说的色彩感知的个体差异不是色盲或者分辨白金\蓝黑裙子的个体差异，而是对大部分正常视觉的人对颜色感知的偏移。根据使 CIE 1964 10° 的三刺激值实验，不同的受测者测得的三刺激值或多或少都有一些偏差，这意味着对一些人感觉已经到最纯的红色，对另外一些人来说还不到最纯。

49 位不同的观察者视锥细胞响应曲线的差异，橙色为标准测量

[查看来源]

而根据对立色测试发现，测试者对绿色的判断最分散，这意味着不同人对绿色的色相的判断相差最大。

49 位不同的观察者测试的对立色范围

[查看来源]

三原色不能混合出所有色彩

红绿蓝三原色能混合出所有色彩？

答案是否定的，实际上现实中不根本存在三种原色光能混合出所有色彩。

我们知道人眼中三种视锥细胞分别对红、绿、蓝波长反应敏感，如果这三种细胞只对红、绿、蓝波长有反应的话，那三原色才可能存在，但实际每种视锥细胞对波长的响应是有很大范围的，而且它们的范围互相有重合，如下图

可以看到，除了大约在 700nm 以上波长的红光，其他的波长的光都不仅对一种视锥细胞的产生刺激，通俗来说就是不存在纯绿色和纯蓝色 ，而不纯的光混合起来饱和度就不会达到预期的要求。

在 CIE 1931 的实验中，人们拿三原色试图测出所有的光谱色，实验过程大致是使用各种波长光谱色作为待测色，然后用三原色混合来匹配（在观察者视觉中与待测色无法区分）待测色然后记录三原色的分别所用值，但是在实验中他们发现用三原色配出来的混合色饱和度很多时候都比待测的光谱色要低，无法匹配光谱色。

这是 CIE 1931 的实验数据，横轴是待测光谱色波长，纵轴是混合出这种光谱色所用的三原色数值，可以看到三原色数值竟然有负数，现在中是不存在“负”强度的光的，之所以有负数就是因为用三原色混不出待测光谱色，负数代表混合出的光中还多出了多少原色光，如果减去这么多才能匹配带测光。具体在实验中的做法是：既然三原色混合不出待测光，就给待测光中加入三原色，这样就能知道混色中多出了哪种原色，要减去多出来的值，所以就有了负数。

上图纵坐标刻度太大，没有很好体系不能用三原色混合出的光谱色数量，下图是放大了刻度的图表，有负数的占了多数，可以看到大部分光谱色都不能用三原色混合得来。

Google Doc 图表

所以你能在 CIE RGB 1931 色品图里看到有很大一部分区域在有负值的第二象限。在这个图表里 Cg、Cb、Cr 是真正的三原色如果存在的话所在的位置，可是它们在现实世界中是不存在的…

CIE RGB 1931 色品图

把这 Cg、Cb、Cr 三点的连线变换成坐标就有了常常用来比较色域的 CIE XYZ 1931 色品图，而所谓的 X、Y、Z 是现实中不存在的纯数学的东西。

CIE XYZ 1931 色品图

虽然有没有现实存在的真正原色（能够混合出所有颜色），但是在一定范围内的三原色还是存在的，比如上图中的三角，三角的三个顶点就是这个三角色域的三原色，它们可以混合出三角形内所有的颜色，而顶点的颜色不能被任何三角色域内任何其他颜色混合出来。

而这个三角形不是唯一，的在色品图上画任意一个三角都可以，所有我们可以看到有那么多的不同的色彩空间。

色彩不等同与波长或者光谱

很多人在知道了颜色与波长的关系后就认为颜色就是波长不同的光，可见光谱就包含了所有可见颜色。

不同波长的光确实有颜色，从 2 个层次来说波长都不等同与颜色。

可见光谱并不包含所有的颜色或者色相。比如洋红（或者说紫色 violet）就不在光谱中，没有哪一种波长的光能产生洋红的视觉反应。

色品图中只有曲线边界是光谱的颜色，而从红到紫的直线：紫红边界并不是存在于光谱中

相同波长的光不一定呈现同一种颜色，不同波长的光也能呈现同样的颜色。

色彩的感觉受到心理层面影响很大。

混乱的名词

现实中亮度、明度等名称的混淆来自于翻译，有的色彩书籍都是参考、引进自日本的（乱用明度的基本是来自日文不同的翻译），有的又来自英美，还有中国国家标准的官方翻译，各种翻译真是混乱不堪（实际上日语、英语中也有混淆的情况，尤其是日语也饱受英文翻译和自己 PCCS 体系命名混乱的痛苦“明るさ”、“輝度”混乱，而中文翻译常常经过几道翻译混乱已经面目全非了）。

所以有很多名称虽然指定大体是一个意思，具体的含义还需要根据场合和上下文理解。

明度、亮度 与 辉度（Brightness, Lightness and Luma）

亮度：Lightness、Luminance

相对亮度：Relative luminance

明度：Brightness、Value

辉度：Luma

这是三个使用的相当混乱的概念，其所指本质上是相同的，但是在不同场合其含义会有些差异。

你可以在一些地方看到亮度 = Lightness，明度 = Lightness ，另一些地方可能恰好相反，而其实际上他们指的可能都是同一个概念：人对发光体或反光体光感受强度的程度，但是这个概念的定义很多，不同的定义惯用不同但又没有明确界定的称呼。实际上大部分使用亮度、明度、辉度的人根本不知道其中的差别。

以 RGB 色彩空间为标准， R（红）、G（绿）、B（蓝），max 为 RGB 中最大值，min 为 RGB 中最小值。其亮度/明度的定义方式常见的有：

平均值

取 RGB 三值的平均值

μ = (R + G + B)/3

这最简单而又不常用的定义法，因为某些颜色人感知起来明显比另一些要更亮，所以最不准确。

跨度平均值

取 RGB 中最大值与最小值的平均值

μ = (max + min)/2

HSL 色彩空间的 L : Lightness/亮度 的定义就是跨度平均值。

所以狭义上亮度就是指一种颜色 RGB 分量的跨度平均值。

最大值

取 RGB 中最大值

μ = max

HSB（也被称为 HSV）色彩空间里的 B : Brightness(HSV 的 V : Value)/明度 的定义就是 RGB 最大值

所以狭义上明度就是指一种颜色 RGB 分量的最大值。

色觉校正值

由于人对色彩感知亮度有差异，所以除了以上比较简单的亮度定义法，还有用公式得到更接近人世界感受的定义方法

μ = R*0.299 + G*0.587 + B*0.114601 校正公式

μ = R*0.2126 + G*0.7152 + B*0.0722709 校正公式

μ = √( 0.241*R2+ 0.691*G2+ 0.068*B2)HSP 校正公式

在使用色觉校正的场合，常常习惯把校正后的结果称为辉度（Luma）

另外灰度的定义其实也是用色觉校正值，所以灰度和辉度、亮度本质上是一样的。

区分

以最常见的 HSL 和 HSB 使用的场合为标准。

亮度 vs 明度

亮度明度

LightnessBrightness、Value

从黑到标准色相再到白从黑到标准色相

用于 HSV/HSL 中的描述用于 HSB 中的描述

半值为颜色标准色相，满值为白色满值为颜色标准色相

定义为 RGB 中最大值与最小值的平均值定义为 RGB 中最大值

RGB 中间值的变化不会影响亮度RGB 除了最大值以外的变化都不会影响明度

辉度（Luma）vs 亮度、明度

辉度（Luma）通常指经过色觉校正后的”亮度”，在一些日文和从日文翻译过来资料中常见这种称呼。

饱和度、纯度 与 色彩度

饱和度：Saturation

色彩浓度、色度、纯度：Chroma

色彩度、彩度：Colorfulness

常见翻译问题，日系译法饱和度也被称为彩度，但是英文翻译彩度是 Colorfulness 色彩度、多彩度的简称，而色彩度（Colorfulness ）通常指一种色彩除了亮度以外的属性，也就是饱和度 + 色相。

而色彩浓度、纯度（Chroma）与饱和度（Saturation）是意义相同的：指感知一种颜色相当于无色系的差距的程度。

值得一提的是 HSL 和 HSV/HSB 的 S :  Saturation/饱和度 虽然名称一样但是定义不同。

总的来说比起亮度、明度、辉度，饱和度的混乱要小一些。

国标色彩术语

上面的内容是根据市面上资料和维基百科的总结，可以说是色彩名词在民间实际使用的情况，而下面是常用中国国家标准的色彩术语，不过由于大多数中文资料的都没有严格按照国标来写，所以其实国标只在比较专的业领域有参考价值。

《GB/T 15608-2006中国颜色体系》

《GB/T 5698-2001 颜色术语》

色貌、色表：Color appearance：与色刺激和材料质地有关的颜色主观表现。

色温：Color temperature： 光源色品与某一温度下完全辐射体色品相同时，光源的色温即是完全辐射体的绝对温度。

色空间：Color space：表示颜色的三维空间。

色域：Color gamut：能够满足一定条件的颜色集合在色品图或色空间内的范围。

三刺激值：在三色系统中，与一颜色刺激达到色匹配所需的三种参照色刺激的量。

色品坐标：Chromaticity coordinates：三刺激值各自与和值的比（XYZ表色系统中，三刺激值XYZ，坐标x=x/x+y+z，y=y/x+y+z…..）

颜色体系：Color system：按人的视觉特点，使用规定的标号系统，把色彩按一定规则排列。

色品：chromaticity：在色品坐标上 ， 由主波长 (或补色波长) 和纯度的组合而表述的色刺激 的心理物理性 质。

色品图： chromaticity diagram：表示颜色色品坐标的平面图。

心理明度：Psychrometric lightness：在均匀色空间中，相 当于明度的坐标 。 在 L ‘ a ‘ b‘色空间和 L’u’v‘色空间中的 L’ 定义为 CIE 1976心 理明度。

心理彩度坐标 psychrometric chrom acoordinates：在均匀色空间中 ，表示等明度面内的两个坐标。例如在 L ‘ a ‘ b’ 色空间中的两个坐标 a . 和 b’,

色貌：Color appearance：与色刺激和材料质地等有关的颜色的主观表现。

色刺激：Color stimulus：进入人眼能引起有彩色和无彩色感觉的可见光辐射。

白度：whiteness：用一维数表示的物体色 的白色程度。

视亮度：brightness：对于光源或物体表面明暗的视知觉特性。注 : 视亮度属于感知量 ， 其大小主要 决定于心理物理量光亮度 ，视亮度大小明显地受到刺激条件(包括被观察物的色品、周围的亮度和色品 ) 和观察者条件(包括色觉特性和色适应状态 ) 的影响

色调、色相：Hue：

明度：lightness

a) 物体表面相对明暗的特性 。

b) 在同样 的照明条件下 . 以白板作为基准，对物体表面的视知觉特性给予的分度 。

颜色的三属性之一 。

彩度：chroma：用距离等明度无彩色点的视知觉特性来表示物体表面颜色的浓 淡，并给予分度 。颜色的三属性之一。

饱和度：saturation：用以估价纯彩色在整个视觉中的成分的视觉属性。