色彩体系概览

TLDR 本文从人眼感知出发，系统梳理了「颜色」这一抽象概念背后的物理与生理基础，解释了可见光光谱、视网膜 L/M/S 三类锥体以及亮度/色度分离等关键知识点，帮助读者理解为什么三维就足以描述颜色。文章进一步讨论了同色异谱、加法混色与减法混色的区别，澄清显示器发光与纸面颜料在工程实践中的不同约束，并用色环将连续光谱几何化，为后续的取色策略和配色方法打下直觉基础。在色彩空间层面，文章对比了以 CIE 系为代表的感知建模空间与以 RGB 系为代表的工程实现空间，说明各自解决的问题及实际应用场景。最后引出 HCT 这一新一代感知友好工作空间，展示它如何在前端和可视化中提供更自然的渐变、更稳定的色板以及与无障碍标准更好衔接的色彩体系。

人如何感知颜色

光与视觉的最小背景

• 可见光是电磁波的一小段，波长大致在 400–700nm 之间。
• 一束光可以看成「不同波长能量的组合」，称为光谱分布。
• 物体本身不带颜色，它通过吸收一部分波段、反射/透射剩下的波段，在给定光源下形成入眼的光谱；人眼对这束光谱的响应，就被大脑解释为某种「颜色」。

在工程里，我们通常不会直接操作完整的光谱函数，而是用三维数字（例如 sRGB 或 CIE XYZ）去近似人眼对光谱的响应。

视网膜与三类锥体（L/M/S）

人眼的色觉主要依赖视网膜上的两类感光细胞：

• 杆状细胞（Rod）：在弱光下工作，只对亮暗敏感，几乎不区分彩色。
• 锥状细胞（Cone）：在日光/明视觉下工作，分为三类：
  • L 锥体：对较长波长（偏红）更敏感
  • M 锥体：对中等波长（偏绿）更敏感
  • S 锥体：对较短波长（偏蓝）更敏感

每一类锥体都有一条「对不同波长有多敏感」的响应曲线。这三条曲线宽而重叠：
一束光进入眼睛后，会在 L/M/S 三个通道上各产生一个响应值 $(L_{\mathrm{resp}}, M_{\mathrm{resp}}, S_{\mathrm{resp}})$。
这三个数字就构成了大脑进行颜色计算的输入基础。

这就是所谓的三刺激理论：在正常视力下，三维就足以描述颜色，因为人眼只有三种独立的颜色通道。

亮度与色度：大脑如何把三通道信号变成「颜色」

从 L/M/S 到我们主观感受到的「亮度 + 色相 + 饱和度」，中间经过了复杂的神经处理。常见的高层抽象包括：

• 亮度（Lightness / Luminance）：大致对应 L/M 锥体的总响应以及和环境的对比。
• 色度（Chromaticity）：在剔除整体亮度后，剩下的信息决定了「是什么颜色」：
  • 色相（Hue）：是红还是绿、黄还是蓝，和不同通道之间的相对强弱有关；
  • 饱和度/彩度（Saturation/Chroma）：颜色看起来有多鲜艳，和色信号相对于无色（灰）的强度有关。

大量心理物理实验表明：

• 人眼对亮度变化比对颜色变化更敏感，尤其在暗部；
• 不同色相区域的敏感度不同，例如对绿色附近变化最敏感，对极蓝或极红区域相对没那么敏感；
• 这也是后续 CIE 系色彩空间、感知均匀空间（如 CIELAB、CAM16）在设计时必须考虑的基础事实。

短波蓝光在物理上能量更高，既更容易引起视网膜光化学损伤，也更容易散射造成眩光；在生理上，蓝光会强烈刺激与昼夜节律相关的感光细胞，夜间大量蓝光让大脑误以为是「白天」，抑制褪黑素分泌、影响睡眠。「防蓝光模式」本质是削减特定短波段能量，同时整体色温偏暖。

手机/电脑的「护眼模式」「夜间模式」：截取蓝光 + 显示偏黄，读者可以对照自己设备的夜间模式体会色温变化。

