常用色彩模式及基础概念整理

这篇将UI设计时的颜色模式，混合页面开发时的颜色设置，混在一起，整理了一下常用到的几种模式及其基础概念，其中标有 图标的，为 CSS 中可以直接使用的颜色模式。

 RGB 光色模式

由 红（R | Red）、绿（G | Green）、蓝（B | Blue）三种颜色通道的变化以及它们相互之间的叠加来得到其他颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的色彩模式之一。

此模式不依赖外部光源，是一种主动呈色的模式。

主要应用于显示设备上。

每种颜色的取值范围均为 0 至 255。

Photoshop 中也称 加色模式，以 黑 为底色加，即 RGB 均为 0 是黑色，均为 255 是白色。

---

CMYK 印刷模式

由 青（C | Cyan）、洋红（M | Magenta）、黄（Y | Yellow）、黑（K | blacK）混合叠加来得到其他颜色。其中 黑 用 K 来表示，而不用 B 的原因，是因为整体色彩学中，已经将 B 赋给了 Blue。

此模式是一种依靠反光的色彩模式，依赖外部光源，是一种被动呈色的模式。

主要应用于工业印刷中，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓的“全彩印刷”。

每种颜色的取值范围均为（%） 0 至 100。

Photoshop 中也称 减色模式，以 白 为底色减，即 CMY 均为 0 是白色，均为 100 是黑色，而实际应用中，由于油墨的纯度等其它问题的影响，需引入 K 来得到目标颜色。

---

Lab 标准色模式

由 亮度（L | Luminosity）、洋红至绿色的范围（a）、黄色至蓝色的范围（b）的变化构成颜色，它包含了 RGB 及 CMYK 的所有色域，并能表现它们不能表现的色彩。人的肉眼能感知的色彩，都能通过 Lab 表现出来。另外，Lab 的绝妙之处还在于它弥补了 RGB 色彩分布不均的不足，因为 RGB 在蓝色到绿色之间的过渡色彩过多，而在绿色到红色之间又缺少黄色和其他色彩。

此模式是一种不依赖设备及场景的模式，也就是说，在所有的显示器和设备下，它显示的色彩都是一致的。

亮度的取值范围是（%）0 至 100，绿色-洋红色轴及蓝色-黄色色轴的取值范围为 -127 至 128。

这是一种扩展性非常好的颜色模式。

---

 Grayscale 灰度模式

由黑白两色构成图像。

---

 HSL 

由 色相（H | Hue）、饱和度（S | Saturation）、亮度（L | Lightness）三个颜色通道及它们相互之间的叠加来得到其他颜色，这个模式是前端开发中常用到的一种模式，当然，平时可能使用 RGB 模式更多。

色相的取值范围为 0 至 360，饱和度及亮度的取值范围为（%）0 至 100。

在 Photoshop 中，由于 L 已经分配给了 Lab 中的 Luminosity，所以，用 B 来表示。

RGB 模式是调色混合模式，通过添加不同份量的三原色来调和颜色，而 HSL 是将人眼可见的颜色，平均分布在一个色盘内，在不改变亮度及饱和度的情况下，旋转这个色盘，可以得到不同的颜色。

在前端开发中，我们只需要记住6大主色的位置，便可轻易得到相同饱和度及亮度下的不同色相颜色，6大主色对应的色相值如下：

0 / 360 红

60 黄

120 绿

180 青

240 蓝

300 洋红