数字色彩 - FimTale

AnonLv.1

夜骐

数字绘画笔记

图

著

中

发表于：

本作属原创作品，未经作者同意请勿转载。

连载中

其他题材

121

18,109

612

数字色彩

第 2 章

8 年前

4008

本章节已完成

Chapter 2 数字色彩

本来打算把这个放在第三章，但光线比色彩难理解一点，而且可能用到色彩知识，所以把色彩提前了。讲道理数字色彩是非常复杂的一门学科，一些高校甚至将其设定为计算机科学下的一个研究方向。我不是CS的，所以能说的十分有限，这里只捡简单的讲。

*先说一下，讲数字色彩可能会用到一些公式，请不要恐慌，大多数公式都是比较容易理解的。

子目录：

Chapter 2.1 色相，饱和度和明度（Hue, Saturation and Value/Lightness/Brightness）
Chapter 2.2 色彩模型（Color Model）
Chapter 2.3 RGBA通道（RGBA Channel）
- 2.3.1 RGBA
- 2.3.2 位深
- 2.3.3 [0, 1]与256
- 2.3.4 HEX-十六进制色彩表示
- 2.3.5 色彩模型的转换
Chapter 2.4 色彩叠加（Color Blend）
- 2.4.1 叠加原则
- 2.4.2 溢出？
- 2.4.3 单图片处理
- 2.4.4 常见叠加方式

Chapter 2.1 色相，饱和度和明度（Hue, Saturation and Value/Lightness/Brightness）

通常情况下，数字绘画中的选色都是基于HSV的，色相（Hue）的单位多为度，在区间[0, 360]之间；饱和度为浮点数，区间为[0, 1]；明度也为浮点数，位于[0, 1]区间。

通常说的“赤橙黄绿青蓝紫”描述的就是色相。对于色相，很多人都没意识到的一点是颜色其实是不平等的，比如绿色黄色比红色亮，蓝色比青色暗，这是肉眼对不同波长光线敏感度不同所致，所谓“高级灰”很大程度上就是在保持明度饱和度适中的情况下追求色相的变化；对于数字绘画，理解相对颜色和绝对颜色也很重要，这些内容将在后文详述。在饱和和明度都为1的情况下，色相变化大概是这个样子：

饱和度（Saturation）可以理解为色彩的强度。比如画水彩，颜料量不变的情况下，加的水越多，颜色越淡，如果一小坨颜料加一缸水，那几乎就是透明的。人们说的“大红大绿”就是描述饱和度极高的红色和绿色。数字绘画也是差不多的道理，在色相为红色，明度为1的情况下，饱和度变化大概是这个样子：

明度（Value/Lightness/Brightness）比较好理解，就是色彩的明亮程度。在色相为红，饱和度为1的情况下，明度变化大概是这样：

如果饱和度为0，那么明度就变成灰度（grayscale）了：

注意当饱和度为0时，任何颜色都是黑白的。

Chapter 2.2 色彩模型（Color Model）

色彩模型在这里指的主要是RGB、RYB和CMY/CMYK。

RGB即红绿蓝（Red, Green, Blue）；RYB指红黄蓝（Red, Yellow, Blue）；CMYK指青洋红黄黑（Cyan, Megenta, Yellow, Black）。

其中RGB是数字色彩；RYB是传统绘画色彩；CMYK是印刷色彩。

注意当讨论色彩模型时，CMKY更多时候被说是CMY，黑色(K)是印刷行业为减少墨汁消耗而加上的。

RGB使用加色（Additive Color）；CMY和相近的RYB使用减色（Subtractive color）。

此处为了方便讲解，不妨将RGB颜色用(r, g, b)表示，其中r, g, b ∈ [0, 1]。

