UI 设计知识库 [01] 色彩 · 理论

 

这是个  碎片 是还没用做成罐头的原材料:

这是《nullice 的 UI 设计知识库》的第一篇文章,是“色彩 · 理论”、“色彩 · 配色”的前篇 。

色彩是设计中不可避免的一个要素,也正是因为它无处不在,很多人都忽视了色彩理论的重要性。有一种看法:有“天分”和“经验的”艺术家可以完全不懂什么色彩、配色理论但也可以设计出美妙色彩的作。这确实是一个事实,不过如果想要超越自己的“天分”,并且也没有漫长的时间去积累“经验”,懂得色彩理论、理解色彩在视觉中的作用原理对如何有效使用色彩来说是一条有效的捷径。

而且作为 UI 设计师,工作与计算机技术紧密相连,色彩原理的知识的了解更是必不可少的,否则将很难理解透彻色彩空间、色彩模型、色域、校色、色位这样工作中可能遇到的概念。

色彩是什么

色彩是什么?想要理解色彩,最简单的而直接的回答是:光给人的感觉 。而具体一些可以分为 2 个部分:
  1. 光的属性:波长与强度。
  2. 人的感觉:观察者的反应。
这 2 个部分是不可或缺的,常见的狭隘见解是简单的认为颜色只是光的物理属性,然而如果仅仅说色彩是光的物理特性是不准确的,可见光谱(不同波长的光)中并不包含所有色相(没有紫红、洋红…),而且同一波长的光在不同环境下,人感觉到的颜色也可能并不相同。色彩终究是人的感觉,并不完全取决于光的物理属性,自上(思维)而下(刺激)的意识处理也会对色彩认知有影响,

光的属性

可见光光谱在电磁波谱中的位置。

可见光光谱在电磁波谱中的位置

可能你还记得初中物理书上的这个光谱图,可见光就是在特定波长范围内的电磁波,而在这个范围内不同波长的电磁波人能感觉出其不同的色彩。
要知道的是波长越短频率越高,能量越强,也就是说 400 nm 蓝紫光要比 750 nm 的红光色温要高,与普通人自己感觉的红色更温暖,蓝色更冷正好相反,不过在绘画和摄影领域常用色温的称呼就是人感受的色温即红暖、蓝冷,注意区分。

光谱光与混合光

  • 光谱光:也可以称为单色光,其所含所有光子都是同一波长,因为其波长取值范围值是可见光谱,所以被称为光谱光。比如全部由 630nm 波长光子组成的光就是看起来是黄色的光谱光。
  • 混合光:所含的光子的波长并不是统一的,由不同的光谱光以不同强度“混合”而成,“混合”并非指产生了新的光。实际上“混合”只是位置的混合罢了,很多人因为牛顿的分光实验(用三棱镜把白光分成七彩光谱的的实验)误以为混色是把不同颜色光混合起来产生了新波长的光所以颜色改变了,而实际上并没有新的波长产生。举例来说:可以想象把红豆倒进绿豆中,产物就是“混合豆”。

由于人的色彩识别机制,人是无法分辨混合光与光谱光的,也正得益于此,我们可以用少量光谱光得到丰富的色彩,显示器才得以实现。

紫外光与荧光

波长低于 400nm 的紫外光虽然不可见,不过荧光材料利用的就是紫外光:荧光材料吸收紫外光后会使紫外光波长增加(频率减少)到可见光范围内再反射出去,使物体反射的光看起来比它从光源吸收的还要多,看起来亮度增加了。纸张就常用荧光粉使其看起来更白更亮。
荧光色卡

荧光色卡

另外实际上人的视网膜是可以感受一部分紫外线的,只是人眼的晶状体过滤掉了紫外线所以人才无法看到紫外线(紫外线会破坏视网膜,所以这是个保护性的功能)。
晶状体过滤紫外光

晶状体过滤紫外光

红外光

红外光人眼看不见,不过一般的数字摄像设备对可见光与红外线边界的区分并不是很清楚,会把一些红外光当成可见光拍摄下来。
遥控器的红外光

摄像头记录下的遥控器红外线发射器

 [查看来源]

另外红外线在某种情况下是可以被人看见的:因为视觉细胞感受光子的频率(波长)是需要有一定时间的,在这个时间内用多个光子刺激视觉细胞,就能产生与更高频率(更短波长)光子相同的刺激。比如向视网膜同一区域以极小的时间间隔快速投射 2 个在可见光范围外的 1000 nm 波长的光子,这对视觉细胞的刺激相当于一个 500 nm 的光子,所以人就可以看到这个蓝绿色( 500 nm )的红外光。

人的感觉

上面介绍的光的物理属性只是人的色彩感觉的原材料,原材料要变成色彩,人类如何识别它们至关重要:

