分享

「色狼」们应该了解的颜色理论

 街宙 2016-07-06

之所以提笔写这么一篇颜色理论的科普文章,是因为当我想在中文网站里查找时,很难找到全面的内容。有很多都是完全从实用设计的角度来介绍的,这对于像我这样喜欢刨根问底的人来说,并不能感到满足。

颜色理论 (Color Theory) 是一门非常有意思的内容方向,它和乐理一样,是一个横跨艺术和科学的知识体系。学习颜色理论之后,就会知道我们在杂志上、在电脑屏幕、手机屏幕上看到的五彩缤纷是如何产生的,就会知道我们在Photoshop里用到各种颜色混合模式是如何工作的。

那么,让我们先从人对颜色的识别开始说起。

我们是怎么看到颜色的?

我们之所以有视觉,是因为我们的视网膜上存在两类视觉细胞

  • 视锥细胞 - 负责白天强光下视觉,能区分颜色
  • 视杆细胞 - 负责夜晚弱光下视觉,不能区分颜色

而在白天使用的视锥细胞中,又对三种颜色光最为敏感:红、绿、蓝。没错,这就是 RGB 三原色的由来。

视锥细胞主要分布在视网膜中心地区,也就是黄斑,大约700万个细胞会在明光环境下,合成3种「视紫蓝质」,随后产生脉冲告诉大脑,「我看到了某某颜色」。

视杆细胞主要分布在视网膜的非中心区域,大约1亿个细胞会在暗光环境下生成1种「视紫红质」(此物质在明光环境下会被分解),同样产生脉冲告诉大脑,「我看到了有光亮」。

值得注意的是,对人来说的可见光,就是「红橙黄绿青蓝紫」中从红到紫的连续光谱。这里的连续表示,可见光并不是离散的7种颜色的光,而是从紫光的起始段380nm 到红光的终止段750nm中连续的各个波长的光。


可见光的波长和频率,取自wikipedia

合成颜色 - 是否存在棕色光?

好了,问题来了!! 我们发现,在自然可见光的光谱中,并不能找到粉红色,或者是棕色。这时候,我们自然会想要提问,是不是存在某种频率的光,它的颜色是棕色的呢?

答案是否定的,事实上有一件非常重要的事情需要先明确:颜色并不是物理存在的,我们能看到颜色是因为我们的生理构造导致的

颜色是什么?颜色是生物对于不同频率的光的感知,物种不同,感知能力也不同,比如小狗眼里的世界是黑白的,而在另一个极端,皮皮虾有可以感知16种不同频率段的视觉细胞。

380 - 450nm 的光本身并不是紫色的,至少小狗们不这么认为。但我们人类,恰好能把这个频率段的光和其他光区分光,然后我们姑且给了它一个名字,叫紫色。

所谓颜色,不过是我们的视觉细胞对外界输入的光的一种反应。在复杂的世界中,不仅仅存在单色光,更多存在的是多种频率的光同时投射到我们眼里的情况。

说到这里,终于可回答下棕色到底是怎么回事了,并没有某一个固定频率的光是棕色的,实际上一个物体之所以是棕色,是因为他是由红光 + 黄光 + 蓝光 按照一定比例混合后的到的。

所以,这个世界上,并不存在棕色光。相反,有非常多的光都是合成出来的.而人类在如何合成光的道路上,我们找到了 RGB (Red, Green Blue)。不过在RGB之前,我们更早熟悉的是红黄蓝 (RYB) 三原色。


RGB(150, 100, 50)

三原色

人类最早合成颜色的经验,是产生自绘画领域。绘画颜料领域的三原色是「红黄蓝」,其发现时间可以追溯到 1600年左右。


RYB色盘

之后,1908年在印刷和绘画领域,人们又发现了 CMY 三原色 (Cyan, Maganta, Yellow),再加上 Key Plate 黑色,形成了 CMYK 的颜色模型,并在印刷业中广泛使用。


CMY色盘

还剩下一个经典的三原色 RGB,它是在1860年被发现,进而开始被用在摄影行业,一直到1938年,RGB 被用在CRT显示的发明上,这才奠定了 RGB 在我们日常生活中的重要地位。


RGB

加色模式 & 减色模式

当我们谈到加色模式和减色模式时,我们指的都是如何使用不同的三原色去合成其他颜色。其中,RGB 对颜色的合成,是加色模式。RYB 和 CMYK 对颜色的合成是减色模式。

  • 发光,用加色模式;
  • 反光,用减色模式;

什么是发光?能够在外界没有光的情况下,自己辐射出光线被我们看到的就叫发光,比如家里的电灯,街上的霓虹灯、广告牌。

什么是反光?自己不能发光,必须靠反射外界的光才能被我们看到的就叫反光。很明显,在漆黑一片的页面,这些只会反光的物质我们是看不见的。举例来说,身边绝大多数东西都是属于反光系列的,比如一件红色的毛衣,一面黄色的墙,一个绿色的茶杯。

