全面UI设计色彩理论知识库：入门必读

时间：11-07 民间故事提交错误

大家好，今天小编来为大家解答全面UI设计色彩理论知识库：入门必读这个问题，很多人还不知道，现在让我们一起来看看吧！

1.1 光的性质

1.1.1 光谱光和混合光

1.1.2 紫外光和荧光

1.1.3 红外光

1.2 人的感情

1.2.1 生理结构

1.3 色彩构成

1.3.1 颜色的三个属性

1.3.1.1 色调

1.3.1.2 饱和度

1.3.1.3 亮度

1.3.2 非线性亮度感知

2 色彩系统色彩系统

2.1 颜色模型颜色模型

2.1.1 RGB

2.1.2 CMY 和CMYK

2.1.3 HSB 和HSL

2.1.4 硬件带宽

2.1.5 YUV、YCbCr 和YIQ

2.1.6 选择器颜色模型

2.2 颜色外观模型颜色外观模型

2.3 CIECAM02

2.4 iCAM图像色彩外观模型

3个色彩空间

3.1 RGB模型的色彩空间

3.1.1 sRGB

3.1.2 Adobe RGB

3.1.3 苹果RGB

3.1.4 ProPhoto RGB

3.1.5 ScRGB

3.2 CMYK模型的色彩空间

3.2.1 日本Color 2001 涂层

3.2.2 美国卷筒纸涂布（SWOP）

3.3 NTCS(1953)色彩空间

3.4 CIE标准色彩空间

3.4.1 CIE 1931 RGB

3.4.2 CIE 1931 XYZ

3.4.3 CIE 1931 Yxy

3.4.4 CIE 1976 实验室

3.4.5 CIE 1976 南加州大学

3.5 色彩管理

3.5.1 与设备无关的色彩空间

3.5.2 PCS、WSC、ACES

3.5.3 无色彩管理

3.5.4 色彩空间转换

3.5.4.1 转换为配置文件

3.5.4.2 指定配置文件

3.5.4.3 目标空间

这是《nullice 的 UI 设计知识库》的第一篇文章，是《色彩·理论》和《色彩·配色》的第一篇文章。

色彩是设计中不可避免的元素，但正是因为它的普遍性和主观性，很多人忽视了色彩理论的重要性，纯粹基于“经验”来使用色彩。有一种观点：有“才华”和“经验”的艺术家，无需了解色彩或配色理论，就能设计出色彩美妙的作品。这也许是事实，但如果你想超越你的“天赋”，你并没有很长时间来积累“经验”。了解色彩理论以及色彩在视觉中的工作原理是清晰、自由地使用色彩的关键。有效的捷径。

而且，作为一名UI设计师，工作与计算机技术联系紧密，色彩原理的知识是必不可少的。否则，将很难完全理解色彩空间、色彩模型、色域、色彩校正和色彩位置。这样的工作可能会遇到到概念。

什么是颜色

如果我们想深入研究色彩的真实性，它就成为一个哲学话题。如果你想了解颜色，最简单直接的答案就是：光的感觉。重点是：

光的属性：光的属性：波长和强度。

人类感知：观察者反应。

这两点缺一不可。常见的狭隘观点是简单地认为颜色只是光的物理属性。但仅仅说颜色是光的特性还是不准确的。可见光谱（不同波长的光）不包括所有色调（没有紫色、品红色……），相同波长的光在不同的环境下颜色可能会有所不同。毕竟，颜色是人类的感知，并不完全取决于光。自上而下（思考）-向下（刺激）的意识处理也会对颜色认知产生影响。比如白金/蓝黑裙子争议的原因：颜色恒常性。

光的特性

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

也许你还记得初中物理书上的这张频谱图。可见光是特定波长范围内的电磁波，该范围内不同波长的电磁波的人可以感知到不同的颜色。

你需要知道的是，波长越短，频率越高，能量越强。也就是说，400 nm的蓝紫光比750 nm的红光具有更高的色温，这与普通人认为的红色偏暖、蓝色偏冷的观念正好相反。但在绘画、摄影领域，色温的常用名称是人们感受到的色温，即红色为暖色，蓝色为冷色。注意区别。

光谱光和混合光

光谱光：也可称为单色光。它包含的所有光子都具有相同的波长。由于其波长范围为可见光谱，故称为光谱光。例如，所有630nm 光子均由黄色光谱光组成。

