拓展

插值色彩空间

插值色彩空间指的是一种特别适合进行数学计算和混合的色彩空间。在这种色彩空间中，数值上的线性变化会对应人眼感知上的线性变化，从而确保在两个颜色之间进行平滑过渡（即插值）时，其结果在视觉上是均匀和自然的。

常见的插值色彩空间包括：

• 线性 RGB (Linear RGB)
• CIELAB
• OKLAB (一个更新的、旨在改进Lab的模型)
• OKLAB (带longer hue的OKLab)

与之相对，我们最熟悉的 sRGB 则不是一个良好的插值色彩空间。

---

为什么要引入插值色彩空间？为了解决什么问题？

引入插值色彩空间主要是为了解决一个核心问题：在标准的sRGB色彩空间中进行数学计算（如混合、渐变、阴影处理）会导致视觉上的错误和不自然。

问题所在：sRGB的伽马编码

sRGB色彩空间为了适应早期显示器的特性和优化存储，对存储的RGB值进行了伽马校正。这意味着sRGB文件中存储的数值并不是物理世界光线强度的线性表示，而是经过了一个非线性的变换（约等于2.2次幂的伽马曲线）。

这就导致了：在sRGB空间中，数学上的“中间值”并不是视觉上的“中间色”。

一个经典的例子：颜色混合

假设我们要在 纯黑色（0,0,0） 和 纯白色（1,1,1） 之间做一个平滑的渐变。

错误的做法（在sRGB空间插值）

直接在sRGB的数值上进行计算。中点颜色会是 (0.5, 0.5, 0.5)。

• 问题：由于sRGB的伽马，0.5 对应的物理亮度远低于真实亮度的一半（大约只有 0.5^2.2 ≈ 0.22）。导致渐变的中部看起来过暗，感觉像脏脏的灰色，而不是一个完美的中灰色。整个渐变在暗部会聚集很多颜色变化，在亮部变化又很少，显得不均匀。

正确的做法（在线性RGB空间插值）

1. 线性化：先将sRGB的起点和终点颜色转换到线性RGB空间。
2. 计算：在线性空间计算中点：(0.5, 0.5, 0.5)。这个 0.5 代表真实的、物理光强的一半。
3. 重新编码：将结果转换回sRGB空间进行显示。

• 结果：虽然最后显示出来的sRGB数值可能不是 0.5，但它看起来是完美的中灰色，整个渐变过渡非常平滑和自然。

sRGB下的色彩插值：

linear RGB下的色彩插值：

INFO

在CSS color level4中支持在linear-gradient()、color-mix()通过<color-interpolation-method>指定色彩空间

#container {
  background: linear-gradient(in srgb to right, #000000, #ffffff);
}

另一个重要问题：物理渲染的正确性

在3D渲染和游戏引擎中，光线的相互作用是基于物理规律的，而物理世界的光线强度是线性的。

• 错误做法：用sRGB纹理直接进行计算，得到的结果是错误的（如光照不准确，颜色发灰）。
• 正确做法：所有计算都在线性空间进行，最终输出时再转换回sRGB。现代图形API和引擎都强制或强烈推荐这种工作流。

---

总结对比

特性	sRGB色彩空间	插值色彩空间（如线性RGB, CIELAB）
目的	用于存储和显示，优化带宽和匹配传统显示器。	用于计算和混合，保证数学计算的视觉正确性。
数值关系	非线性。数值变化与物理光强不成正比。	（感知）线性。数值变化与感知亮度的变化成正比。
插值效果	直接插值会导致视觉不均匀（中部发暗、色相偏移）。	插值结果视觉上平滑自然。
主要应用	图片格式（JPEG, PNG）、网页、大部分软件界面。	图像处理算法、3D渲染/游戏引擎、专业色彩校正、渐变生成。

TIP

引入插值色彩空间的概念是为了解决一个根本性的矛盾：存储/显示优化带来的非线性 与 数学计算和物理模拟所需的线性 之间的矛盾。

而产生这种矛盾的根本原因是：CRT显示器的电压和最终产生在屏幕上的亮度不是线性的

sRGB

概述

sRGB（standard Red Green Blue）是由惠普（HP）和微软（Microsoft）于1996年共同创建的标准红绿蓝色彩空间。其设计初衷是成为显示器、打印机以及互联网（WWW）上一个通用、标准化的色彩模型，旨在确保在不同设备上呈现的颜色具有相对一致性。如今，它已成为图像文件、网页和绝大多数消费级显示设备的默认色彩空间。

核心技术规格

1. 色域（Gamut）