人眼在绿色附近的亮度效率高，且在相同亮度下主观「刺眼感」相对较低；偏绿的浅色背景配合深灰/墨色文字，相比纯白底可减轻长时间阅读的眩光负担。墨水屏在有限对比度下，略偏暖、偏绿的默认底色能在可读性与舒适度之间取得折中。

各类阅读 App 的「护眼绿」主题，以及 Kindle 等墨水屏的默认底色，都是这一原理的日常应用。

同色异谱与颜色混合方式

同色异谱：光谱不同，颜色相同

在前面提到，人眼最终只通过三类锥体（L/M/S）的响应三元组 $(L_{\mathrm{resp}}, M_{\mathrm{resp}}, S_{\mathrm{resp}})$ 来「决定」看到什么颜色。
这会带来一个有点反直觉的现象——同色异谱（Metamerism）：

• 两束光的物理光谱分布完全不同（不同波长上的能量分布不一样）；
• 但在 L/M/S 三个通道上产生的响应几乎一样；
• 于是在人眼看来，它们会被感知为同一种颜色。

一个简单的直觉是：
光谱本质上是一个「高维的函数」，而人眼只有 3 个独立通道，相当于把高维信号挤压到 3 维。
在这个投影过程中，很容易出现「不同原始信号 → 相同 3 维坐标」的情况，这些就是同色异谱对。

典型例子：

• 显示器 vs 打印机
  • 显示器像素靠 R/G/B 子像素自己发光，是加法混色；
  • 打印机用青品黄黑（CMYK）墨水吸收一部分光，只反射剩下的，是减法混色；
  • 两者形成的光谱形状完全不同，但在某个光源下可能刚好让人眼的 L/M/S 响应相同，看上去就「颜色一致」。
• 服装在不同灯光下的色差
  • 在商场的暖黄灯下和室外日光下，同一件衣服反射出来的光谱会不同；
  • 在某种光源下两件衣服看起来同色，换一个光源，人眼就能分辨出差别——这也是同色异谱在不同光源条件下「失配」的体现。

同色异谱提醒我们：
不能简单把某个设备的 RGB 值，当成「颜色的唯一真相」，
必须通过像 CIE XYZ、CIELAB、CAM16 这类基于「平均人眼观察者」的模型来做中立描述和转换。

加法混色（RGB）：从黑到亮的颜色叠加

加法混色（Additive Mixing）是指：在一个本来漆黑的背景上，我们往里叠加更多光，亮度只会变大不会变小。典型场景包括：

• 计算机 / 手机显示器的 R/G/B 子像素；
• 舞台灯光、投影仪等用彩色光打在黑背景上。

在理想化的 RGB 模型中：

• 三个基色通道的数值越高，对应发出的光能量越大；
• 不同颜色的光叠加，会在光谱上「相加」，在人眼看来逐步从黑 → 彩色 → 白。

日常例子：

• 显示器上纯红（R=255, G=0, B=0）和纯绿（R=0, G=255, B=0）同时点亮，会得到偏黄的颜色；
• 把 R/G/B 三个通道都拉到最高（R=G=B=255），肉眼看到接近白色——因为三个通道都强烈响应，接近「全波段高能量」的感觉。

对前端 / 可视化工程来说，屏幕上的任何颜色最终都可以理解为三束 R/G/B 彩光的加法混合结果。
这也是为什么所有 Web 颜色规范（如 sRGB）都以 RGB 通道为基础。

减法混色（CMY/RYB）：从白到暗的颜料叠加

减法混色（Subtractive Mixing）则刚好相反：
一开始我们有的是「尽量多的光」——通常是白光照在白纸 / 画布上。
颜料、墨水、滤色片的作用，是从这束白光里减去一部分波段，只让剩下的波段被反射 / 透过。

典型场景包括：

• 印刷（CMYK 打印机、杂志封面）；
• 颜料绘画、水彩、丙烯、油画；
• 彩色滤光片（比如舞台上给白灯加一个蓝色滤片）。