生理结构

人对色彩感知的过程可以简单分为 2 个阶段
  1. 识别波长:视网膜上有 3 种视锥细胞它们各自对可见光不同波段有不同的敏感度,分别对短波长、中波长、长波长最敏感,不同的光线条件给予 3 种视锥细胞不同刺激强度(没错这就 RGB 色彩空间的设计来源)。
  2. 生产色彩信号:视锥细胞的刺激信息传达到视神经,视神经有蓝-黄、红-绿两个色彩通道,和一个传达亮度的非色彩通道。色彩通道中黄、蓝互相对立,红、绿互相对立,这被称为拮抗作用,最终一个色彩以蓝-黄、红-绿、明暗的程度的形式被传送到大脑(这就是 Lab 色彩空间的设计来源)。
视觉形成阶段理论示意图

视觉形成阶段理论示意图

这 2 个阶段分别是色彩三原色原理和四原色(对抗色)原理。在过去三原色原理、四原色(对抗色)原理哪种正确一直是色彩学者争论的焦点,因为他们各自都能解释一部分色彩现象,比如三原色能解释和光的混色,四原色能解释负后视现象。后来通过解剖学实验证明了它们都正确但作用在视觉识别的不同阶段,并产生结合了 2 这个理论的“阶段理论”,也就是:三原色原理适用于视锥细胞所在的层次,而对抗色过程发生在视神经层面上。

值得一提的是,由于 S 视锥细胞(主要感受蓝色)与 M 视锥细胞(主要感受绿色)是对波长刺激曲线是重叠的,也就是说不存在纯蓝色(只刺激 S 视锥细胞的光)和纯绿色(只刺激 M 视锥细胞的光)。色彩学上更详细的解释请参阅:UI 设计知识库 [02] 色彩 · 理论 – 常见问题

 

 

色彩构成

所谓色彩构成就是对色彩从心理、知觉层面的特征进行解析,从而按照色彩的规律去组合各构成之间的相互关系,从而描述色彩。色彩构成是配色的重要依据,在下篇 UI 设计知识库 [03] 色彩 · 配色  中会更详细的提到,这里先介绍一下色彩构成的基本概念。

 

颜色三属性

色相 Hue

色相-示意图
又被称为色调,被称为是色彩的首要特征,通俗的来说就是把颜色分为红、橙、黄、绿…的特征。改变色相比同等程度改变饱和度或亮度感受到的色彩变化要更大,所以被称为颜色最重要的特征。
确切定义为颜色等效光谱峰值的位置,不过要知道的是不是所有色相都在光谱上,光谱红色端和紫色端之间还用洋红色段,所以色相用 2 段连接并补充紫色段的色相环表示。

色相-光谱示意图

等效波峰的位置被认为是色相

 

饱和度 Saturation
绿色的饱和度变化

绿色的饱和度变化

又被称为彩度、色彩浓度(Chroma),称为色彩浓度很好理解,从色彩最大浓度到无色彩(黑白或灰)的程度。
确切定义为颜色等效光谱分布集中于波峰(色相)的程度,越集中含其颜色越少,饱和度越高。

饱和度-光谱示意图

明度 Brightness

明度-光谱示意图

颜色等效光谱各色相心理强度之和。可以从图中看到改变一个颜色的亮度,很可能会牵连到颜色光谱分布集中程度也就是饱和度,实际上不同的色彩体系对饱和度和明度的拆分是不同的。

明度看起来是最容易理解的概念,但事实上 最混乱的概念了:Brightness、Lightness、Value、Luma。虽然概括来说就只是颜色的明亮程度,但是明亮是指光的强度,还是人对光的感受?范围是从黑到白还是从黑到颜色能维持最大饱和度的亮度?在不同的色彩体系、标准、翻译下会有不同的意义。
尤其是 Lightness 和 Brightness 的翻译,Lightness 有时被翻译成亮度,Brightness 翻译成明度,而有时恰恰相反。 详细比较可以参阅:UI 设计知识库 [02] 色彩 · 理论 – 常见问题#混乱的名词

  1. 亮度 Lightness
    颜色从全黑到全白 。
    亮度-Lightness
  2. 明度 Brightness
    颜色从全黑到颜色能维持最大饱和度的亮度,通俗来说就是明度最大值是颜色亮到不发白的边界。
    明度-Brightness

 

亮度感受非线性

人对亮度的感觉是非线性的,也就是说光的强度增加一倍,人感觉的亮度并不会增加一倍。亮度低的光增加一定强度相比亮度高的光增加相同的强度,人眼感受到的变化要大很多。人眼对低强度光的亮度敏感度可以达到高强度光的几万倍。这种特性使得人眼亮度识别的工作范围非常大,要知道太阳光下白纸的亮度是月光下的一百万倍。

