网页色彩空间：sRGB、DCI-P3、Rec.2020、伽马，以及相同十六进制颜色在两台屏幕上看起来不同的原因
什么是色彩空间：原色、色域与参考白点
色彩空间定义了三件事：一组原色、一个参考白点，以及一个转换函数。原色以 CIE 1931 xy 色度图上的精确坐标表示——这张二维图形涵盖了标准人眼所能感知的所有颜色。三个原色在图上形成一个三角形，三角形内的所有颜色都能通过混合原色来重现，三角形外的则无法做到。这个三角形就是该色彩空间的色域。
参考白点是三个原色以最大强度同时输出时产生的颜色。大多数消费性设备与网页标准采用 D65——一个模拟约 6500 K 色温日光的标准光源。两台色域原色相同但白点不同的显示器，呈现中性灰色时结果会有所不同。当浏览器解释 CSS 颜色值 #808080 时，它会假设使用 sRGB 搭配 D65 白点，并假设你的显示器符合这个预设。
sRGB：1996 年标准化的网页通用基准
sRGB 由国际电工委员会于 1996 年制定为 IEC 61966-2-1 标准，旨在匹配 1990 年代中期典型消费级 CRT 显示器的特性。其红色原色的 CIE xy 坐标约为 (0.64, 0.33)，绿色约为 (0.30, 0.60)，蓝色约为 (0.15, 0.06)。由此形成的色域三角形涵盖了 CIE 1931 色度图中标准人眼可见色彩约 35% 的面积。
每一个 CSS 十六进制颜色值、每一张未嵌入 ICC 配置文件的 PNG 或 JPEG 图片，以及 HTML canvas 上的每个像素，默认都属于 sRGB 色彩空间。浏览器在未收到其他指示时，一律假定使用 sRGB。sRGB 的实际限制在色域边缘最为明显：高饱和度的红色、鲜艳的绿色和纯青色都无法完整表现。户外拍摄的成熟番茄，其红色往往超出 sRGB 色域；图片文件会将该红色截切到最接近的 sRGB 颜色，使屏幕显示的颜色比实物略显暗淡。
DCI-P3：数字电影标准进入消费级显示器
DCI-P3 源自数字电影院倡议联盟。与 sRGB 相比，P3 的原色有所偏移：红色原色略偏橙色（xy 约 0.680, 0.320），绿色则更接近纯绿（0.265, 0.690）。由此形成的色域涵盖 CIE 1931 色度图约 45.5% 的面积，比 sRGB 约宽广 26%。这个更宽广的色域旨在使数字电影放映机能够重现接近传统胶片电影的饱和色彩。
大约从 2015 年起，消费级显示器开始采用 P3 原色——Apple 率先在 27 英寸 iMac 上引入 P3 屏幕，2016 年的 iPhone 7 也随之跟进。在使用 P3 色彩空间的 P3 显示器上，#FF0000 呈现的红色明显比 sRGB 显示器上更为饱和。CSS 通过 color() 函数支持 P3：color(display-p3 1 0 0) 指定最饱和的 P3 红色。截至 2023 年，所有主流浏览器均支持此语法，在具备 P3 能力的硬件上显示更宽广的色域，在较窄色域的显示器上则自动截切至 sRGB。
Rec.2020：广播未来标准与当前显示器的差距
Rec.2020（正式名称 ITU-R BT.2020）由国际电信联盟于 2012 年制定，作为超高清电视的标准。其原色接近单色光：红色定义于约 630 nm，绿色约 532 nm，蓝色约 467 nm。由此形成的色域涵盖 CIE 1931 色度图约 75.8% 的面积，约为 sRGB 的两倍。
标准与实际之间的差距相当显著：2025 年市面上没有任何消费级显示器能重现完整的 Rec.2020 色域。高端专业参考显示器在三维色彩外观模型 CIECAM02 中，大约能覆盖 75–80% 的 Rec.2020 体积。HDR 视频内容通常以 Rec.2020 原色搭配感知量化器（PQ）或混合对数伽马（HLG）转换函数进行母带制作，但流媒体平台的最终交付信号通常会通过色调映射降至 Display P3 或 sRGB 范围内。
伽马与转换函数：为何 sRGB 编码不是纯幂次函数
「伽马 2.2」常被用来描述 sRGB，但 sRGB 实际使用的是分段转换函数，而非纯幂次函数。IEC 61966-2-1 标准定义了两段：对于极低亮度值（线性 C 不超过 0.0031308），编码为线性——C 乘以 12.92；超过此阈值后，则套用近似于 1.055 × C^(1/2.4) − 0.055 的幂次曲线。结果在大部分可用范围内非常接近伽马 2.2，同时避免了纯幂次函数在零值附近近乎垂直的斜率问题。
这种编码在图像处理中十分重要。在伽马编码域中对相邻像素取平均进行缩图，会产生比在线性光域中取平均稍暗的结果——这是被称为「伽马暗化平均问题」的已知缺陷。正确的图像缩小流程应先线性化数值、取平均，再重新编码。CSS 渐变与 color-mix() 默认在 sRGB 空间中混合，即在伽马压缩后的数值间插值，而非在线性光中进行；CSS Color Level 4 允许通过 in srgb-linear 明确指定插值色彩空间以覆盖此默认行为。
相同十六进制颜色值在不同屏幕上显示不同的原因
有几个独立因素可以解释为何 #FF6600 在不同屏幕上看起来不同。首先，如果某台显示器具备更宽广的物理色域（P3 硬件），但操作系统未提供色彩管理，它可能会将 sRGB 信号值直接映射到更宽广的原色中，导致所有颜色看起来过于饱和。其次，未校准的显示器可能在实际白点、伽马曲线或色温上偏离 sRGB 标准的假设。第三，浏览器对色彩管理的支持历来参差不齐：macOS 上的 Safari 应用完整的 ICC 配置文件色彩管理，其他浏览器的旧版本支持则较不完整。
嵌入图片中或由校准软件应用至显示器的 ICC 色彩配置文件，描述了从该内容的编码色彩空间到显示器实际测量响应的映射关系。操作系统的色彩管理流水线——macOS 上的 ColorSync、Windows 上的 Windows Color System——会为每台连接的显示器进行此转换。针对广色域显示器的网页开发者可以使用 @media (color-gamut: p3) 提供 color(display-p3 ...) 值作为鲜艳界面颜色，同时保留纯十六进制值作为 sRGB 回退方案。TeaFun 的色彩调色板与色觉模拟工具在 sRGB 色彩空间中运行，这是通用的安全基准，其输出无论在何种显示器的原生色域下，都能通过色彩管理正确显示。