穿越现实世界与编程世界的颜色——颜色的起源

前言

我们生活在一个色彩缤纷的世界里，万紫千红，百花争艳，五光十色。各种各样的颜色信息纷纷涌入我们的眼球，帮助我们浸染出这美好的世界。而在程序世界里，颜色也是不可获取的。拿前端工程师来说，我们要还原设计稿，将设计稿上的功能用代码一一实现，这些都离不开颜色的浸染与填充。但是，身为前端工程师的你，真的了解程序世界的颜色么？它与现实生活中的颜色有什么异同呢？我们在程序世界中，又有哪些方法可以表示颜色，为什么要这么表示，有设么好处呢？如果你对这些都还一头雾水，那么本文将为你吹走这恼人迷雾，带你领略这穿梭于现实世界与编程世界的颜色的奥妙。

颜色的起源

通常来说，我们看到的颜色，离不开以下几个要素：

光源

即发光的物体，如太阳☀️、灯泡💡等

• 通常我们不会与太阳直视，不然眼睛会瞎。但也有很多直视光源的场景，比如说在夏日漆黑的夜空里仰望繁星，追逐萤火虫，又或者是，你现在在电脑/手机前观看这篇文章，这些都是我们直视光源的例子，而这里的光源分别是繁星、萤火虫、电脑/手机的液晶屏幕。此时，我们光源的一个传播路径是这样的：

  光源 => 人眼 => 大脑
  

  而这个时候，我们看到的颜色，其实就是光源本身发出的光的颜色了。

  那么，什么是光的颜色呢？

  我们在高中物理中学到过，光其实就是一种电磁波，我们们所说的光的颜色，其实值的就是光的波长。

  

  通常情况下，一般人所能看到的光的范围是 400 ~ 760 纳米之间波长的光。所以，我们通常把这个区段的电磁波称之为：可见光。

  人能看到的波长最大的可见光的颜色是：红色

  人能见到的波长最小的可见光的颜色是：紫色

  因此，如果某种光源发出来的光的波长比红色光的波长还大的话，我们称之为：红外线，而比紫色波长还小的光我们称之为：紫外线。

  在我们现实生活场景中，不同波长的光通常会有不同的名字，方便我们在日常生活进行中区分。如：手机通信用的 无线电波，微波炉加热时使用的 微波，我们烧火时炉火中发出的 红外线，在我们餐厅灯场所用于消毒的紫外灯发出的 紫外线 ，我们去医体检时检查身体用的 X射线，以及宇宙中爆发的 伽马射线 等等。

  在生活中，我们大多数场景所见到的光都不是单色光，而是多种光混合的混合光，相信很多同学小时候都有玩过三棱镜实验吧，阳光透过三棱镜照在桌面上，就变成了七色彩虹🌈，这就是利用了不同过长的光有不同折射率实现的。这也可以证明我们平时看到的太阳光是混合光的事实。

  而我们在生活中遇到的为数不多的纯色光，是 激光，激光是某些元素的原子受到光照激发而产生的光。这样的光的强度一般的非常高。如果这种单色光直射肉眼，会让眼睛失明，所以切记不能直视激光。

  除此之外，我们如果想要获取单色光，还有一种方法，那就是通过过滤掉混合光源当中的其他光。

反射表面

当光线照射到物体上时，有一部分的光会被物体吸收，但绝大部分的光会被物体反射回去。在自然界中，反射现象远远多于投射现象。反射是颜色产生的另一个重要的环节，大部分自身不发光的物体，之所以我们能够看到它，就是因为它们反射了光源照射到他们身上的光。

镜面反射

镜面反射是指若反射面比较光滑，当平行入射的光线射到这个反射面时，仍会平行地向一个方向反射出来，这种反射就属于镜面反射

漫反射

颜色的产生主要是源于漫反射。

漫反射的原理其实很简单，相较于镜面反射表面比较光滑而言，漫反射是因为物体表面很不光滑，从而导致光线照射在物体上时，产生了不同方向的反射。

结合我们上面说的绝大部分的光都是混合光，而一个漫反射表面的材质，对于每一种颜色的光来说，都有不同的吸收和反射的程度。所以，我们如果想要精确的描述一个漫反射的材质对于光的吸收和反射的情况，通常是使用如下曲线表示：

假如说，某一种材质的物体，对于一种颜色的光有很强的反射比率，对其他颜色的光几乎不反射的话，我们通常就会说这个材质的物体的颜色纯度很高，换句话说，就是这个材质的物体很鲜艳。 例如：我们看到的一个红灯笼，之所以觉得它的红色很显眼，那是因为它对红色的反射比率很高，而除了红色之外的其他颜色则几乎不反射。

假如说，某一个材质的物体，对所有颜色的光反射比率都非常的接近的话，那么这个物体表面的颜色纯度就很低了，就像是一块被染满了不同颜色的布。又或者是，还是刚刚那个颜色很显眼的红灯笼，如果不小心有墨水滴在上面了，那么这个红灯笼的颜色纯度就会降低了。