加色和减色的根本区别在于其对光的反应形式，加色模型的色彩释放光，比如灯泡、显示屏和太阳，因此颜色越多就越亮。(1, 0, 0)是红，(0, 1, 0)是绿，(0, 0, 1)是蓝，(1, 1, 1)就会成为白（插一个趣闻：你可能没注意过，但很多地方的信号灯黄灯实际是红灯和绿灯同时亮）。

RGB色彩

减色会随着颜色增多变暗，因为其并不释放光，而是反射光。生活中看见的颜色就是这个道理，比如绿色的物体不是发出绿色的光，而是吸收了其他波长的光线，只反射560–520纳米的光。这也是传统颜料绘画的色彩模型，类似的模型也使用在喷绘等艺术上。

CMYK色彩，K在中间 [4]

对于和数字绘画的转换，可以认为在基于RGB的描述下，增色是并集运算（Union），减色是交集运算（Intersection）。

比如对于RGB模型，红色混蓝色：

也就是洋红。而对于传统颜料形式：

(0, 0, 0)也就是黑色。如果你有颜料经验，就会知道事实的确如此，虽然想配出纯黑比较困难。

关于如何在数字绘画中选色，我个人有两种建议。一个是硬核选色，就是考虑物体的固有色、反射、折射、环境色和阴影状况，直接在拾色器中选色；

另一个适用于传统颜料绘画转来的同学，不过这个方法并不是所有软件都能行，它基本上就是直接在数字形式里用传统方法调色。把基础色涂起来，下图从12点开始依次是海蓝（Ultramarine Blue），钛白（Titanium White），深红（Crimson），中黄（Cadmium Yellow Hue）以及赭石（Burnt Umber）。红绿蓝负责色相，白色偏冷会提高明度但会减低饱和度，赭石偏暖会提高饱和度但会减低明度，这五个几乎能调出任何颜色来。

这个方法的问题主要出在黄色和蓝色上，很多绘画软件的笔刷是基于采样的，也就说黄色混蓝色在色相上可以达到绿色，但会损失大量饱和度以及明度。

Chapter 2.3 RGBA通道（RGBA Channel）

2.3.1 RGBA

数字图片和名字一样，是将图片以数字形式储存，使用文本工具打开图片，看到的很可能就是一个数字矩阵。常见的png、JPEG、bmp等格式都是基于像素，每一个像素至少有RGB三个数值，png还有一个A（Alpha）。

以一个游戏渲染图为例，RGB三个通道放在一起看是这样子：

单独看R通道：

G通道：

B通道：

假设一个图片的横长n像素，纵宽m像素，那么单个通道的数字模样大概是这样：

三个通道在储存上是相互隔离的，相当于储存该色彩的明度信息。叠加在一起就成为了一个"m*n*3"的三维矩阵，用图像表示大概长这样：

*实际图片储存的数据格式根据图片格式有所不同，尤其是JPEG等有损压缩

Alpha通道又称不透明度（Opacity），在一些图片格式中用于保存像素的透明属性。0为完全透明，1为完全不透明，映射到色彩上就是“黑透白不透”。

以一个无背景雕像为例：

这个东西的Alpha通道长这样：

Alpha通道通常是自动生成的，比如这个雕像就是根据物体边界确定不通明度。大多数的数字绘画软件无法直接编辑Alpha通道，可以通过遮罩等方法间接访问不同明度，达到类似的效果。

大多数情况下Alpha不会直接影响绘画，但是有些时候不透明度会造成边界锯齿或白边等现象（在图像合成领域非常常见，看起来像是劣质的绿屏抠像），所以可能需要砍Alpha边界。

实际生产中的通道使用更加广泛，比如高阶绘画会使用一些技巧生成纵深（Z-depth），然后根据纵深加环境雾和景深。一些图片格式（exr，tiff等）还可以自定义通道并同时储存多个通道，有兴趣可以多加了解。

2.3.2 位深