sRGB 定义了一个基于 CRT 显示器荧光粉特性的、相对较小的色彩范围（色域）。它覆盖了大致相当于 71.6% 的 NTSC 色域 和 76.9% 的 Adobe RGB 色域。它无法再现非常饱和的青色、纯黄色和某些深红色。

2. 白点（White Point）

sRGB 使用 D65 作为标准白点。D65 代表色温约为 6504 K 的日光，是在日光下观察印刷品和图像的标准白光。

3. 原色色度坐标（Chromaticity Coordinates）

sRGB 标准定义了其 RGB 三原色在 CIE 1931 色彩空间中的精确坐标：

原色	x	y
Red	0.6400	0.3300
Green	0.3000	0.6000
Blue	0.1500	0.0600
White (D65)	0.3127	0.3290

4. 伽马值（Gamma）与传递函数（Transfer Function）

这是 sRGB 最复杂且最重要的特性。其传递函数分为两段：一段是接近线性的部分，另一段是伽马曲线部分。

编码过程（从线性光到 sRGB 信号）：

$$C_{srgb}=\{\begin{array}{ll}12.92\times C_{linear}& \text{if }{C}_{linear}\le 0.0031308\\ 1.055\times C_{linear}^{1/2.4}-0.055& \text{if }{C}_{linear}>0.0031308\end{array}$$

• C_linear：场景或图像传感器捕获的线性亮度值（范围 [0, 1]）。
• C_srgb：存储于 JPEG、PNG 等文件或通过网络传输的编码后的信号值（范围 [0, 1]）。

解码过程（从 sRGB 信号到显示亮度）：

$$C_{linear}=\{\begin{array}{ll}\frac{C_{srgb}}{12.92}& \text{if }{C}_{srgb}\le 0.04045\\ {\left(\frac{C_{srgb}+0.055}{1.055}\right)}^{2.4}& \text{if }{C}_{srgb}>0.04045\end{array}$$

注意：虽然其有效伽马值约为 2.2，但使用分段函数是为了在低亮度区实现平滑的零斜率过渡，避免数值计算问题。

5. 图像状态标识

在支持色彩管理的系统中，sRGB 图像应嵌入 ICC 配置文件（通常是 sRGB.icc 或 sRGB.icm），以告知系统如何正确解读文件中的颜色数值。未嵌入配置文件的图像通常也被默认为 sRGB 内容。

为什么要创建 sRGB？

sRGB 的引入旨在解决一个根本问题：色彩解释的混乱。

在 sRGB 之前，不同制造商设备的色彩特性各不相同。一个 RGB 值 (255, 0, 0) 在一台显示器上可能是一种红色，在另一台上则是另一种红色。sRGB 通过定义一个绝对的、设备无关的色彩标准，确保了颜色在不同设备上能够大致保持一致，极大地促进了互联网内容的色彩统一性。

优势与局限性

优势

1. 广泛兼容性：是事实上的行业默认标准，被所有操作系统、浏览器（除非手动配置）、软件和消费级硬件支持。
2. 节省存储空间：通过伽马编码，在 8bit/通道的深度下优化了数据分布，减少了暗部的色彩断层。
3. 符合人眼感知：其非线性响应与人眼对亮度的非线性感知相匹配。

局限性

1. 色域较窄：无法覆盖高端打印机、广色域显示器（如 Adobe RGB, DCI-P3）所能表现的更鲜艳的颜色。对于专业摄影、印刷和影视后期制作来说，色域可能不够用。
2. “陷阱”特性：其非线性编码意味着直接在 sRGB 数值上进行色彩混合、模糊等数学运算会得到错误的、发灰的结果。正确的做法是必须先转换到线性色彩空间进行计算，然后再转换回 sRGB。这催生了现代渲染中的线性工作流。

应用场景

• 网页和网络应用：所有 HTML、CSS 中定义的颜色默认都在 sRGB 色彩空间中。
• 消费级数码摄影：绝大多数相机、智能手机默认使用 sRGB 作为 JPEG 输出的色彩空间，因为它最可能在不同设备上“看起来正确”。
• 计算机操作系统和软件界面：UI 元素普遍使用 sRGB。
• 常见的图像格式：如 JPEG、PNG、GIF 等，除非特别注明，否则都应被视为 sRGB 色彩空间。

总结

sRGB 是一个在兼容性和视觉有效性之间取得极致平衡的工程杰作。它通过一个相对狭窄但足够使用的色域和一个精心设计的伽马传递函数，成为了数字时代色彩通信的“通用语言”。理解 sRGB 的非线性特性（伽马编码）对于进行专业的图像处理和计算机图形学工作至关重要。