如果说一个物体的反射率比较高，我们就会说这个物体比较亮，与之相反的，如果一个物体的反射率比较低的话，我们就说这个物体比较暗。

HSL

到了这里，我们就要引出我们今天要讲的程序世界中的第一种颜色表示方法：HSL了。

• HSL(色相 Hue、纯度 Saturation、亮度 Lightness) : 是一种规定了色相、纯度、亮度这三个关键要素的颜色表示形式。用着三个要素来表示一个颜色。

  此处仅对 HSL 介绍到这里，在后文中，我们会详细的介绍这个颜色表示形式。

人眼

人眼是用于感知外界视觉信息的器官，人眼的构造当中有两种细胞可以用于感光，分别是：视杆细胞、视锥细胞。

视杆细胞专门用于感知弱光，对颜色的区分能力较弱，因此我们今天就不多探究视杆细胞了。我们主要来看看对颜色区分能力比较强的视锥细胞。

正常人的视锥细胞有三种，分别用于感受：红、绿、蓝 三种颜色。而有一些人群可能会发生一些基因变异或者病变，他们拥有的这些细胞可能少于或者超出正常水平，就导致了我们常说的 色盲 和 超视觉者 这样两种特殊人群。

人类的这三种视锥细胞只是主要用于感受 红、绿、蓝 三种颜色，但并非完全不感受其他颜色的光，所以，即使我们的光是纯色的光，但我们人类还是没办法看到相当纯粹的颜色。因为三种视锥细胞都会对不同颜色的光起反应，仅仅只是敏感程度不一样而已。

就像我们上面所说的，自然界中的光，通常都是非常复杂的混合光，但我们却只有三种视锥细胞，那么，对于那些波长不在我们视锥细胞敏感范围的光，我们究竟是如何识别的呢？其实这就要靠我们的大脑进行“脑补”了，因此我们也可以返现，很多不同成分的光组合在一起，有时会产生相同的效果，这就是我们“脑补”的产物了。

RGB

到这里呢，我们又要引申出今天要学习的另一种颜色表示形式，相信也是绝大部分前端、设计同学非常熟悉的方式：RGB 的表示形式。我们的计算机之所以使用 RGB 的方式来表示颜色，就是利用了我们人眼的特点，反正人类的眼睛只对三种光线比较敏感，那我们只需要用三种颜色的光线就可以完成人类对于三种颜色的刺激了，这样就可以让我们看到任何颜色的光了。

其实不仅仅是我们软件实现上使用 RGB，我们的 LCD 屏幕，其实也是由大量的三色光源的像素组成的，把他们放大后，我们看到的就是下面这样子：

上面说的是针对发光材质而言的，那么对于日常生活中的一些反光材质有时怎样的呢？也是用 RGB 来表示吗？

答案当然不是，我们画家所使用的颜料的三原色搞好是我们红绿蓝这三种颜色的补色，即：青（Cyan）、品红/洋红（Magenta）、黄（Yellow），也就是：CMY颜色。在印刷行业当中，经常会使用这种 CMY 颜色来表示颜色。但是，在印刷时，黑色是最常使用的，我们经常“白纸黑字”，用的最多的还是黑色墨水，但如果按照 CMY 颜色的混合规则，黑色需要使用三种颜色均匀混合才能够得到，但这又有一个问题了。在实际的商业化中，黑色的油墨价格低廉，远低于另外三种颜色的油墨，我们使用更贵的油墨混合得到便宜的黑色油墨，这明显是“傻子行径”。因此，聪明的人们就在原本的 CMY 颜色的基础上，再加上了黑色，即：CMYK 颜色，这种颜色表示法就是满足印刷行业要求的一个印刷表示法了。

大脑

人眼的视锥细胞和视杆细胞接收到了光源或反射表面反射过来的光线刺激之后，需要经过大脑的识别，我们才能够知道自己看到的是啥。

那么，是不是我们眼睛看到的是什么颜色，大脑识别出来的就是什么颜色呢？很多科学家也一直有这样的一个疑问，如何证明我们每个人看到的颜色是一样的呢？这涉及到了我们大脑意识的产生，这种暂时无法考究的哲学问题我们就暂且不深入探讨。但人类在几千年的进化历程当中，学习到了大量的经验与知识，而这些经验与知识，会明确的影响到人类对于颜色的感知与判断。实际上，人脑对于颜色的认知并未完全理性的，人脑会根据一些特定的场景或者故事再进行识别与判断。

结语

至此，我们已经了解了现实世界的由来，我们在现实世界当中所能看见的颜色，离不开：光源、发射表面、人眼、大脑的相互协作。我们也有简单介绍了一下在程序世界中的两种颜色表示方式 HSL 和 RGB 与与我们现实世界的联系，以及为什么会有这样的表示形式，如果你想了解更多关于程序世界的颜色表示形式，可以移步 《穿越现实世界与编程世界的颜色——编程世界中的颜色》

原文链接：https://juejin.cn/post/7328321496363450383 作者：kinertang