3.1 像素与色彩原理

我们每天看到的屏幕显示内容，本质上都是由无数个微小的光点组成的，这些光点就是像素。理解像素和色彩的原理，是掌握所有显示技术的基础。

像素与分辨率

什么是像素

像素（Pixel，是Picture Element的缩写）是组成数字图像的最小单位。每个像素是一个独立的小方块，有自己的颜色和亮度，大量的像素按照矩阵排列组合起来，就形成了我们看到的完整图像。

┌────┬────┬────┬────┐
│ 红 │ 绿 │ 蓝 │ 红 │
├────┼────┼────┼────┤
│ 绿 │ 蓝 │ 红 │ 绿 │
├────┼────┼────┼────┤
│ 蓝 │ 红 │ 绿 │ 蓝 │
└────┴────┴────┴────┘
4x4像素的简单图像示例

分辨率

分辨率是指屏幕或图像在水平和垂直方向上的像素数量，通常表示为宽度×高度，例如：

• 1920×1080（1080P）：水平方向1920个像素，垂直方向1080个像素，总共约207万像素
• 2560×1440（2K）：约368万像素
• 3840×2160（4K）：约829万像素
• 7680×4320（8K）：约3317万像素

注意：分辨率越高，图像越清晰细腻，但需要的计算和存储资源也越多。

PPI（像素密度）

PPI（Pixels Per Inch，每英寸像素数）是指每英寸长度上的像素数量，反映了屏幕的细腻程度。

计算公式：

PPI = √(水平像素² + 垂直像素²) / 屏幕对角线尺寸(英寸)

示例：

• 5.5英寸1080P手机：√(1920²+1080²)/5.5 ≈ 401 PPI
• 27英寸4K显示器：√(3840²+2160²)/27 ≈ 163 PPI

PPI越高，屏幕越细腻，当PPI超过300时，人眼在正常观看距离下就很难分辨出单个像素点了，这就是苹果所谓的“Retina屏幕“。

DPI（每英寸点数）

DPI（Dots Per Inch）通常用于打印领域，表示每英寸可以打印的墨点数量，和PPI类似但应用场景不同。

色彩模型

色彩模型是用来表示和描述色彩的数学模型，常见的色彩模型有以下几种：

RGB色彩模型

RGB是最常用的色彩模型，也是显示器使用的色彩模型：

• R：Red（红）
• G：Green（绿）
• B：Blue（蓝）

这三种颜色是色光三原色，通过不同强度的组合可以表示出几乎所有的颜色。每种颜色的强度通常用0-255的整数表示（8位）：

• R=0, G=0, B=0：黑色
• R=255, G=255, B=255：白色
• R=255, G=0, B=0：纯红色
• R=255, G=255, B=0：黄色

表示方法：

• 十六进制：#RRGGBB，例如#FF0000表示红色
• RGB函数：rgb(255, 0, 0)
• RGBA：带Alpha通道的RGB，rgba(255, 0, 0, 0.5)表示半透明红色

CMYK色彩模型

CMYK是印刷领域使用的色彩模型：

• C：Cyan（青）
• M：Magenta（品红）
• Y：Yellow（黄）
• K：Key（黑，这里K代表Key而不是Black是为了避免和Blue混淆）

RGB是加法混色（颜色叠加变亮），而CMYK是减法混色（颜料叠加变暗），因为印刷是靠颜料反射光线来显示颜色的。

HSV/HSB色彩模型

HSV是更符合人类感知的色彩模型：

• H：Hue（色相）：0-360度表示不同的颜色，0°是红色，120°是绿色，240°是蓝色
• S：Saturation（饱和度）：0-100%表示颜色的鲜艳程度，0%是灰色
• V：Value（明度）：0-100%表示颜色的明亮程度，0%是黑色

HSB和HSV类似，B代表Brightness（亮度）。这种模型非常适合设计师调整颜色，因为可以直观地调整色相、饱和度和亮度。

HSL色彩模型

HSL和HSV类似：

• H：Hue（色相）
• S：Saturation（饱和度）
• L：Lightness（亮度）

区别在于亮度的计算方式，HSL的50%亮度是纯色，而HSV的100%明度是纯色。

色彩深度

色彩深度（Color Depth）是指每个像素能够表示的颜色数量，通常用位深度（bit depth）表示：