人眼对光强度的亮度响应是一条对数(近似)曲线,线性记录的光强度得用 Gamma 校正曲线校正,校正之后才能在人眼中看起来是均匀变化(线性)的。
也就是说, 光强度要像下图红色的曲线一样变化,在人眼看中的亮度才是均匀(线性)变化的。

亮度-视觉亮度曲线
计算机存储的是经过 Gamma 采样后的亮度值而不是直接存储光强度,这是因为高光强范围需要的精度低,而低光强需要的精度高,如果直接按统一的精度(线性)采样并存储光强度值将造成巨大的存储空间浪费,比如原本 1,2,10,100 的光强,在人眼中 1 到 2 、10 到 100 的差别是一样的,所以我们可以存储其为 1,2,3,4。这样原本编码范围是 1~100 ,现在只需要 1~4 。

而所谓的 Gamma 校正(解码) 就是把计算机存储的 Gamma 采样的亮度值转换成实际的光强。比如把存储值 1,2,3,4 校正为 1,2,10,100 的实际值。

 

色彩体系 Color system

所谓色彩体系就是按人的视觉特点,使用规定的标号系统,把色彩按一定规则排列,比如 CIE XYZ、 NCS(瑞士自然色彩体系)、PCCS(日本实用色彩体系)等。

色彩模型 Color model

 RGB、CMYK、HSB、Lab、YUV、XYZ 这样的词指的是色彩系统采用的排列规则的模型,通常可以混用(常常被混用…),也就是可以说 RGB 色彩体系或色彩模型。
只有色彩模型没有确切定义(比如 RGB 的 R 最大值代表什么物理特性,每一级刻度的实际距离是多少)是无法实际应用的,通常人们根据视觉给一种色彩模型确切定义,比如 Adobe RGB、sRGB、CIE XYZ,这就是色彩空间。人们常常以 CIE XYZ 这样设备无关的色彩空间为参照,用其定义其他的色彩空间,比如使用 RGB 色彩模型的 sRGB 色彩空间最大红色的定义就是(CIE  XYZ: 0.4360657, 0.2224884, 0.013916)。
没有确切定义色彩模型在一些书中也被称为非绝对色彩空间(反之是绝对色彩空间),所以称 RGB  是一种色彩空间在这种角度上也是正确的,但是这种说法容易造成混淆最好别用。

RGB

RGB色立方
 [查看来源]

 

R:红 ,G:绿,B:蓝。
根据三原色制定的立方体直角坐标系色彩模型,是最常用的色彩模型。

不过用这种色彩模型选择色彩不是一件直观的事情,普通人很难知道(RGB:100%,50%,0%)混出来是什么颜色,所以被称为对机器友好而对人不友好的色彩模型。

 

CMY 与 CMYK

CMY色立体
C:青,M:洋红。Y:黄,K:黑。

CMY 是与 RGB 相对应的颜色,青、洋红、黄分别是红、绿、蓝的补色,也就是说颜色中青色成分越多代表红色成分越少,洋红、黄与蓝、绿也是这个关系,CMY 实际上相相当于在 RGB 都为 100% 的基础上减少颜色,比如 20%的 C 相当于 100% – 20% 的蓝。这就是根据反射光的减色原理制度的模型,用于颜料。

在现实中由于颜料的纯度达不到理想的纯度,所以用 CMY 混合无色彩的灰、黑是很困难的,所以就增加了一个专门的黑色通道:K,(之所以不用 B (Black)来表示黑是为了不与蓝色(Bule)混淆),印刷界使用的色彩模型就 CMYK,所以它又被称为 印刷四分色模型。

HSB 与 HSL

HSL与HSV模型
 [查看来源]

HSB 与 HSL 是很相似的 2 个色彩色彩空间,都是把色相与饱和度、亮度分离,不同的是 HSB 和 HSL 对亮度、饱和度拆分不同, HSB 的 B 明度(Brightness)是从黑色到色相颜色,而 HSL 的 L 亮度(Lightness)是从最暗到色相颜色再到白色,这意味着 HSL 取最大亮度时不管饱和度和色相如何都是白色,而 HSB 最大明度时是色相颜色,要达到白色还需要饱和度最小。

也就是说 HSB 的饱和度代表颜色远离白的程度,明度代表颜色远离黑的程度。而 HSB 的饱和度是与颜色远离灰色的程度,亮度则代表了颜色在最暗到最亮之间的位置。
HSB 和 HSL 那种更方便一直是一场争论,PhotoShop 中拾色器使用的是 HSL 模型,而“色相\饱和度”命令用的是 HSB 模型,在 W3C 制定的网页标准中支持了 HSL 。

