计算机图像处理入门基础知识——色域,色度图,色彩空间和色彩管理

作者：❄️固态二氧化碳❄️ (主页)
链接：(原创)计算机图像处理入门基础知识——色域,色度图,色彩空间和色彩管理 - 固态二氧化碳的博客 - CSDN博客
来源：CSDN博客
发表时间：2020年06月03日 18:36:36
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

阅读指引:
阅读完这篇文章后,你可以学到:
  ①色度图的概念
  ②色域和色彩空间的概念
  ③为什么sRGB里的#FF00FF不是"品红"而是紫色,而Adobe RGB的才是真正的品红(相关文章)
  ④色彩管理的基本概念以及为什么要进行色彩管理

  色域,色彩空间和色彩管理是计算机图像处理和摄影中的重要的基本概念,这篇文章我们就来聊聊色域,色彩空间和色彩管理的相关知识。

  玩过数码相机的人应该知道,数码相机照片里面有个"色彩空间"的概念。所谓色彩空间,就是图片或显示器所能表现色彩的集合。人眼可以分辨出上亿种颜色,这些颜色构成了一个空间,也就是最大的色彩空间。显示器利用三原色原理,尽可能多的还原出人眼所能看到的色彩,但不一定能做到还原所有色彩,并且不同的显示器,还原色彩的能力也不尽相同,有的色彩范围更大,有的则较小,这样就产生了"色域"的概念来描述显示器或照片对色彩范围覆盖的能力。
  我们在购买显示器的时候,会有许多参数,其中就包括色域一项。厂家一般会用"xx% sRGB"或"xx% NTSC"来定量描述色域大小,这里的"xx%"就是指显示器色彩覆盖范围和某一标准色域(如sRGB)的比值。但是这些数字不能反映色彩具体的覆盖范围,为了更直观地展示色域,我们需要介绍色度图的概念。

Part 1:色度图

  色度图,是CIE(国际照明委员会)为了直观展示色彩的关系,制定的一种描述色域范围的图像。其中,以1931年制定的CIE 1931最为广泛使用。