我们常说的“真彩色“就是指24位深度，每个颜色通道8位，总共能表示2^24=16,777,216种颜色，已经超过了人眼能分辨的颜色数量。

Alpha通道

Alpha通道用来表示像素的透明度，0表示完全透明，255表示完全不透明。有了Alpha通道，我们就可以实现图像的半透明效果、图层混合等效果。

预乘Alpha（Premultiplied Alpha）：

• 普通Alpha：RGB值表示原始颜色，和Alpha值分开存储
• 预乘Alpha：RGB值已经预先乘以了Alpha值，这样在进行图层混合时计算更快，很多图形API都使用这种方式

伽马校正（Gamma Correction）

什么是伽马校正

人眼对光线的感知是非线性的，对于暗部的变化更敏感，对亮部的变化不敏感。而图像传感器和显示器的光电转换也是非线性的，伽马校正就是用来调整这种非线性关系，让显示的颜色符合人眼的感知。

伽马值γ用来表示这种非线性关系：

输出亮度 = 输入电压^γ

• 显示设备的伽马值通常是2.2，也就是说输入电压是0.5时，输出亮度只有0.5^2.2≈0.22，而不是0.5
• 我们在保存图像时会预先进行伽马编码，把线性的亮度值转换为适合显示的非线性值
• 显示时显示器会自动进行伽马解码，还原正确的亮度

伽马校正的重要性

如果不进行伽马校正，图像的暗部会丢失很多细节，看起来会偏暗或者偏亮。不同系统的伽马值可能不同：

• Windows系统默认伽马值是2.2
• macOS系统默认伽马值是1.8（旧版，新版也改成2.2了）
• 网页标准伽马值是2.2

这就是为什么同一张图片在不同系统上看起来可能亮度不同的原因之一。

色彩空间

色彩空间（Color Space）定义了色彩的范围和表示方式，相同的RGB值在不同的色彩空间中可能表示不同的实际颜色。

常见的色彩空间

1. sRGB：目前最常用的标准色彩空间，由微软和惠普制定，是网页、Windows系统、大多数消费级显示器的默认色彩空间，色域比较小。
2. Adobe RGB：由Adobe制定，色域比sRGB大，包含更多的青绿色，适合印刷和专业图像处理。
3. DCI-P3：数字电影行业使用的色彩空间，色域比sRGB大25%，现在很多高端手机、显示器都支持P3广色域。
4. Rec.2020：超高清电视（UHDTV）使用的色彩空间，色域非常大，是未来的发展方向。

色域

色域是指色彩空间能够表示的颜色范围，通常用CIE 1931色度图上的三角形区域表示。三角形面积越大，能表示的颜色越多。

广色域：通常指色域超过sRGB的显示设备，比如支持DCI-P3的屏幕，能显示更鲜艳的颜色，特别是红色和绿色。

色彩管理

不同设备的色彩空间不同，为了让同一张图片在不同设备上显示效果一致，就需要色彩管理：

• 每个设备都有自己的ICC配置文件，描述了设备的色彩特性
• 操作系统和软件会根据ICC文件进行色彩转换，保证颜色显示一致
• 专业设计人员需要使用经过校色的显示器，保证颜色准确

编程相关的色彩问题

1. 网页色彩表示：

   • 支持十六进制、rgb()、rgba()、hsl()、hsla()等多种表示方式
   • 现代浏览器支持16位颜色通道、广色域（CSS Color Level 4）

2. Canvas/WebGL颜色处理：

   • 默认使用sRGB色彩空间
   • 处理图像时要注意伽马校正和颜色空间转换
   • 浮点纹理和HDR渲染需要线性色彩空间

3. 图像处理注意事项：

   • 颜色计算（如模糊、混合）应该在线性色彩空间中进行，在sRGB空间直接计算会得到错误的结果
   • 半透明混合要注意Alpha通道的处理，特别是预乘Alpha的情况

思考问题

1. 为什么24位真彩色能表示的颜色数量已经超过了人眼的分辨能力，但还有30位、36位等更高的色彩深度？
2. RGB和CMYK都是三原色模型，为什么一个是加法混色一个是减法混色？
3. 伽马校正的作用是什么？如果没有伽马校正会出现什么问题？
4. 同样的RGB值为什么在不同的屏幕上显示的颜色可能不一样？