日常例子：

• 在白纸上先刷一层黄色，再叠一层蓝色水彩：
  • 黄色颜料主要吸收蓝紫波段，反射红绿；
  • 蓝色颜料主要吸收红橙波段，反射蓝绿；
  • 两层叠加后，被两种颜料都「放过」的只有一小段绿附近波段，于是肉眼看到是偏绿的颜色。
• 打印时，青 / 品 / 黄墨水叠加越多，纸面能反射回来的光就越少，看起来就越暗、越浑；极端情况下接近黑色。

可以粗略地把两种混色方式类比为：

• 加法混色：从 0 开始往上加，越加越亮，RGB 越接近 (1,1,1) 越白；
• 减法混色：从 1 开始往下减，越减越暗，反射的光越少越接近黑。

理解同色异谱、加法混色与减法混色，有助于在工程里正确区分：

• 屏幕上的「光的颜色」和纸张上的「颜料颜色」本质上是两套物理过程；
• 相同肉眼颜色背后可能对应不同光谱和设备表现，这也是为什么我们需要统一到 CIE 系标准空间，再做跨设备的色彩管理与转换。

从光谱到色环：颜色几何化

光谱色与非光谱色：为什么要绕成一个「环」

棱镜实验把白光分解为连续光谱，物理上是一条按波长排布的「线」。但紫色等非光谱色无法通过单一波长获得，只能由多波长混合产生。为了在几何上容纳这些颜色，需要把光谱两端「接起来」，构造闭合色环。

色环布局与对立色理论

红–绿、黄–蓝等对立色理论决定了色环上大致的色相排列。色环因此不只是「物理波长排序」，而是加上了人眼对立通道后的主观结构，为后续所有「绕一圈选颜色」的模型（HSL、HCT 等）打下直觉基础。

基于色环的取色策略

最开始的色环设计，如果将所有颜色都降低为人眼相同感知的强度，部分对比色无法混合为中性色。

在色环上可以定义类似色（相邻）、互补色（相对）、三分色/四分色（等分）等基本配色方法。色相环再配上明度、饱和度两个维度，就形成主观上好理解的调色「控制台」。

设计软件和前端取色器里常见的「圆形色相环 + 竖直明度条」界面，就是对「色相环 + 明度/饱和度」这一结构的直接应用。

典型色彩空间：CIE 系与 RGB 系

CIE 系从「人眼感知」出发，构建设备无关、尽量感知均匀的颜色坐标系，用来度量色差、描述「人看到什么」。RGB 系从「工业再现与编码」出发，围绕具体设备（显示、打印、相机）定义如何发光/显色/存储，解决「如何在现实世界做出或记录某种颜色」的问题，而不保证感知均匀。

CIE 系：为人眼感知建模

CIE 1931 XYZ / xyY：设备无关的三刺激基准

解决了「颜色」缺乏与具体设备无关、可统一度量的坐标的问题。 需要一种与具体设备无关的三维坐标来度量颜色。通过颜色匹配实验构造虚拟基色，得到 XYZ（Y 与物理亮度成正比），再派生 xyY 色度表示；xy 色度图成为后续几乎所有色域与设备标定的基础坐标系。

电视/显示器宣传页上「覆盖 99% sRGB / 90% DCI-P3」的配图，通常就是画在 CIE 1931 xy 色度图上的多边形。

CIELAB 与 OKLab：感知均匀的直角坐标系

解决了 XYZ/xyY 中几何距离与人眼主观色差不成比例的问题，使色差（ΔE）可量化、明度与色度维度更感知均匀。 CIELAB 从 XYZ 做非线性变换，得到 L*（明度）和 a*/b*（红–绿、黄–蓝对立轴），用 ΔE 近似色差，成为工业色差标准。OKLab 是在现代数据上重新拟合的感知均匀空间，很多场景下比 CIELAB 更稳定，可派生 OKLCH（极坐标形式）。