CIE1931色度图

  图中上半部分黑色曲线上的点为单色光,即单一频率的光(电磁波)的颜色,也就是彩虹的颜色。下半部分从蓝色到红色之间的连线将彩虹两端连接到一起,构成一个封闭区域。整个图像因形状类似马蹄,又被称为"马蹄图"。该图像有如下几个特点和性质:
  ①图像所围成的区域覆盖了人眼所能分辨的所有颜色
  ②图像上每一个点唯一对应一个颜色,自然界中的每一个颜色都唯一对应图像上一个点
  ③图像上半部分黑色曲线上的点上的颜色可以由单频光(如激光、LED光等)得到.其他位置的点必须由两种或两种以上单频光加和得到
  ④图像中间区域的曲线为黑体辐射颜色和温度关系的曲线(任何温度的物体都有辐射一定频率范围电磁波的能力,当温度足够高时,辐射出电磁波的频率分布也会足够高,变成可见光,从而有了颜色),这些电磁波均为复合光,这条曲线被称为"普朗克轨迹"。颜色变化大致为红->橙->黄->白->蓝(不经过绿色区域)。曲线上的温度又称"色温",单位为开尔文(K),它与摄氏度(℃)之间的关系的是T(K)=t(℃)+273.15
  ⑤图像中央位置白色的部分称为白点,该点在颜色校正中十分重要,因为白点决定了三原色的配比和白平衡。白点因显示设备的不同而不同,但不会偏离图像的中间位置。白点所在位置数值称为该光源的色温。一般的显示器色温值为6500K,因为自然光,或者白纸的色温一般都在6500K左右。如果色温值偏离6500K,则白色会有色彩倾向。色温低于6500K时,白色会偏黄,称为"暖白",高于6500K时,白色则会偏蓝,称为"冷白"。总而言之,色温越低越暖,色温越高越冷。比如现在手机常见的"护眼模式"的原理,就是将白点往黄色方向偏移,降低屏幕的色温,使得屏幕中对眼睛伤害更大的高频蓝光减少,变为更为柔和的米黄色,达到保护眼睛的效果(但不是每个人都喜欢这种黄黄的暖屏的)。
  ⑥在图像中任意选三个点,就得到了三原色,三个点围成一个三角形,就形成了一个色域。这三个点可以任意选取,但是为了追求更大的色域,通常将这三个点位置选在右下角,上方和左下角,而这三个区域对应的颜色为红色,绿色和蓝色,所以三原色一般为RGB。但是RGB的位置也不是唯一的一个点,而是一个范围,所以RGB也有不同的偏向。如蓝色(B)的选取位置,有的靠上,而有的靠下,如果B的位置靠上,那么蓝原色就是正蓝色,如果B的位置靠下,那么蓝原色就是偏紫的蓝色
  ⑦CIE 1931色度图有一个很重要的性质,就是颜色合成的线性性质。两个颜色加和后的颜色,必然位于这两个颜色所在的两点连线上,所以三原色能够合成的颜色范围,必然位于三原色三个点围成的三角形内部及三边上
  ⑧若两个颜色对应的点与白点共线,且位于白点一侧,则这两个颜色的色相相同,只有纯度的区别。颜色离白点越近,饱和度(纯度)越低,离白点越远,饱和度(纯度)越高(即越鲜艳)。
  ⑨若两个颜色按照一定比例合成后能得到白色,那么这两个颜色称为"互补色",更准确地说,是"光学互补色",以便和美术互补色区分开来。有关光学互补色和美术互补色的内容,详见我写的这篇文章:(原创)用红黄蓝RYB色相环(伊登色相环)代替RGB色相环。根据性质⑦,互补色对应的两个点一定与白点共线,且这两点分居白点两侧。
  ⑩由于某一间色(三原色中任意两个颜色按最大值混合得到的颜色)与没有参与该间色的那一个原色合成后,三个颜色的值均会达到最大值,即形成了白色。因此这个间色和剩下的那个原色为光学互补色(根据性质⑨)。因此三间色,实际上也是三原色的光学互补色,简称三补色。根据性质⑨,三间色(三补色)一定位于三原色与白点连线的延长线与三角形某一边的交点上。如果我们知道了三原色和白点的坐标,就可以利用解析几何知识推算出三间色的坐标。
  ⑪三原色和白点选取的不同,构成了各种不同的色彩空间和色域,它们有的有自己的名字,其中比较有代表性的是sRGB和Adobe RGB,而目前计算机、手机、平板等设备上最常用的色域就是sRGB色域,它是HP与微软于1996年开发的面向显示器、打印机、Web等的一种色彩空间。Adobe RGB则主要用于专业图像处理,它是Adobe于1998年开发的一种色彩空间,其色域比sRGB大。两者的主要区别在于绿原色的选取位置不同,Adobe RGB的绿原色比sRGB的更偏向左上角。

Part 2:色域和色彩空间

  介绍完了色度图,我们来说说色域和色彩空间的问题。色彩空间和色彩模式是两个完全不同的概念,很多初学者在初学时容易混淆两者。下面我们来介绍一下两者的区别。
  色彩模式,实际上就是色彩的表现方式,比如RGB、CMYK、Lab、HSB等。RGB是光的加和,CMYK是颜料对光的吸收,Lab是人眼对颜色的感知维度,L为明度值,a为绿->红互补色对偏向值,b为蓝->黄互补色对偏向值,HSB则是心理学对颜色的感知,从色相(H),饱和度(S),明度(B)三个维度来描述一个颜色。
  色彩空间,就是上面说的sRGB,Adobe RGB等,就是一个设备所能表现的所有颜色的集合。一个设备所能合成出的所有颜色必然位于该色彩空间内,用数学语言表示,就是c∈S,其中c为任一颜色,S为某一色彩空间。
  而所谓色域,就是色彩空间这个集合的范围,不同的色彩空间有着不同的色域。比如刚才说的Adobe RGB的色域比sRGB的大,而sRGB的色域又全部包含在Adobe RGB中,那么用数学语言描述,sRGB这个色彩空间就是Adobe RGB的(真)子集,即S(sRGB)⊆(⊊)S(Adobe RGB)。