混合光：所含光子的波长不均匀。它们由不同强度的不同光谱光“混合”。 “混合”并不意味着产生新的光。其实，“混合”只是位置的混合。由于牛顿的分光实验使用棱镜将白光分成七种颜色的光谱，因此有人错误地认为混色是将不同颜色的光混合以产生新波长的光，因此颜色发生变化。例如：你可以想象将红豆倒入绿豆中，产品就是“杂豆”。

由于人类的颜色识别机制，人类无法区分混合光和光谱光。得益于此，我们可以利用少量的光谱光来获得丰富的色彩，从而实现显示。

紫外光和荧光

虽然波长低于400nm的紫外线是不可见的，但荧光材料利用了紫外线：荧光材料吸收紫外线后，增加了紫外线的波长（降低了频率）并将其反射到可见光范围内，使得物体反射的光看起来更亮。它从光源吸收更多，增加亮度。荧光粉经常用于纸张上，使其看起来更白、更亮。

荧光色卡

另外，人的视网膜其实可以感受到一些紫外线，但是人眼的晶状体过滤掉了紫外线，所以人看不到紫外线（紫外线会损伤视网膜，所以这是一种保护功能）。

镜片过滤紫外线

红外线灯

红外光是人眼看不见的，但一般数码相机设备并不能明确区分可见光和红外光，会将部分红外光拍摄为可见光。

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

[查看源码]

另外，红外线在一定情况下才能被人看到，因为视觉细胞感知光子的频率（波长）需要一定的时间。在此期间，多个光子被用来刺激视觉细胞产生更高的频率。（较短波长）相同刺激的光子。例如，如果将两个可见光范围外的波长为1000纳米的光子以极小的时间间隔快速投射到视网膜的同一区域，那么对视觉细胞的刺激就相当于一个500纳米的光子，因此人们可以看到这种蓝绿色（500 nm）红外光。

人情

上面介绍的光的物理特性只是人类色彩感知的原材料，人类识别它们至关重要：

生理结构

人类颜色感知过程分为2个阶段

识别波长：视网膜上有三种类型的视锥细胞，每种细胞对不同波段的可见光有不同的敏感度。它们分别对短波长、中波长和长波长最敏感。不同的光照条件对三种类型的视锥细胞给予不同的刺激强度。

产生颜色信号：视锥细胞的刺激信息被传输到视神经，视神经有两个颜色通道：蓝黄和红绿，以及一个传达亮度的非颜色通道。在颜色通道中，黄色和蓝色彼此相对，红色和绿色彼此相对。这就是所谓的对抗。最后，一种颜色以蓝黄、红绿、明暗程度的形式传输到大脑。

视觉形成阶段理论示意图

这两个阶段就是三基色原理和四基色（对抗色）原理。过去，哪一种正确一直是色彩学者争论的焦点，因为它们各自都能解释部分色彩现象。例如，三基色可以解释颜色与光的混合，四基色可以解释光与颜色的混合。原色可以解释负后视现象。后来通过解剖实验证明，阶段理论结合了两种理论：在视锥细胞层面应用三基色原理，而拮抗色过程发生在视神经层面。

另外需要注意的是，严格来说，由于S视锥细胞（主要感知蓝色）和M视锥细胞（主要感知绿色）的波长刺激曲线重叠，也就是说不存在纯蓝色（仅刺激来自S视锥细胞的光）和纯绿色（仅刺激M 视锥细胞的光）。更详细的色彩科学讲解请参考：UI设计知识库【02】色彩·理论-常见问题

色彩构成

所谓色彩构成，就是从心理和知觉层面分析色彩的特征，按照色彩的规律将各成分之间的相互关系组合起来，从而对色彩进行描述。色彩构成是色彩搭配的重要基础。下一篇UI设计知识库【03】颜色·配色将会更详细的提到。这里我们首先介绍一下色彩构成的基本概念。

颜色三属性

色相色相

又称色相，被称为颜色的首要特征。一般来说，它是将颜色分为红、橙、黄、绿……改变颜色所引起的颜色变化比改变同样程度的饱和度或亮度更大的特性，因此被称为最重要的特征颜色。