油漆/纺织企业的色差报告单上常见「ΔE ≤ 1/2/3」，背后多半是在 CIELAB 或类似空间中计算；部分现代设计工具已支持 OKLCH 渐变。

CIELUV（L*u*v*）：与 LAB 并行的感知均匀空间

解决了 xy/XYZ 在亮度与色度维度上感知不均匀的问题，尤其在加性光（显示、照明）场景下。 CIELUV 与 CIELAB 同属 CIE 1976 年推出的感知均匀空间，由 XYZ 经另一套非线性变换得到 L*（明度）与 u*、v*（色度坐标）。Luv 在加性光（如显示器、照明）的色差与色度图表示中更常用，其 u*v* 平面上的欧氏距离比 xy 更接近主观色差；LAB 则在工业色差标准（ΔE）与颜料/反射场景更普及。二者互为补充，均为设备无关的感知均匀坐标系。

CIECAM02 / CAM16：考虑屏幕灯与环境的色外观模型

解决了「同一物理刺激在不同观察条件（亮度、背景、白点）下看起来不一样」的问题，把观察条件纳入预测。 同一束光（同一 XYZ）在不同环境亮度、背景、白点下看起来并不一样。色外观模型引入「观察条件」参数，预测明度 J、色度 C、色相 h 等外观属性。CAM16-UCS 在此基础上提供更感知均匀的坐标系，也是后文 HCT/LPS 的感知层基础。

同一张照片：白天阳光下大亮度看 vs 晚上关灯在床上看，「屏幕灯 + 周围环境」变化会让颜色整体显得更亮或更灰；色外观模型用公式刻画这种差异，为 HDR、自适应主题等提供理论基础。

RGB 系：为工业再现与编码服务

设备 RGB 与线性 RGB：工业调色的起点

解决了从 CIE 抽象坐标到「设备如何发光、如何配出目标颜色」的落地问题。 具体显示器/灯具通过选定三支原色及白点，用矩阵在 CIE XYZ 与设备线性 RGB 之间转换；设备色域就是这些原色在 xy 图上围成的多边形。舞台灯、LED 屏等通过调节 R/G/B（或更多通道）强度「配」出目标 CIE 颜色，本质上就是在这个线性 RGB 空间里做工业调色。

演唱会控台上调节的是 R/G/B 数值，但最终目标往往是「舞台要看起来接近品牌色卡上的那一块颜色」。

sRGB：Web 与消费级的事实标准

解决了不同设备、图像文件之间没有统一色域与 Gamma 约定导致的显示不一致问题。 sRGB 固定一组三原色和 D65 白点，用 Gamma ≈ 2.2 的非线性编码在 8bit 下优化暗部阶梯，兼顾显示设备、图像文件与人眼亮度敏感度。sRGB 隐含了默认白点和 Gamma，更多出于工程与兼容性考虑，而非感知完全均匀。

为什么相机很难拍出肉眼看到的日落晚霞那种「炸裂的红橙」？现实中的晚霞往往超出 sRGB 色域；从传感器到 sRGB 文件的链路会把超出部分挤压或截断，再加上显示器多为 sRGB 或略宽色域，最终呈现自然会显得「没那么艳」。

HSL / HSV：直观 UI 取色空间及其渐变问题

解决了 RGB 三通道对调色不直观的问题，提供色相 / 饱和度 / 明度这类更符合直觉的控制维度。 sRGB 三通道对设计师不直观，HSL/HSV 把 RGB 立方体几何变换为圆柱/圆锥坐标，得到 Hue + Saturation + Lightness/Value，便于「转角度换色相、拉轴调亮暗/饱和」。但这些轴只是 RGB 几何重排，完全不保证感知均匀；等步长 H/S/L 在视觉上变化很不规则。

前端常见情况：两个品牌色在 CSS 里直接 linear-gradient，中间一段看起来偏灰、偏脏或亮度突兀，于是不得不手动插一个中间色作过渡。原因是在 RGB/HSL 上直线插值，对应到人眼空间里的轨迹往往会靠近灰轴或在亮度维度上弯曲。后文 HCT/LPS 会对比在感知友好空间上插值的改善。