sRGB(左)和Adobe RGB色域(右)对比

  所以说简单点,色彩空间就相当于数学上的集合,只不过这个集合是定义在颜色域上的一种集合。有意义的最大的色彩空间就是CIE 1931色彩空间,即CIE 1931色度图围成的最大区域,因为它包含了人眼能看到的所有颜色,该区域外的颜色均为无意义的颜色。所以CIE 1931色彩空间,可以理解为色彩域的全集,数学上用U表示,所有色彩空间均为它的子集,即S⊆U。目前的所有基于三原色的色彩空间(三角形)均无法达到覆盖人眼可以看得到所有颜色(曲边形)的效果。

  说完了色彩空间,我们来回答开头提到的一个问题。为什么sRGB里的#FF00FF不是"品红"而是紫色,而Adobe RGB的才是真正的品红。这个问题在这之前写的一篇文章里提到过:#FF00FF应该是紫色,把#FF00FF称为"品红"(“洋红”)是一种误称。因为我们大多数人的显示器用的都是sRGB色彩空间,所以#FF00FF显示的都是这种效果(有些人的显示器可能调了色温,或者开了护眼模式,也可能有色差,导致与预期效果不一致,所以下面所说的结论都是在显示器显示效果满足标准sRGB效果的基础上得到的),而如果使用的是Adobe RGB显示器,则不会出现这种问题。下面我们用图来解释为什么会造成这种问题。

sRGB和Adobe RGB三原色和三间色坐标图(建议放大查看)

  这是sRGB和Adobe RGB三原色和三间色坐标位置的图像,从图中我们可以看出,sRGB和Adobe RGB的三原色除了绿色外坐标都相同,而Adobe RGB的绿原色在sRGB绿原色的左上角,更偏向于蓝色。两者的白点坐标完全相同,均为D65(6500K)白点。前面我说过,间色位置的求法,是将某个三原色与白点相连并延长,与三角形某一边的交于一点(图中虚线),这样便可以得到三个点,这三个点的坐标就是三间色的坐标(性质⑩)。由于sRGB与Adobe RGB的红原色和蓝原色坐标相同,所以红色和蓝色对应的间色(补色),即青色和黄色,与白点是共线的,即sRGB与Adobe RGB的青色和黄色色相分别相同,只是纯度的区别。Adobe RGB的青色和黄色比sRGB的离白点都更远,因此它们的饱和度也更高(性质⑧)。此外,Adobe RGB的绿原色离白点更远,因此也更加鲜艳。所以Adobe RGB所表现的颜色,尤其是从黄色到青色之间的区域,是比sRGB要更加鲜艳的,所以用Adobe RGB拍摄照片,可以还原出更加鲜艳,更加真实的色彩,而使用通常所用的sRGB照相则会丢失这些细节信息。
  而由于sRGB与Adobe RGB的绿原色坐标不同且与白点不共线,所以导致其对应的间色坐标不同且与白点不共线,色相也不同。Adobe RGB绿色对应的间色更偏右上角,即更偏向于红色。而sRGB对应的间色偏向于蓝色,在观感上并不像CMYK里的品红,而是更像紫色。Adobe RGB中绿色的间色由于比紫色更偏红,所以色相上是偏紫的红色,即品红色,更接近于CMYK里的品红颜料。
  而如果在不加说明的情况下,Web里的一个颜色代码,默认指的是sRGB色彩空间(因为Web上绝大多数图像都是用sRGB进行传输的),因此#FF00FF这个代码(sRGB)指的就应该是紫色而不是品红,除非强调色彩空间是Adobe RGB。CMYK中的品红颜料,吸收的是类似于Adobe RGB的绿原色,而不是sRGB里的,因此呈现出玫红色,这一点仍然是遵循补色原理的。
  总之,根据色彩空间的不同,不仅原色的位置会不同,间色也会有所差异,在绿原色的选取不同时,其对应间色可以从紫色到品红范围之间变化,要根据绿原色的坐标来确定其对应间色到底是紫色还是品红。

  下面两幅图是sRGB与Adobe RGB的三原色和三间色的对比图(从左到右,从上到下的颜色顺序是红色、黄色、绿色、青色、蓝色、紫色(品红色))。为了避免溢色,我将三原色和三间色的明度调整为90%。第二幅Adobe RGB图是将Adobe RGB颜色经过色彩空间转换后得到的sRGB色值做成的图,其色彩空间已经转换为了sRGB,因此不用担心色彩管理的问题。有关色彩空间转换和色彩管理的内容,将会在下一节介绍。由于sRGB无法准确显示Adobe RGB的色彩,所以第二幅图显示的色彩只是模拟出的色彩,并非真正的Adobe RGB显示器显示出的效果。
  (看下面的图时候最好关闭护眼模式或其他和显示色温相关的属性)