它被精确地定义为颜色等效光谱的峰值位置，但您需要知道的是，并非所有色调都在光谱上。光谱的红色端和紫色端之间还存在洋红色段，因此色调使用2段来连接和补充紫色段的色调。环表示。

等效峰值的位置被认为是色调

饱和

绿色饱和度变化

又称彩度、色彩浓度（Chroma），色彩浓度很好理解，是从颜色的最大浓度到没有颜色（黑白或灰色）的程度。

它精确地定义为颜色等效光谱分布集中在峰值（色调）上的程度。浓度越高，所含颜色越少，饱和度越高。

亮度

颜色当量光谱中每种色调的心理强度之和。从图中可以看出，改变一种颜色的亮度很可能与颜色光谱分布的浓度，即饱和度有关。事实上，不同的颜色系统有不同的饱和度和亮度划分。

值似乎是最容易理解的概念，但实际上值或亮度是最容易混淆的概念：Brightness、Lightness、Value、Luma。虽然一般来说只是颜色的明度，但是明度到底是指光的强度，还是人对光的感知呢？是从黑到白还是从黑到颜色保持最大饱和度的亮度范围？在不同的颜色系统、标准、翻译下会有不同的含义。

尤其是Lightness和Brightness的翻译，Lightness有时译为亮度，Brightness译为亮度，有时则相反。详细对比请参考：UI设计知识库【02】色彩·理论-FAQ#Confused Nouns

亮度亮度

颜色范围从全黑到全白。

亮度

颜色范围从全黑到颜色能保持最大饱和度的亮度。一般来说，亮度的最大值是颜色鲜艳与不泛白的界限。

亮度感知非线性

人类对亮度的感知是非线性的，也就是说，如果光的强度增加一倍，感知到的亮度不会增加一倍。当低亮度光增加到一定强度时，与高亮度光增加相同强度时相比，人眼的变化要大得多。人眼对低强度光的亮度敏感度可达高强度光的数万倍。这一特性使得人眼亮度识别的工作范围非常大。要知道，白纸在阳光下的亮度是月光下的一百万倍。

人眼对光强度的亮度响应是一条对数（近似）曲线。线性记录的光强度必须用伽玛校正曲线进行校正。只有经过校正后，才能在人眼中呈现出均匀变化（线性）的效果。

也就是说，光强应该像下图红色曲线那样变化，人眼看到的亮度会均匀（线性）变化。

计算机存储的是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。

色彩系统色彩系统

所谓色彩系统，就是根据人的视觉特性，采用规定的标注系统，按照一定的规则排列颜色，如CIE XYZ、NCS（瑞士自然色彩系统）、PCCS（日本实用色彩系统）等。

颜色模型颜色模型

像RGB、CMYK、HSB、Lab、YUV、XYZ这样的词是指颜色系统所使用的排列规则的模型，通常可以混合使用（经常混合.），也就是说，可以说是颜色系统的排列规则模型。 RGB 颜色系统或颜色模型。

只有没有确切定义的颜色模型（例如RGB的最大值代表什么物理特性以及每个尺度的实际距离是多少）无法在实际中应用。通常人们根据视觉给颜色模型一个准确的定义，比如Adobe RGB、sRGB、CIE XYZ，这就是颜色空间。人们经常使用与设备无关的色彩空间（例如CIE XYZ）作为定义其他色彩空间的参考。例如，使用RGB颜色模型的sRGB颜色空间中最大红色的定义是(CIE XYZ: 0.4360657, 0.2224884, 0.013916)。

颜色模型没有确切的定义，在一些书籍中也被称为非绝对颜色空间（相反的是绝对颜色空间），所以从这个角度来说RGB称为颜色空间也是正确的，但是这种说法很容易导致困惑。不要使用它。

RGB

R：红色，G：绿色，B：蓝色。

基于三基色制定的立方直角坐标系颜色模型是最常用的颜色模型。

然而，使用这种颜色模型选择颜色并不是一件直观的事情。一般人很难知道混合的是什么颜色（RGB：100%、50%、0%），所以被称为机器友好而不是人类友好。颜色模型。

CMY 与CMYK

C：青色，M：洋红色。 Y：黄色，K：黑色。