另外,HSL 实际上视觉亮度分布也很不均匀(同亮度值的颜色看起来实际亮度可能相差很大),所以有 HUSL  等对 HSL 改进的模型,它们视觉亮度分布更加均衡,对人类选择色彩更加直观(同亮度值颜色看起来亮度更加相等),不过由于计算更加复杂,并没有被广泛使用。

H Hue 色相
S Saturation 饱和度
B\V Brightness\Value 明度
H Hue 色相
S Saturation 饱和度
L Lightness 亮度

 

HWB

HWB模型

HWB 是另一种根据色相的色彩模型,与 HSL 或者 HSV 不同,HWB 没有饱和度或者亮度的概念,取之代替的是 W:白色的的程度,B:黑色的程度,支持 HWB 的人认为,这比饱和度和亮度更容易让人理解。 W3C 在 2014 年制定的网页标准(CSS Color Module Level 4)中支持了 HWB 。

HWB模型剖面

HWB 模型剖面图

 [查看来源]

 

YUV、YCbCr 与 YIQ

YUV色立体

YUV 是一种目的为把颜色的视觉亮度分离来建立的色彩空间,Y (Luminance) 代表颜色的视觉亮度,U、V 则是剩余的色彩分量。
与 HSB、HSL 的亮度或明度不同,视觉亮度代表的是颜色在人实际感受的亮度,之所以不同是因为不同色相的颜色的视觉亮度是不同的,比如纯绿色和纯蓝色,HSB 和 HSL 的模型里他们的亮度是一致的,但是在人眼中纯绿色明显要亮很多。

不同颜色视觉亮度对比

一般的 YUV 模型中红绿蓝的视觉亮度比是:0.299:0.587:0.114
YUV 模型是在 1938 年法国工程师 Georges Valensi 为彩色电视制定的模型,为的是在彩色电视信号传输中用 Y 视觉亮度通道能与黑白电视共用一个信号通道,达到既向下兼容黑白电视信号,又节约信号带宽的目的。

YCbCr

YCbCr 通常被当做 YUV 的另一种形式,相比 YUV, Cb 和 Cr 通道分别更向红、蓝偏移,而且通常进行压缩。YCbCr 常用在图像压缩领域,JPEG 图片内部的色彩空间就使用 YCbCr 模型。
DVD 用的色拆分接口也是 YCrCb 的应用。

YIQ

YIQ 是另一种视觉亮度拆分模型,与 YUV 很相似,是 NTSC 彩色电视的标准,国内不太常见,因为国内用的是 PAL 标准,PAL 标准使用的是 YUV。
YUV 与 YCbCr、YIQ的差别

YUV 与 YCbCr、YIQ的差别

 [查看来源]

选择器色彩模型

HSB 、 HWB 这样的色彩模型常用在色彩选择器上,这时他们的定义实际上是根据工作环境色彩空间的,比如用在 PhotoShop 中的 HSB 色彩选择器,其值代表的意义是根据当前设置的色彩空间的 ,所以给出一个 HSB 值比如(HSB:100,100,100),而不知道其定义的色彩空间是无法知道它指的确切颜色的,所以我们这种情况我们会指出其所用的色彩空间是 sRGB、AdobeRGB 或者其他色彩空间。

同HSB值在不同色彩空间下颜色比对

同 HSB 值在不同色彩空间下颜色比对

而要真正描述色相、饱和度、明度等色貌属性需要色貌模型。

 色貌模型 Color appearance model

各种色彩模型描述的都是某一特定环境下的色彩表现,而且没有考虑心理因素,可以说是只适用于人眼看到但还没送到大脑中去的色彩。然而现实中在普通色彩模型中相同的颜色会因为背景、光照、对比、大小等因素看起来不一样,比如在明亮环境下拍摄的影片在昏暗的电影院播放,即使播放时的颜色在普通色彩模型中与拍摄时一模一样,但是由于昏暗的环境,在人眼看来却是不同的。

而色貌模型是建立在色彩的色貌上的色彩模型,由于其特殊性所以单独来说。所谓色貌也叫色表或色彩外观,不像普通色彩模型只通过刺激值、原色光等“物理”条件描述颜色,色貌是基于人“主观”对色彩外观的感受来定义,所以一个色貌模型应该能描述和预测不同光照、不同背景、不同观察条件下物体的色貌(色相、饱和度、明度等)。

从 1986 年日本人納谷建立了第一个现代色貌模型:納谷模型(Nayatani),此后色貌模型成为了当代色度学最重要的研究内容之一。

此后出现了 Hunt94、Nayatani95、LLAB、RLAB 等色貌模型,在 1997 年 CIE 综合了这些模型的优点,建立了 CIE CAM97s ,2002 年发布了改进版本 CIE CAM02,此后还出现了更先进的 iCAM、iCAM06。