在进入下半部分之前，说一下数字和模拟信号。现实中的颜色声音等都是模拟信号（Analog），是连续的；但是电脑无法储存这种形式的数据，只能使用“采样”，将模拟信号切成小段，储存为离散数据，然后重组来近似原始信号。这种方法好处在于便于理解，而且根据需要可以使用不同的采样精度；坏处是不管采样如何精确，也永远无法完全还原原始信号。在声音里，这个采样被叫做采样率（Sample Rate），数字图片里主要是位深（Color depth / Bit depth）。

一个Bit（位）就是一个二进制数，对于单一通道：1位只有0和1两个数值； 2位的，颜色数值有00, 01, 10, 11四种可能（所以2位不是双色）；同理3位有8种颜色，n位有2^n种颜色，8位的每个色彩通道就有2^8=2*2*2*2*2*2*2*2=256种颜色。

但是图片有RGB三个通道，所以实际颜色数为

依旧以8位为例，每个像素点的可能颜色有

也就是16777216种。

位深偏低时，图片会有比较严重的失真和噪点，位深过高时，图片大小会几何增加。

除非你画的是影视贴图，对正常的数字绘画来说，8位是比较充足的。

2.3.3 [0, 1]与256

但之前我们还用了[0, 1]这个区间，怎么把这个区间和8位的256色联系起来呢？

这就是计算机的巧妙了。当储存小数时，计算机并不能完全保留小数的精度，只能用位去近似，这里用到了一个绝对收敛的无穷级数（这个词是高数内容，不必在意）：

如果我们把这个序列中的每个分数都乘一个前缀k，k要么是0要么是1，那么最终得到的数字也会在0和1之间：

将这些k单独拿出来，就得到了一个位序列：

这个序列中的数字要么是0要么是1，而这个序列的长度，就是位深。

比如8位色彩192对应小数表示0.75，用这个K序列表示就是11000000：

同样的道理，10位颜色就是有十个0或1，16位就是有16个0或1，但不管有多少位数，这个序列表示的小数总是在0和1之间。

2.3.4 HEX-十六进制色彩表示

8位色彩还有一个好处，就是能用16进制（Hexadecimal）表示。

16进制的单位数值如下：0, 1, 2, 3, 4, 5, 6 ,7 ,8, 9, A, B, C, D, E；对应十进制0到15，因而一个十六进制数字位可以表示16种数值，如果使用两个十六进制位，16*16=256，也就是说2个16进制数就可以表示一个8位图像某像素的单通道数值，6个16进制数就能表示一个像素的RGB数值。换算关系举例比较容易明白，以一个HEX颜色#27AAE1为例：

（0x表示十六进制）

2.3.5 色彩模型的转换

这个话题牵扯的数学计算比较多，这里我就不讲转换公式了，只想提一下转换概念。

之前我们已经看到了，RGB色彩可以表示为一个三维向量(r, g, b) 的形式，如果我们定义一个三维空间，那么三个轴在0到255之间的区间所包裹起来的方块就是8位RGB色彩所能表示的所有色彩。用图像表示大概是这样：

Color Cube, Source Code

注意这个图因为我的设备能力没法把全部色彩遍历一遍，只间隔采样采了从0-248的大概三万个点。这个方块可以帮助大家更好的感受RGB关系，可以看到的7个角上就是几个基础色，比如左下角是(0, 0, 0)黑色，右上角是(248, 248, 248)接近白色，中下角是(248, 0, 0)接近红色，绿色被挡在了后边。

红绿蓝是数字色彩的三个基本色彩，我们也可以说是三个基本属性。如果我们能找到其他三个描述色彩的互不干扰的属性，那么这三个属性也能组成一个三维空间，我们必定可以在这个三维空间中找到一个区域，使其成为RGB色彩模型的映射(Mapping)（相关内容参考线性代数）。依照这个原理，HSV和CMY都可以表示一个三维空间，因此这三者中的任意两者之间都必定存在一种对射关系，简单地说就是可以相互转换。

比如HSV方块长这样：