小结：CIE 系 vs RGB 系

• CIE 系：回答「人眼如何看」「颜色相差多少」「环境变了会怎样看」，使命是感知建模与度量。
• RGB 系：回答「设备如何发光/显色」「图像如何编码」「工业如何配到某个目标颜色」，使命是再现与工程实现。

各色彩空间解决的问题汇总

色彩空间	相比之前解决的问题
CIE 1931 XYZ / xyY	解决了「颜色」缺乏与具体设备无关、可统一度量的坐标的问题。
CIELAB 与 OKLab	解决了 XYZ/xyY 中几何距离与人眼主观色差不成比例的问题，使色差（ΔE）可量化、明度与色度维度更感知均匀。
CIELUV	解决了 xy/XYZ 在亮度与色度维度上感知不均匀的问题，尤其在加性光（显示、照明）场景下。
CIECAM02 / CAM16	解决了「同一物理刺激在不同观察条件（亮度、背景、白点）下看起来不一样」的问题，把观察条件纳入预测。
设备 RGB 与线性 RGB	解决了从 CIE 抽象坐标到「设备如何发光、如何配出目标颜色」的落地问题。
sRGB	解决了不同设备、图像文件之间没有统一色域与 Gamma 约定导致的显示不一致问题。
HSL / HSV	解决了 RGB 三通道对调色不直观的问题，提供色相 / 饱和度 / 明度这类更符合直觉的控制维度。

HCT 站在 CIE 感知建模之上，服务于前端与可视化等工程场景。

HCT：工作原理与工程实践

从 HSL/CIELAB 到 HCT：问题与目标

HSL/HSV 在插值与色板设计时容易产生「脏色」、亮度不均匀；CIELAB/OKLab 在色差与感知均匀性上更好，但与对比度规范、设备色域落地的工程衔接仍有缝隙。HCT 的目标是提供一个与无障碍（对比度）、前端实现、可视化需求紧密结合的工作空间。

在 OKLCH 或 LCH(ab) 上做渐变，与在 RGB/HSL 上做渐变的观感差异，是 HCT 这类感知友好工作空间设计的典型动机之一。

HCT：Hue / Chroma / Tone 的定义与语义

• Tone（T）：采用 CIELAB 的 L*，0–100，与 WCAG 对比度直接相关。
• Hue（H）：来自 CAM16 的色相角，0–360°。
• Chroma（C）：来自 CAM16 的彩度，表示颜色有多鲜艳。

在固定 Tone 下，Hue 控制「是什么颜色」，Chroma 控制「有多浓」，比 HSL 更符合人眼直觉。

HCT 的计算流程（ARGB ↔ HCT）

ARGB → HCT：ARGB 解析为 R/G/B，线性化后经矩阵转到 CIE XYZ；在默认观察条件下得到 CAM16 的 hue、chroma，并用 Y 分量算出 CIELAB L* 作为 Tone。

HCT → ARGB：给定 (H, C, T)，在 sRGB 色域内数值搜索满足「CAM16 下 hue≈H、tone≈T、chroma 尽量接近 C」且通道在 0–255 内的颜色（HctSolver 通过牛顿迭代与二分查找实现）。这样就用感知友好的 (H, C, T) 驱动 UI/可视化，再稳定落回 ARGB/HEX。

相对传统空间的优势与局限

优势：相对 HSL/RGB，HCT 上的插值路径更接近人眼感知，渐变和色板更自然；H、C、T 三个维度的语义也更贴近日常调色需求，便于在保证对比度的前提下系统构建主题色盘。整体理念与 OKLab 等感知均匀空间一致，都是「先到感知友好空间，再做几何操作」。

局限：数值求解过程依赖特定的观察条件与 sRGB 色域假设，在极端高 Chroma 或广色域设备上仍可能出现近似误差或越界裁剪；对于不同设备和观测环境，长期仍可能需要新的感知模型或空间变体来补充。