CIE CAM02

CIE CAM02 是目前使用最广泛的色貌模型,在 Windows Vista 之后版本 Windows 使用的色彩管理系统 WCS 就是基于 CIE CAM02 色貌模型。

CIE CAM02 根据目标颜色测试条件下的三刺激值 X 、Y 、Z ,所用白场的三刺激值 Xw、Yw、Zw, 适应场亮度L (cd/m) , 背景亮度(相对亮度) Y 来输出目标颜色的红绿度 a 、黄蓝度 b 、 色相 H 、亮度(Lightness) J 、 明度(Brightness) Q 、 饱和度(Saturation)s、 色彩浓度(Chroma)C 和 彩度(Colorfulnes)M 。

具体的意义以看维基百科上的描述:CIECAM02

CIE CAM02 也有一些不足,比如它不能预测不同颜色背景产生的影响只能预测非色彩背景;只能基于点来处理,而不能处理块;不能预测人眼同时对比现象等等。

iCAM 图像色貌模型

iCAM 的特点是不仅用于传统的点的颜色 ,还适用于复杂的空间中的颜色,也就是图像内容中的颜色,它能根据图像的内容根据预测色貌,比如下面这种同样颜色在图像中看起来色貌不同的现象。

http://7nj1xa.com1.z0.glb.clouddn.com/qiniu/535/image/bb7a03e5af6a978f6d9545d2527cbabe.png

 

色彩空间

色彩空间和色彩模型是容易混淆的概念,色彩模型是把色彩按规则排列的模型,而色彩空间是其在一定条件下排列的结果,在一个色彩模型下可以有不同的色彩空间,它们根据排列的条件的不同会有不同的色域(所能表示色彩的范围)和含义,色彩模型只有具体到一种色彩空间上才有实用性。
Adobe RGB、sRGB、Apple RGB 就是同在 RGB 色彩模型下的不同色彩空间。

RGB 模型的色彩空间

RGB色立方
 [查看来源]

RGB 色彩空间都可以用上面这个三维立方体表示,但是不同的 RGB 色彩空间如 sRGB、Apple RGB 等空间里相同位置坐标(比如 255,0,0)代表的颜色是不同的,而且色域也不一样。如同字符编码里的 GBK、BIG5、SJIS。

sRGB

sRGB_IN_Yxy

sRGB 色彩空间在 Yxy 中的范围

由微软和惠普于1997年联合制定的色彩空间标准,sRGB 为了适应更多的设备,它的色域范围非常小,是常用色彩空间中最小,甚至不能完全覆盖各种 CMYK 色彩空间的色域。
sRGB与JC2001C_cmyk色域对比

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

图中白色的是 sRGB 色彩空间的范围,彩色的是常用的 CMYK 空间 japan color 2001 ,可以看到虽然 sRGB 的总体积大于 CMYK ,但是没有完全包含 CMYK (japan color 2001)的范围。
sRGB 是 W3C 网页标准色彩空间,也是 Windows 系统和 Adobe PhotoShop 的默认色彩空间,有着最广泛的应用,在不考虑印刷的情况下是最常用的色彩空间。一般来说,目前可用于 PC 的液晶显示器几乎能够显示整个sRGB色域。
一般 UI 设计都是在 sRGB 环境下进行的。

Adobe RGB

Adobe RGB 色彩空间在 Yxy 中的范围

Adobe RGB 色彩空间在 Yxy 中的范围

由 Adobe于 1998 年开发的色彩空间标准。开发的目的是为创造一种尽可能在CMYK彩色印刷中利用计算机显示器等设备的RGB颜色模式上囊括更多的颜色的工作空间。Adobe RGB 能够的色域比 sRGB 大很多,并且能完全覆盖 sRGB。也能几乎完全覆盖 CMYK 色彩空间。
adobe RGB 与 CMYK 空间 japan color 2001 比较色域

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

 图中白色的是 Adobe RGB 色彩空间的范围,彩色的是常用的 CMYK 空间 japan color 2001 ,可以看到 Adobe RGB 能够覆盖大部分 CMYK 色域,但是在黄色和品红上 CMYK 还是超过了一点。
摄影图片的处理一般在 Adobe RGB  环境下进行,不过在 UI 设计中,最终输出和使用时需要转换到 sRGB 色彩空间。

Apple RGB

Apple RGB 色彩空间在 Yxy 中的范围

Apple RGB 色彩空间在 Yxy 中的范围

曾经在苹果系统各种产品上的色彩空间,PhotoShop 的早期版本也是以其为默认色彩空间,现在已经不常用,很多苹果产品都已经放弃使用 Apple RGB。
 Apple RGB 的色域与 sRGB 差不多。

ProPhoto RGB

ProPhoto RGB 色彩空间在 Yxy 中的范围