sRGB的三原色和三间色

Adobe RGB的三原色和三间色

  通过上图,可以看出,Adobe RGB的黄色、绿色、青色比sRGB更鲜艳,Adobe RGB的右下角色块就是品红色(紫红色),sRGB的右下角色块则是紫色,而不是品红色,与Adobe RGB的有显著区别。

  附表:sRGB和Adobe RGB三原色和三间色坐标表

颜色	色坐标(sRGB)	色坐标(Adobe RGB)
白色	(0.3127,0.3290)	(0.3127,0.3290)
红色	(0.6400,0.3300)	(0.6400,0.3300)
黄色	(0.4193,0.5053)	(0.4271,0.5181)
绿色	(0.3000,0.6000)	(0.2100,0.7100)
青色	(0.2246,0.3287)	(0.1748,0.3286)
蓝色	(0.1500,0.0600)	(0.1500,0.0600)
紫色(品红)	(0.3209,0.1542)	(0.3548,0.1728)

Part 3:色彩管理

 3.1 色彩管理的意义

  由于不同种类的色彩空间的存在,色彩空间之间的相互交流也就成了一个很重要的问题。比如我们用某个单反相机拍摄了一张照片,使用的是Adobe RGB色彩空间,但是电脑显示器却是sRGB空间的,那么如何显示出这张Adobe RGB空间的照片就成了一个很重要的问题。最简单粗暴的方式,就是将原图片中所有颜色原封不动地输入给显示器,给显示器展示。但是这样就会出现一个问题,由于原图的某个颜色是用Adobe RGB记录的,而给sRGB显示器输入了这个颜色值,显示器展示的会是sRGB的这种色值对应的颜色,而这两种颜色实际上是不同的,导致实际展示出来的颜色并非原图所想展示出来的颜色。
  比如有一张Adobe RGB照片里,某一像素的颜色为绿色(0,170,0),这个值输入进sRGB显示器后,输出的颜色虽然还是绿色,但是由于sRGB同等数值的绿色不如Adobe RGB的鲜艳,导致显示出来的图片效果也不如原来拍摄的鲜艳。但是如果我们进行色彩管理的工作后,程序就会将Adobe RGB的某种颜色尽可能地转换为sRGB中对应的最接近的颜色,那么图片显示的色差就会大大减小。刚才的Adobe RGB里的(0,170,0),可能在sRGB中,就需要(0,204,0)才能达到等价的效果,而这两个色值之间的转化工作,正是需要色彩管理来做的事情。

  色彩管理,就是对不同色彩空间颜色之间的转化工作。一个程序在处理图片时,需要指定一个色彩空间,这个色彩空间一般默认为sRGB,但是如果安装了某些广色域的显示器驱动的话,那么就可能会被修改为显示器对应的色彩空间,以保证显示图片的准确性,这个色彩空间,又称程序的工作空间。而程序在打开某一张图片时,会加载图片的信息,大多数图片都会有色彩空间的文件头信息,当应用程序读取了这个文件头信息后,就会读取原图的像素信息,并将这些像素颜色转换为工作空间对应的颜色,并输出到系统中,图片所保存的色彩空间,实际上就是输入色彩空间。
  这一步转换完成后,软件会将图像显示操作用系统函数实现,系统再将软件提供的工作空间的颜色转换为显示器(硬件)对应色彩空间的颜色,输入进显示器中,显示器最后将这个颜色展示出来,完成了一张图片的显示工作。

  所以,一张图片在打开的时候,实际上经过了两步色彩空间的转换,才能最终显示出来。其中第二步一般交给系统和驱动完成,是从软件到硬件层面的转换,而我们在程序中所做的色彩管理,实际上就是对第一步的操作,即软件层面的转换。
  当然,有的图片可能没有进行色彩管理,文件信息中没有保存色彩空间的类型,这种图片程序打开时会省略第一步,直接将原图片的颜色值输入软件工作空间中,并进行第二步转换。所以这种情况下,如果工作空间与原图想使用的色彩空间不一致,会直接影响第2步转换的准确性,造成色差。因此,在作图软件中制作图片时,最好指定色彩空间,一般选择默认值sRGB即可,但不可选择"不做色彩管理"选项。

  综上所述,色彩管理是图像文件,软件设置所共同需要做的事情,两个环节缺一不可,否则都会造成转换结果的混乱。

  由于日常生活中绝大多数图片,如Web上传输的图片,手机拍摄的照片,Photoshop设计的简单图片,各种壁纸等,多数均使用sRGB色彩空间,且大多数人电脑和手机显示屏使用的色彩空间均是sRGB,所以在一般用途中,如Web传输,为了保证色彩的准确性,尽可能地传输sRGB的图片,这样可以避免在没有完善色彩管理的设备、系统和软件(如某些旧版浏览器)上仍然能够正确地展示出图片的色彩来。只有用于某些专业用途上,如需要使用广色域的设计领域,才有足够的必要传输Adobe RGB等色彩空间的图片。因此我接下来所要用到的图片,都是先转换为sRGB再发布上去的。


  下面的图直观地展示了色彩管理的步骤。