CMY是RGB对应的颜色。青色、品红色和黄色分别是红色、绿色和蓝色的补色。也就是说，颜色中青色成分越多，红色成分越少。这也是品红色、黄色、蓝色和绿色之间的关系。 CMY实际上相当于在RGB为100%的基础上减少颜色。例如，20% C 相当于100% 20% 蓝色。这是基于反射光减色原理的颜料模型。

现实中，由于颜料的纯度达不到理想的纯度，用CMY混合无色的灰色和黑色是非常困难的，所以增加了一个特殊的黑色通道：K，（不使用B（黑色）的原因黑色）为避免与蓝色（Bule）混淆，印刷行业使用的颜色模型为CMYK，因此也称为四色印刷模型。

HSB 与HSL

[查看源码]

HSB 和HSL 是两个非常相似的色彩空间。它们都将色调与饱和度和亮度分开。区别在于HSB和HSL对亮度和饱和度的分离方式不同。 HSB的B亮度是从黑色到色调颜色，而HSL的L亮度（Lightness）是从最暗到色调颜色再到白色，也就是说HSL取最大亮度时，无论饱和度和色调都是白色，当HSB取最大亮度时，即为色相颜色。要实现白色还需要最小的饱和度。

换句话说，HSB的饱和度代表颜色远离白色的程度，亮度代表颜色远离黑色的程度。 HSB 的饱和度是指颜色与灰色的距离，而亮度则表示颜色在最暗和最亮之间的位置。

关于HSB和HSL哪个更方便一直存在争论。 PhotoShop中的颜色选择器使用HSL模型，而“HueSaturation”命令使用HSB模型。 W3C 制定的Web 标准支持HSL。

另外，HSL的实际视觉亮度分布也很不均匀（相同亮度值的颜色在实际亮度上可能看起来差别很大），因此出现了HUSL等在HSL上进行改进的模型。它们的视觉亮度分布更加均衡，更方便人类选择颜色。直观（亮度值相同的颜色看起来亮度更均等），但由于计算比较复杂，所以没有被广泛使用。

色调色调

SSaturation 饱和度

BVB亮度亮度值

色调色调

SSaturation 饱和度

L亮度

热血白蛋白

HWB是另一种基于色调的颜色模型。与HSL或HSV不同，HWB没有饱和度或亮度的概念。相反，它是W：白色程度，B：黑色程度。支持HWB的人认为，这比饱和度和亮度更容易理解。 W3C 在2014 年制定的Web 标准（CSS Color Module Level 4）中支持HWB。

HWB模型横截面

[查看源码]

YUV、YCbCr 和YIQ

YUV 是为了分离颜色的视觉亮度而创建的颜色空间。 Y（亮度）表示颜色的视觉亮度，U和V是剩余的颜色分量。

与HSB和HSL的亮度或明度不同，视觉亮度代表的是人们实际感知中颜色的亮度。之所以不同，是因为不同色相的颜色视觉亮度不同，比如纯绿色和纯蓝色，HSB和HSL模型中，它们的亮度是一致的，但纯绿色在人眼中明显要亮很多。

一般YUV模型中红、绿、蓝的视觉亮度比为：0.299:0.587:0.114

YUV模型是法国工程师Georges Valensi于1938年为彩电开发的，目的是利用彩电信号传输中的Y视觉亮度通道与黑白电视共享信号通道，实现与黑白电视信号的同时向后兼容以及节省信号带宽的目的。

ikB

YCbCr 通常被视为YUV 的另一种形式。与YUV 相比，Cb 和Cr 通道分别更偏向红色和蓝色，并且通常会被压缩。 YCbCr常用于图像压缩领域，JPEG图像内部的色彩空间采用YCbCr模型。

DVD使用的分色接口也是YCrCb的应用。

玉泉

YIQ是另一种视觉亮度分割模型，与YUV非常相似。它是NTSC 彩色电视的标准。在国内不太常见，因为国内采用的是PAL标准，而PAL标准采用的是YUV。

YUV、YCbCr 和YIQ 的区别

选择器颜色模型

颜色选择器中经常使用HSB 和HWB 等颜色模型。此时，他们的定义实际上是基于工作环境色彩空间的。例如PhotoShop中使用的HSB颜色选择器，其值的含义是基于当前的设置。颜色空间，因此给定一个HSB 值如(HSB: 100,100,100)，如果不知道其定义的颜色空间，就不可能知道它所指的确切颜色，因此在这种情况下我们会指出使用的颜色空间是sRGB ， AdobeRGB 或其他色彩空间。