ProPhoto RGB 色彩空间在 Yxy 中的范围

柯达公司制定的色彩空间标准,常用于高端相机,也是 Adobe Lightroom 的默认色彩空间。
由于 ProPhoto RGB 的三原色定义是在人眼识别范围外的颜色(不存在的颜色),所以它的色域非常大,覆盖了 90% 的 CIE Lab 的色域,甚至部分超出了 CIE Lab 的区域范围,这为是摄影和后期提供了相当大的处理空间。

ScRGB

微软在 Windows Vista 推出时推广的标准,用在 HD Photo 图片格式中(曾经被称为 Windows Media Photo)与 ProPhoto RGB 竞争,它与 ProPhoto RGB 类似,拥有很广的色域,甚至部分超出了人眼色域。不过随着 HD Photo 的不温不火,ScRGB  也并不常见。

ScRGB

最大的黑色三角就是 ScRGB 理想色域范围

 

CMYK 模型的色彩空间

Japan Color 2001 Coated

Japan Color_2001 Coated 色彩空间在 Yxy 中的范围

Japan Color_2001 Coated 色彩空间在 Yxy 中的范围

日本印刷业协会制定的一种 CMYK 色彩空间标准,是亚太地区 PhotoShop 默认的 CMYK 色彩空间。
此外还有 Japan Color 2001 Uncoated、Japan Color 2002 Newspaper 等同系列色彩空间适用于不同的印刷纸张和工艺。

US web Coated(SWOP)

US web Coated(SWOP) 色彩空间在 Yxy 中的范围

US web Coated(SWOP) 色彩空间在 Yxy 中的范围

这是美国印刷业制定的一种 CMYK 色彩空间,名字里的 Web 和网络没关系,这里的 Web 是卷筒纸张的意思。在美国地区的 PhotoShop 默认的 CMYK 色彩空间(新版本是US web Coated (SWOP) v2)。
其色域与 Japan Color 2001 Coated 差不多。

 NTCS(1953) 色彩空间

NTSC 1953 色彩空间在 Yxy 中的范围

NTSC 1953 色彩空间在 Yxy 中的范围

NTCS 是美国国家电视系统委员会制定的色彩空间,这个色彩空间标准常用在电视机和显示器上,所以是很多视频编辑软件的默认色彩空间。
其色域与 Adobe RGB 类似。
NTCS 标准使用的是 YIQ 色彩模型。实际上有很多 NTCS 标准比如 NTCS-J、NTCS-B,它们都有细节上的不同。

CIE 标准色彩空间

CIE (Commission Internationale de L’Eclairage)国际照明委员会,这个组织曾进行过一系列实验与标准的制度,其制度的一系列的标准是近一个世纪以来色彩的学术与行业标准。CIE 色彩空间的目的是构建一个可以描述和排列所有色彩的系统。

CIE 1931 RGB

这是根据视觉的三刺激值的匹配实验得到色彩空间,三刺激值就是的在三色系统中,与一颜色达到视觉上的匹配所需的三种参照色(三原色)刺激的量。这就是最理想的三原色色彩空间了,不过由于人视觉机制的原因,用现实中存在的三种颜色匹配出所有的颜色是不可能的,所有 CIE 1931 RGB 色彩空间里颜色的值出现了负数,这既不便于计算,也难以让人理解(负值出现的原因 参见)。

CIE rg 色度图

CIE RGB 空间 的 rg 色度图,可以看到横轴负半轴上方都是含负值的区域

CIE 1931 XYZ

为了解决负值问题,CIE 1931 XYZ 就诞生了。既然用现实中存在的三种颜色匹配出所有的颜色是不可能的,那就定义三种现实中不存在的理想颜色作为三原色,也就是上面  rg 色度图中的 Cr、Cb、Cg 三点代表的颜色,通过数学变换把负值变正了,可以近似看做是以 Cr、Cb、Cg 三点构成的三角形变换出的新坐标系,XYZ 坐标系就诞生了,通常称为 CIE 1931 色彩空间就是实际指的就是 CIE 1931 XYZ。

CIE XYZ 空间 xy 色度图

CIE XYZ 空间 xy 色度图,可以看到所有值都是正数了

CIE 1931 Yxy

CIE  Yxy 是 CIE 1931 XYZ 的又一次数学变换,目的是把色相分布用 xy 平面表示出来,而 Y 轴表示亮度,这样可以更直观的看到色彩的分布和比较色域。可以看到上面 CIE XYZ 空间 xy 色度图就相当于 CIE  Yxy 色彩空间的一个剖面。

CIE 1976 Lab