那为什么我们看到的毛衣会是红色的呢?这毛衣本身又不会发射红色的光?要回答这个问题,还得回到「反光」这个词上来,反光的关键在于,有些光被反射了,而另一些并没有。那没被反射的光去了哪?它们是被这件毛衣给吸收了,转化成了其他能量。


红毛衣

反光,就是吸收一部分光,反射一部分光。对于原来的那束射向毛衣的光来说,被吸收的部分做的就是减法,因此反光物体用的颜色合成方法,叫做减色模式。

加色模式下的颜色合成

下面,让我们重新来看一下 RGB 的图,然后来写几个加色模式下的颜色合成公式。

红 (R) + 绿 (G) = 黄 (Y)红 (R) + 蓝 (B) = 品红 (M)绿 (G) + 蓝 (B) = 青 (C)红 (R) + 绿 (G) + 蓝 (B) = 白 (W)

这里,颜色之间加法的含义是,如果同时把等式左边两种颜色的「灯光」打到一起,我们通过肉眼,就会看到等式右边的颜色。


RGB

补色

由上面的加色公式,我们可以很容易的得到下列补色

黄 (Y) = 白 (W) - 蓝 (B)品红 (M) = 白 (W) - 绿 (G)青 (C) = 白 (W) - 红 (R)

即,(黄, 蓝)、(品红, 绿)、(青, 红) 分别是三对补色。这也意味着,任何一对补色的光相叠加,我们会重新得到白光。

减色模式下的颜色合成

然后我们再来看下 CMYK 下的颜色合成公式

黄 (Y) + 品红 (M) = 红 (R)黄 (Y) + 青 (C) = 绿 (G)青 (C) + 品红 (M) = 蓝 (B)

减色模式下的叠加,意味着把等式左边两种颜色的「颜料」混合到一起,我们能看到等式右边颜色的颜料被合成了。

可以看到, CMY 之间的两两组合让我们重新获得了 RGB。看着很神奇,但其实只要使用上面提到的「补色」,就能轻松理解这里面的原因。

黄 (Y) + 品红 (M) = 红 (R) 为例,通过将等式左边的颜色转为补色表示,我们可以的到:

黄 + 品红= [ 白 - 蓝 ] + [ 白 - 绿 ]= 白 - 蓝 - 绿= 红

用文字来表达就是,如果我们把一个吸收蓝光的颜料,和一个吸收绿光的颜料进行混合,那我们就会的到一个吸收蓝光加绿光,也就是只反射红光的颜料。


CMYK

更多的颜色如何合成?

上面我们说到了三原色的颜色合成。需要注意的是,三原色合成出来的依然是纯色。


色相 - Hue

从上图中抽离出 RGB 三原色,那么顺序是这样的:

红 - 绿 - 蓝 - 红

红和绿之间混合出黄,绿蓝之间混合出青,蓝红之间混合出品红。

发现没有,纯色全部都是从 RGB 中抽出两个颜色进行混合。那问题来了,将三种颜色混在一起会是什么效果呢?这里我们需要介绍另外3种合成颜色的方法:

  • 减淡 - Tint
  • 加深 - Shade
  • 变灰 - Tone

减淡 - Tint

在绘画调颜料的时候,减淡一个颜色最好的方法,就是往里加入白色。同样的,在 RGB 的模式下,让一个颜色减淡的方法,就是让这个颜色往白色去靠,并且是 R、G、B 都按照同一个比例去变化。

NewColor = OldColor + (255 - OldColor) * TintFactor

减淡 - Tint

减淡的效果,既可以理解为往颜料里加入白色颜料,也可以理解为在原来的光线中增加了白光。

加深 - Shade

在绘画调颜料的时候,加深一个颜色最好的方法,就是往里加入黑色。同样的,在 RGB 的模式下,让一个颜色加深的方法,就是让这个颜色往黑色去靠,和减淡一样,R、G、B 要按照同比例去变化.

NewColor = OldColor * (1 - ShadeFactor)

加深 - Shade

变灰 - Tone

在绘画调颜料的时候,让一个颜色变灰的方法,顾名思义,就是加入灰色的颜料。而在 RGB 中,变灰的方法,就是同时使用「减淡」和「加深」。

NewColor = OldColor * (1 - TintColor) * (1 - ShadeColor) + 255 * TintColor * (1 - ShadeColor)

变灰 - Tone

HSB、HSL

HSB 有时也会写成 HSV。这么多字母,让我们先来看下,每个字母都是什么含义。

  • H:Hue,色相
  • S:Saturation,饱和度
  • B:Brightness,明度
  • L:Lightness,亮度

HSB,HSL的实用价值在于,这种表示方法更符合人类对颜色的认知。看到春天刚长出的柳芽,我们知道那是嫩绿色的;看到松树的叶子,我们知道那是深绿色的。虽然两个颜色不同,但是那同样是绿色,只是颜色深浅不同。

总结下我们看待一个颜色的步骤:

  • 大概是个什么颜色? 红、黄、蓝、绿?
  • 颜色是深还是浅?
  • 颜色是亮还是暗?

这个步骤,是不是和我们上面介绍的合成颜色的步骤(加深,减淡)很像?有了之前的铺垫,下面介绍下分别如何理解 HSB 和 HSL。