色彩管理的步骤

 3.2 色彩管理的实现

  记原图色彩空间为$S_0$,程序所使用的工作空间为$S$,显示器色彩空间为$S_{monitor}$,从$A$色彩空间转换到$B$色彩空间(即输入空间为$A$,输出空间为$B$)的函数记作$f(A,B)$,转换的过程记为$A\to B$。我们来讨论一下从$S_0$到$S$转换过程($S_0\to S$)中所需要做的工作。

  色彩空间的具体程序实现,需要用到配置文件的概念。配置文件,是色彩空间的描述文件。原图片和软件工作的色彩空间,由配置文件(icc文件)描述,所以原图片中的色彩空间的存储,本质上是植入了一个ICC配置文件,而软件的工作空间,则需要通过加载一个icc文件来实现。
  以最常见的Photoshop软件为例,Photoshop里有一套完整的色彩管理系统和算法,色彩管理的操作只需要提供配置文件的信息即可,具体转化则是一系列的数学运算(转换函数$f$),由软件内部的算法完成。

  下面我来讲解色彩管理的实现过程

  在Photoshop"编辑"菜单中有"指定配置文件"和"转换为配置文件"选项,如下图:


  其中"指定配置文件"的作用是给图片指定一个色彩空间,更新文件头的色彩空间信息,但不改变其像素数据,而"转换为配置文件"的作用是将图片像素数据由原始色彩空间转换为新色彩空间的等价颜色,同时更新图片文件头的色彩空间信息。
  显然,前者是我们在设置图片的色彩空间的正确信息时会用到的,修改的只是文件头信息。而后者则是转换图像颜色到另一色彩空间中最接近的颜色,使之在该空间不偏色,既修改了文件头信息,同时也修改了像素信息。

 3.3 实例

  下面我用具体的图片示例来对比同一张图片在sRGB和Adobe RGB空间下的显示效果和区别。

  如下图是一张彩虹图片,原图片是在Adobe RGB色彩空间下制作的,在Adobe RGB显示器上展示效果如下。(下图已将颜色转换为sRGB,便于Web浏览的准确性)

  在PhotoShop中选择"指定配置文件"选项,将其文件头信息改为sRGB,目的是为了模拟在没有进行色彩管理的,显示器为sRGB的计算机上显示该图片的效果。


  可以看出,原图的颜色发生了变化,似乎不如原来那么鲜艳了。虽然我并没有修改图片的像素信息,但是修改文件头信息意味着告诉Photoshop"这是一张sRGB的图片",Photoshop就会将原图的像素信息理解成sRGB颜色值传入显示器。而实际上同等颜色值的sRGB空间颜色不如Adobe RGB鲜艳,所以看起来的效果就是颜色饱和度降低了。
  这就说明,一张在照相机上使用Adobe RGB拍摄的照片,如果没有好的色彩管理,那么它在普通sRGB设备上展现出来的效果就会逊色很多,达不到最初使用Adobe RGB,追求更丰富色彩的初衷。

  如果情况刚好相反,那么会不会产生相反的效果呢?

  下面有几组壁纸图片,其色彩空间均为sRGB,我们来看一下它在sRGB显示器和Adobe RGB显示器上的显示效果对比:

Windows 10自带的壁纸(上-sRGB 下-Adobe RGB)

Windows 10娘壁纸(上-sRGB 下-Adobe RGB)

Windows 10娘和其他系统娘(上-sRGB 下-Adobe RGB)

  上面几组图对比后,可以发现每一组图片中,下面的那幅图(Adobe RGB)都比上面的那幅图(sRGB)的要饱和一些。原图是sRGB的图片,在一台没有进行色彩管理的Adobe RGB显示器的计算机上显示,那么原本不太饱和的sRGB颜色就会变得非常饱和,也就是所谓的"过饱和"现象。这种现象经常在广色域显示器上发生,当系统的色彩管理方面很差时,这种显示器打开绝大多数图片(sRGB)时都会出现这种问题,导致显示很多图片都会太过鲜艳,看起来很不舒服。

  综上所述,色彩管理在不同色彩空间之间的交流过程中起到了非常重要的作用。通俗地说,没有色彩管理的后果就是,如果我们用单反拍了一张Adobe RGB的风景照片,却在sRGB显示器上显示,那么色彩就不如拍照时那么鲜艳,显示效果就会欠佳;而如果我们在一个Adobe RGB的广色域显示器上显示sRGB的图片,如网上的图片和大多数壁纸,那么显示效果就会过于鲜艳,而夸大了原始图片的色彩。
  总之,对于普通用户,在绝大多数场合,为了兼容性保证,保险起见,不到万不得已的情况下,请只使用sRGB进行图像处理。只有在专业摄影和专业图像处理的情况下,才有必要选择Adobe RGB等色彩空间。但是,作为程序员,在设计软件的时候,还是需要对色彩管理的知识有着完整而系统的掌握,才能使开发出来的软件在色彩管理方面更强大,对色彩空间的兼容性更加良好。


附:
  Windows 10娘壁纸和主题包下载地址:
  地址1:https://download.csdn.net/download/weixin_44938037/12503223
  地址2:https://cloud.189.cn/t/bQvMRjmUzYN3