有时也被称为 L*a* b* 和 L10a10 b10 ,这个 10 是代表色彩匹配时观察者视场角度是 10°。CIE 1931 测试时的视场角度是 2°,当时没有发现当视场角度大于 4° 时一部分光(380 nm – 460 nm 的蓝紫光)测试值会偏低,而现实中的看物体大部分的时候都超过 4°,曾经有的屏幕生产商都以 CIE 1931 XYZ 为测试标准,结果发现虽然能通过CIE 1931 XYZ 但人眼看起来可能还是存在色偏,因为人不肯能总是用像做实验一样的 2° 视场角看屏幕。实际上 1964 年还有一个标准被称为 X10Y10Z10 的补充标准,不过现在不常用了。

Lab 也是根据 XYZ 变换而来,不过它的指导思想不是三原色而是对抗色理论,也就是红-绿、黄-蓝拮抗理论,与 CIE 1931 XYZ 相比它对颜色的描述与视觉感知更加符, 而且颜色的亮度与色度的分离十分准确,色彩也更加均匀。

CIE Lch 是 CIE Lab 的极坐标系形式。

L*a*b* 空间 a* b* 色度图

 

CIE 1976 USC

也被称为均匀色度空间 CIE 1976 L* u* v* 和 CIE LUV,它最大的特点就是色度均匀,人眼对各个波长分辨率是不一样的,所以 CIE 1931 的色度在人眼看来很不均匀绿色的范围过大,所以就有了更加均匀合理的  CIE LUV 色彩空间。

CIE XYZ、LAB、USC

分别是 XYZ 、LAB、UCS 的麦克亚当圈示意图,一个圈内的颜色表示在人看来是相同的,可以看到 CIE 1976 UCS 最均匀

色彩管理

现实中各种设备使用的色彩空间可能都不尽相同,因为每种设备都会优先使用最适应自己的色彩空间,比如日本打印机会使用 Japan Color 2001 Coated CMYK 色彩模型的色彩空间,高端显示器会使用 Adobe RGB 色彩空间,而低端的显示器会使用色域较小的 sRGB ,因为显示不出那么多 Adobe RGB 色彩空间的颜色。
所以所以我们称这些不同设备上的色彩空间为设备相关色彩空间。
而让颜色在各种标准的设备间转换而尽可能保持结果的一致性,就是色彩管理的意义。具体要解决的问题就是:一个颜色在输入、输出两端是视觉上一致的,如果不能做到完全一致也要尽可能相似。

设备无关的色彩空间

不同设备上的不同色彩空间就给这造成了很大的困难,一个色彩空间的值(比如 RGB:255,0,0)所代表颜色,在另一个色彩空间很可能是不同的,甚至是不存在的,我们不知道一个色彩空间里的红到底有多红,蓝到底有多蓝。所以我们需要一个能涵盖所有人类可见颜色的标准色彩空间,可以把各种设备相关的色彩空间里的颜色都映射到这个标准色彩空间中,连接起各种色彩空间

PCS 、WSC、ACES 

 

与设备无关只与视觉感受的色彩体系和其色彩空间,其他的色彩空间都可以此为参考,根据此来确定红的定义是什么、绿的定义是什么… 并且以此为中间完成各种设备上色彩空间的互相转换。这个参考空间的地位相当于字符编码领域中的 Unicode 。
常用的与设备无关的色彩体系与标准有
  • PCS (配置连接空间)

    ICC 色彩管理标准规定的参考标准,目前的主流标准。
    可以用 CIE XYZ 与 CIE LAB 两种色彩空间作为参考,sRGB、Apple RGB 这些色彩空间的值的会转换到 PCS 标准,再在各种设备间转换。
    比如 sRGB 的 255 红的 PCS 定义是:LAB (54.29, 80.81, 69.9) ,Apple RGB 的 255 红的PCS定义是:LAB (57.57, 77.9, 70.51)。
  • WCS (Windows 色彩管理系统)
    Windows 在 Vista 之后的系统内置的色彩管理系统,WCS 中色彩各种色彩空间的转换都是在 CIE CAM02 色貌模型中进行的。
  • ACES (学院色彩编码系统)

    ACES(学院色彩编码系统)色彩管理标准 ,是AMPAS(电影艺术与科学学院,也就是弄奥斯卡奖的那个) 2004 年制定的新一代色彩参考标准,它使用的参考色彩空间是 ACES RGB,ACES RGB 的色域完全覆盖了 PCS 的 CIE XYZ 和 CIE LAB ,甚至还要要大很多,之所以这么大是为了满足摄影和后期制作的需求。
    目前很多专业摄像机、照相机都有对 ACES 的支持。

    ACES RGB 的色域

    ACES RGB 的色域,完全包括了 CIE LUV

     [查看来源]

    另外 ACES 是免费开源的:https://github.com/ampas/aces-dev。

没有色彩管理的情况