不同色彩空间下相同HSB值的色彩对比

为了真实地描述色相、饱和度、亮度等颜色外观属性，需要颜色外观模型。

颜色外观模型颜色外观模型

各种色彩模型描述的是特定环境下的色彩表现，并没有考虑心理因素。可以说，它们只适用于人眼看到但尚未传送到大脑的颜色。但现实中，相同的颜色在普通色彩模型中，会因为背景、光线、对比度、尺寸等因素而显得不同。例如，如果在明亮环境下拍摄的电影在黑暗的电影院中播放，即使如果播放时的颜色在普通颜色模式下与拍摄时一模一样，但由于环境昏暗，人眼看起来有所不同。

色貌模型是基于颜色的色貌的颜色模型。由于其特殊性，单独讨论。所谓色貌也称为色表或色貌。与普通颜色模型仅通过刺激值、原色光等“物理”条件来描述颜色不同，颜色外观是根据人们对颜色外观的“主观”感受来定义的，因此一个颜色外观模型应该能够描述和预测物体在不同光照、不同背景和不同观看条件下的颜色外观（色调、饱和度、亮度等）。

1986年，日本人Nayatani建立了第一个现代色彩外观模型：Nayatani模型。从此，色貌模型成为当代比色学最重要的研究内容之一。

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

CIECAM02

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的特点是不仅用于传统的点颜色，还可以用于复杂空间中的颜色，即图像内容中的颜色。它可以根据图像的内容预测颜色外观。例如下图中相同颜色外观不同的现象。

色彩空间

色彩空间和色彩模型是很容易混淆的概念。颜色模型是按照规则排列颜色的模型，而色彩空间则是其在一定条件下排列的结果。一种颜色模型下可以有不同的颜色空间，它们按照排列方式排列。不同的条件会有不同的色域（可以表达的颜色范围）和含义。颜色模型仅在特定于颜色空间时才实用。

Adobe RGB、sRGB 和Apple RGB 是同一RGB 颜色模型下的不同颜色空间。

RGB 模型的色彩空间

RGB颜色空间可以用上面的三维立方体来表示，但是不同的RGB颜色空间如sRGB、Apple RGB等空间表示相同位置坐标（如255,0,0）的不同颜色，色域也是不同的。就像字符编码中的GBK、BIG5、SJIS一样。

sRGB

Yxy 中sRGB 色彩空间的范围

sRGB是微软和惠普于1997年联合开发的色彩空间标准，为了适应更多的设备，它的色域非常小。它是常用的色彩空间中最小的，甚至不能完全覆盖各种CMYK色彩空间的色域。

sRGB 和CMYK space japan color 2001 色域比较

图中白色的是sRGB色彩空间的范围，彩色的是常用的CMYK空间japan color 2001。可以看出，虽然sRGB的总体积比CMYK要大，但并没有完全包含CMYK（日本色彩2001）的范围。

sRGB 是W3C Web 标准色彩空间，也是Windows 系统和Adobe PhotoShop 的默认色彩空间。它的应用最广泛，是无论印刷方式最常用的色彩空间。一般来说，目前PC用的液晶显示器几乎可以显示整个sRGB色域。

一般来说，UI设计都是在sRGB环境下进行的。

Adobe RGB

Yxy 中的Adobe RGB 色彩空间范围

Adobe于1998年开发的色彩空间标准。开发的目的是使用计算机显示器和其他设备的RGB颜色模式在CMYK彩色打印中创建一个包含尽可能多的颜色的工作空间。 Adobe RGB的色域比sRGB大得多，可以完全覆盖sRGB。它还提供了几乎完整的CMYK 色彩空间覆盖。

Adobe RGB 和CMYK space japan color 2001 色域比较

图中白色的是Adobe RGB色彩空间的范围，彩色的是常用的CMYK空间japan color 2001。可以看到Adobe RGB可以覆盖大部分CMYK色域，但是CMYK还是超过了一个黄色和洋红色很少。

摄影图像一般在Adobe RGB环境下进行处理，但在UI设计中，需要转换为sRGB色彩空间才能最终输出和使用。

苹果RGB

Yxy 中的Apple RGB 色彩空间范围