HSB

  • H - 色相,就是全部纯色,红 - 绿 - 蓝 - 红
  • S - 饱和度,就是减淡的反面。饱和度 100% 就是不减淡
  • V/B - 明度,就是加深的反面。明度 100% 就是不加深

使用 HSB 颜色模式的主要是 Photoshop 里颜色选择。


Photoshop 颜色选择使用 HSB

HSL

  • H - 色相, 和 HSB 的定义一致
  • S - 饱和度,注意,这里的饱和度和 HSB 里的饱和度很不一样,这里的 S 控制的是「变灰」
  • L - 亮度,加深或减淡,完全由这个值来控制

使用 HSL 颜色模式的主要有 Photoshop 里的色相饱和度调整、CSS3。


Photoshop 调整色相饱和度选择 HSL

Lab

全称 CIE Lab 颜色空间,这是一个按照人对颜色的感知来设计的颜色空间,且和 RGB、CMYK 相比,这是一个设备无关的颜色空间。

  • L:亮度通道,可以类比 HSL 中的 Lightness
  • a:洋红 - 灰 - 绿
  • b:黄 - 灰 - 蓝

Lab 是一个比 RGB (sRGB, Adobe RGB) ,CMYK 都要大的颜色空间。它在设计之处的目的就在于:

  • 分离「颜色」和「亮度」
  • 让a, b颜色的变化,对应的人眼的颜色感知,其变化是线性的

从下图的球形结构中可以知道,该球的中心位置在 Lab(50, 0, 0),对应到三原色是 RGB(119, 119, 119) 或者 #777777


Lab 颜色坐标系 (取自)

在实际使用中,Lab 颜色空间有什么用呢?

  • 作为一个色域最宽的空间,不管你想将照片作为何用,用 Lab 颜色空间来存储照片,都不会有任何信息损失
  • 调照片的时候,可以在不调明暗的情况下,调整整张照片颜色。

不调明暗,只调颜色 (取自http:///)

颜色管理

为什么需要颜色管理?

  • 我们在上面已经说到了很多颜色空间,其中除了 Lab 是设备无关的颜色空间外,其他诸如 RGB、CMYK 的颜色空间,都是设备相关的。

  • 像 RGB 这样的颜色,它只是定义了如何通过三个数字去对应颜色,但并没有绝对明确地说应该对应到哪个颜色,比如我们知道 RGB(255, 0, 0) 应该对应到红,但是到底多红呢? RGB 本身并没有定义。

看到问题所在了吗?我们最终看到的颜色,是一个「绝对的颜色」,但是我们在生产图片和视频的时候,用的可能却是一个「相对的颜色」。也就是说,有可能在 Photoshop 里我设置了一个 RGB(255, 0, 0) 最红的背景色,但实际在某个投影仪上,观众可能觉得这颜色还不够红。

所以怎么办呢?我们可以把这个想象成出国旅游,进入一个国家时,我们需要先还钱。在图像的世界里,设备就是国家,比如手机屏幕、显示器、投影仪、打印机;钱就是颜色数据。

颜色管理是如何工作的?

这个汇兑的过程,是如何完成的呢?整个过程要从保存图片开始,到展示图片为止。

sRGB / CMYK 等 ==(描述)==> CIE XYZ / CIE Lab ==(校准)==> 设备颜色。

而在这「描述」和「校准」的时候,用到的都是一个叫做 ICC Profile 的东西。无论你使用的是 Windows,还是 Mac,你的系统里都会有一个或多个专门的目录来存放 ICC Profile。

理论上,从光转化成数字存储,需要经过一次 ICC Profile 的 encode,然后从数字存储到重现成影响,还需要经过一次 ICC Profile 的转化。典型的例子就是,数码相机拍完一张照片,然后用打印机打印。

很好理解的是,不同设备,比如不同数码相机拍出的照片,需要不同的 ICC Profile 进行转化。而更进阶一点的摄影爱好者,可能会制作不同光照环境下的 ICC Profile 来获得更还原真是的照片效果。

对于 ICC Profile 的应用,最直观的就是在 Photoshop 里,在创建文件和打印文件的时候,都可以选择不同的 Profile。


创建时选择 ICC Profile

打印时选择 ICC Profile

重视颜色管理

对于设计师的实际工作中来说,颜色输出是否准确是一个非常关键的事情,而只有准确把我颜色管理,才能让你的设计在各种设备间无缝转移。所以,一定要重视颜色管理,重视 ICC Profile

转换颜色表示

原本想把各颜色空间中的颜色转换算法贴出来,不过赶巧搜到了一位大牛已经写好库,所以就直接贴一下链接,对计算机相关感兴趣的可以去看看。

https://github.com/nullice/ColorRNA


先告一段落

相信你已经发现了,颜色理论相关的知识相当庞杂,其中还有很大一部分设计到数学公式转化、计算机存储处理的部分,也是笔者感兴趣的部分,限于篇幅,这些等有机会再做整理。

感谢能读到最后的各位。

Reference

著作权归作者所有

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多