如果没有色彩管理,一张 proPhoto RGB 或者 Adobe RGB 这样色彩空间的照片要正确显示只能碰运气了(恰好碰上图片显示软件默认的色彩空间)。

不同色彩空间的图片如果在显示时用了其他色彩空间的显示方法,那显示的效果很可能与预期相差甚远。

这是由于不同色彩空间图片里色彩值代表的意义是不一样的,proPhoto RGB 的色域范围很广,proPhoto RGB 里的定义红要比 sRGB 定义的红要更红,而计算机里他们都只有 256 级变化, sRGB 255 表示的颜色,在 proPhoto RGB 里不到 255。

例如一个红色的在 ProPhoto RGB 用 115 表示,而 sRGB 里同样的红色要用 180 来表示的,sRGB 里 115 红表示的是更暗的红色。 如果没用色彩管理把 ProPhoto RGB 图片用 sRGB 的显示方式显示,就会把  ProPhoto RGB 图片里的 115 显示的更暗,所以图片整体亮度变暗、饱和度下降了。反过来 sRGB 的图片用 ProPhoto RGB 的显示方式来显示就会过饱和。

 

另外要注意的是色域更广不等于颜色更多。在计算机里24位(8位颜色 x 3通道)的图片,红绿蓝三原色都只有 28 =256 种变化,所以相同位数图片用广色域色彩空间并不能增加颜色的数量,只是能够处理的颜色范围更大。

色彩空间转换

色彩管理最主要工作的就是色彩空间的转换,以适应不同的输出目的,

这里以最常用的 PhotoShop 为例说明。

转换为配置文件

这就是把图片中的数据转换到目标色彩空间中,这会改变图片像素色彩的值,比如 sRGB 转换到 ProPhoto RGB,图片中的红色 180 的值就会变成 115,。色彩空间的转换是不可逆的,会损失图像信息,所以尽量一步到位不要反复多次转换。

PhotoShop 的转换配置文件的选项窗口

PhotoShop 的转换配置文件的选项窗口

 

PhotoShop 转换配置文件的选项里引擎指的是转换色彩空间所用工具,一般用Adobe(ACE)就可以,而“意图”是指处理不同色彩空间之间差异颜色的方式:

  • 可感知:旨在保留颜色之间的视觉关系,以使人眼看起来感觉很自然,尽管颜色值本身可能有改变。本方法适合存在大量超出色域外颜色的摄影图像。这是日本印刷行业的标准渲染方法。
  • 饱和度:尝试在降低颜色准确性的情况下生成逼真的颜色。这种渲染方法适合商业图形(比如图形或图表),此时明亮饱和的颜色比颜色之间的确切关系更重要。
  • 相对比色:比较源色彩空间与目标色彩空间的最大高光部分并相应地改变所有颜色。超出色域的颜色会转换为目标色彩空间内可重现的最相似的颜色。与“可感知”相比,相对比色保留的图像原始颜色更多。这是用于北美和欧洲印刷的标准渲染方法。
  • 绝对比色:不改变位于目标色域内的颜色。超出色域的颜色将被剪切掉。不针对目标白场调整颜色。本方法旨在在保留颜色间关系的情况下保持颜色的准确性,适用于模拟特定设备输出的校样。此方法在预览纸张颜色如何影响印刷颜色时特别有用。

 [查看来源]

指定配置文件

也被称为标记,就是只添加一个标记指定图片用什么色彩空间,而不对图片中的数据进行转换,图片里的现有的颜色值保持原样,但是显示方式变为指定的色彩空间。这将导致图片显示的效果改变,如同上面没色彩管理时把一种色彩空间用另一种色彩空间显示的效果一样。由于指定配置文件不会改变图片中的数据,所以这是可逆的操作。

目标空间

通常 UI 使用的是 sRGB 色彩空间,这是绝对大多数显示器能显示的色彩空间,也是网页的标准,由于各浏览器对色彩管理的支持不尽相同且有限,所以网页图片通常也都是使用 sRGB 色彩空间,这意味着你不管你图片原来是什么色彩空间,最终都要用“转换为配置文件”的方式转换的sRGB 色彩空间。

在 PhotoShop 中“存储为 Web 所用格式”命令默认就会把图片转换的 sRGB 色彩空间。

 

 


 

版权引用参考
知识共享许可协议
本文由 Styletin.com 创作,采用 知识署名共享-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。

你可以在许可范围内复制、转载、传播本作品,但你有署名的义务(标注:“原作者:Styletin.com” 或列出原文地址 :http://styletin.com/archives/535 )。

这是本作品部分内容的引用来源,如有遗漏或侵犯你的权益请联系 Styletin.com 解决
  • 1
  • 2
  • 3

 

 

 

 

你可能还喜欢这些:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*