该色彩空间曾经用于各种Apple系统产品上，早期版本的PhotoShop也使用它作为默认色彩空间。它已不再常用，许多苹果产品已经放弃使用Apple RGB。

Apple RGB 的色域与sRGB 大致相同。

ProPhoto RGB

Yxy 中的ProPhoto RGB 色彩空间范围

由柯达制定的色彩空间标准，常用于高端相机，也是Adobe Lightroom 的默认色彩空间。

由于ProPhoto RGB的三基色定义是人眼识别范围之外的颜色（不存在的颜色），因此它的色域非常大，覆盖了CIE Lab色域的90%，甚至部分超过了CIE Lab的色域。 CIE 实验室的区域范围。为摄影和后期制作提供了相当大的处理空间。

红绿蓝

该标准是微软在Windows Vista推出时推出的标准，用于HD Photo图片格式（曾经被称为Windows Media Photo），以与ProPhoto RGB竞争。它与ProPhoto RGB类似，具有宽广的色域，甚至部分超出了人眼的颜色。领域。不过，随着高清照片不温不火，ScRGB 也不太常见。

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

CMYK 模型的色彩空间

apan Color 2001 Coated 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 中的范围这是美国印刷业制定的一种 CMYK 色彩空间，名字里的 Web 和网络没关系，这里的 Web 是卷筒纸张的意思。在美国地区的 PhotoShop 默认的 CMYK 色彩空间（新版本是US web Coated (SWOP) v2）。其色域与 Japan Color 2001 Coated 差不多。 NTCS(1953) 色彩空间 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 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 1931 Yxy CIE Yxy 是 CIE 1931 XYZ 的又一次数学变换，目的是把色相分布用 xy 平面表示出来，而 Y 轴表示亮度，这样可以更直观的看到色彩的分布和比较色域。可以看到上面 CIE XYZ 空间 xy 色度图就相当于 CIE Yxy 色彩空间的一个剖面。 CIE 1976 Lab 有时也被称为 L*a* b* 和 L10a10b10，这个 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 色彩空间。分别是 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 的色域，完全包括了 CIE LUV 没有色彩管理的情况如果没有色彩管理，一张 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 转换配置文件的选项里引擎指的是转换色彩空间所用工具，一般用Adobe（ACE）就可以，而“意图”是指处理不同色彩空间之间差异颜色的方式：可感知：旨在保留颜色之间的视觉关系，以使人眼看起来感觉很自然，尽管颜色值本身可能有改变。本方法适合存在大量超出色域外颜色的摄影图像。这是日本印刷行业的标准渲染方法。饱和度：尝试在降低颜色准确性的情况下生成逼真的颜色。这种渲染方法适合商业图形（比如图形或图表），此时明亮饱和的颜色比颜色之间的确切关系更重要。相对比色：比较源色彩空间与目标色彩空间的最大高光部分并相应地改变所有颜色。超出色域的颜色会转换为目标色彩空间内可重现的最相似的颜色。与“可感知”相比，相对比色保留的图像原始颜色更多。这是用于北美和欧洲印刷的标准渲染方法。绝对比色：不改变位于目标色域内的颜色。超出色域的颜色将被剪切掉。不针对目标白场调整颜色。本方法旨在在保留颜色间关系的情况下保持颜色的准确性，适用于模拟特定设备输出的校样。此方法在预览纸张颜色如何影响印刷颜色时特别有用。 [查看来源] 指定配置文件也被称为标记，就是只添加一个标记指定图片用什么色彩空间，而不对图片中的数据进行转换，图片里的现有的颜色值保持原样，但是显示方式变为指定的色彩空间。这将导致图片显示的效果改变，如同上面没色彩管理时把一种色彩空间用另一种色彩空间显示的效果一样。由于指定配置文件不会改变图片中的数据，所以这是可逆的操作。目标空间通常 UI 使用的是 sRGB 色彩空间，这是绝对大多数显示器能显示的色彩空间，也是网页的标准，由于各浏览器对色彩管理的支持不尽相同且有限，所以网页图片通常也都是使用 sRGB 色彩空间，这意味着你不管你图片原来是什么色彩空间，最终都要用“转换为配置文件”的方式转换的sRGB 色彩空间。

全面UI设计色彩理论知识库：入门必读和的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！