🌈 完整颜色图谱 v2.0

📊 光谱功率分布 (SPD)

每种光源都可以用光谱功率分布曲线来描述——即每个波长上的能量大小。日光、白炽灯、LED、荧光灯有截然不同的 SPD 曲线。两个颜色看起来完全一样但 SPD 不同，就是同色异谱现象。

🎯 CIE 1931 标准色度系统

基于人类标准观察者的颜色匹配实验建立的色度系统。用 X、Y、Z 三刺激值表示任何颜色。色度图 (xy chromaticity diagram) 的马蹄形边界就是单色光光谱轨迹——自然界所有颜色都落在这个马蹄形之内。sRGB 色域只是其中一小块三角形。

🌡️ 相关色温 (CCT)

常见光源色温：烛光 1850K（暖橙）、日出日落 2000-3000K、白炽灯 2700-3000K、荧光灯 4000K、正午阳光 5500K（摄影标准）、阴天 6500K、蓝色天空 10000K+。摄影中常用 3200K（钨丝灯）和 5600K（日光）作为平衡标准。

⭐ 显色指数 (CRI / Ra)

衡量光源还原物体真实颜色的能力，满分 100。白炽灯 ≈ 100（连续光谱）；高端 LED > 90；普通荧光灯 60-80（不连续光谱的 SPD 导致颜色失真）。R9（饱和红色还原）是高端照明的重要指标。

🔮 结构色 vs 色素色

色素色：化学物质选择性吸收/反射光（叶绿素、颜料）。结构色：微观物理结构干涉/衍射光（蝴蝶翅膀、孔雀羽毛、肥皂泡）。结构色通常更鲜艳、不会褪色、且视角变化颜色会变——这是自然界最奇妙的色彩现象之一。

🔄 荧光与磷光

荧光：吸收紫外光或短波长光，立即发射更长波长的可见光（荧光笔、黑光灯下的白衬衫）。磷光：吸收光能后缓慢释放，断电后继续发光——夜光材料、旧式电视荧光屏。量子点则是纳米晶体尺寸决定发光颜色——新一代显示器技术。

🔬 视锥细胞 (Cones)

人眼视网膜上有约 600 万视锥细胞，集中在中央凹区域。分为三种：

• S 型（短波/蓝敏）— 峰值 420 nm，仅约 5-10%
• M 型（中波/绿敏）— 峰值 534 nm，约 30-40%
• L 型（长波/红敏）— 峰值 564 nm，约 50-60%

三种细胞对不同波长的响应曲线大幅重叠——大脑通过比较三种细胞的输出比值来解析颜色。

🌙 视杆细胞 (Rods)

约 1.2 亿个视杆细胞分布在视网膜周边，对微弱光线极其敏感（可感知单个光子！）但不辨颜色。在暗光下，视杆细胞主导视觉——这就是「暗适应」后世界呈蓝灰色的原因（Purkinje 效应：红色在暗处比蓝色暗得多）。

🧩 同色异谱 (Metamerism)

两种光谱分布完全不同但人眼感知相同的颜色——色彩科学的基础。屏幕上的苹果和真实苹果的 SPD 完全不同，但看起来颜色一样。这就是为什么可以用三原色显示器模拟自然界所有颜色。也是为什么在不同光源下颜色看起来不一样（光源同色异谱）。

🎭 色适应 (Chromatic Adaptation)

人脑自动校正光源颜色。一张白纸在暖光(2800K)下看起来仍是"白的"——但相机/传感器不会(偏橙黄)。这就是为什么摄影需要白平衡。人眼约 1-2 分钟完成完全色适应。von Kries 变换是模拟色适应的数学模型。

🔍 同时对比 (Simultaneous Contrast)

同一灰色块在红色背景上偏青绿，在绿色背景上偏品红。大脑放大相邻颜色的差异——这是谢弗勒尔在 19 世纪研究挂毯时发现的。应用：设计时，要查看实际背景上的颜色，而非孤立地选色。

🧠 对立色彩理论 (Opponent Process)

Ewald Hering 在 18 世纪提出，后来被神经科学证实。视觉系统通过三对对立通道编码颜色：红-绿、黄-蓝、黑-白（明度）。这就是为什么没有「红绿色」或「黄蓝色」。解释了负后像——盯住红色 30 秒看白纸出现绿斑。

👤 色盲与色弱 (Color Vision Deficiency)

约 8% 的男性和 0.5% 的女性有某种色觉缺陷。

• 绿色弱/盲（Deutan）— 最常见，M 锥体异常或缺失——约 6% 男性
• 红色弱/盲（Protan）— L 锥体异常——约 2% 男性
• 蓝色弱/盲（Tritan）— 极少见，S 锥体异常——男女相等
• 全色盲— 极罕见，完全无法辨色

🌟 无障碍配色必须考虑色盲用户——不要仅靠红绿区分信息。

⚡ 麦克斯韦斑点与视觉生理

盯着均匀蓝色背景看几秒，可能会在中央视野看到一个舞动的暗斑——这是视锥细胞上方的黄斑色素（叶黄素）吸收蓝光造成的。每个人看到的形状都不同——因为它是你自己的视网膜血管投影。这个现象证明了颜色感知不仅仅是眼睛，更是你的个人生理特征。

🔄 贝佐尔德效应 (Bezold Effect)

当改变某个颜色的面积分布时，整个配色看起来发生变化。大面积的一块红色看起来比小面积红色条纹暗得多。这就是为什么室内设计中大面积墙漆看起来比色卡深——选色永远要在实际面积上确认。

📈 伽马校正 (Gamma Correction)

CRT 显示器的亮度响应是非线性的（输入电压翻倍，亮度不翻倍）。伽马校正预扭曲信号以补偿此非线性。sRGB 的伽马 ≈ 2.2（近似）。重要启示：在代码中处理颜色时，要在线性空间做数学运算（混合、渐变、抗锯齿），然后转换为 sRGB 显示——否则过渡会变暗。

🎯 色彩管理流程 (ICC)

输入设备（相机/扫描仪）→ 工作空间（通常 Adobe RGB 或 ProPhoto RGB）→ 输出设备（显示器/打印机）。每个设备都有 ICC 配置文件描述其色域和响应曲线。色彩管理引擎（如 LittleCMS、Apple ColorSync）在各空间之间做 gamut mapping（色域映射）——超出目标色域的颜色被压缩到可再现范围。

🔄 色调映射 (Tone Mapping)

HDR（高动态范围）内容如何在标准显示器上呈现？色调映射算法将大范围亮度压缩到 SDR 范围。常见算法：Reinhard、Filmic、ACES。不同的色调映射风格决定最终图像是"自然柔和"还是"电影感强烈"。

🔢 色深 (Bit Depth)

8bit = 每通道 256 级 → 16.7M 色（主流）。10bit = 1024 级 → 1.07B 色（HDR/专业显示器）。12bit = 4096 级（摄影 Raw 文件）。16bit = 65536 级（专业工作流/避免色带）。色深度不足时，黑色到白色的渐变会出现肉眼可见的条带——这叫色带 (banding)。

🧮 中性色主导 (Neutral Dominant)

大量中性色（黑/白/灰/米/褐）+ 一个小面积亮色点缀。现代 UI 设计中最常见的策略——既安全又有亮点。例如：灰色界面 + 蓝色按钮，白色页面 + 红色链接。

🌊 明度节奏 (Value Contrast)

在低饱和度配色中，明度差异是唯一的视觉层次来源。确保最亮和最暗之间有足够跨度（至少 4 阶）。一种检验方法——转为灰度模式仍能清晰区分内容层次。

🎭 冷暖交替 (Warm-Cool Contrast)

在色板上穿插冷暖色——暖色拉近，冷色推远，自动产生深度感。印象派画家（莫奈、雷诺阿）善于利用冷暖对比营造光影效果，而不依赖明暗对比。

📏 面积比例 (Proportion)

歌德为每种颜色的"自然面积"赋予了数值比例：黄:紫:橙:蓝:红:绿 = 3:1:2:1:1:1。即黄色所需的面积最小（最亮），紫色面积最大（最暗）。这个比例来自颜色自身的明度差异——用于判断大面积背景应该用哪种颜色。

🟢🔴 不要只靠颜色

始终在图表的颜色之外添加文字标签、图案纹理或形状编码（如不同的图标）。红色虚线+绿色实线对色彩障碍用户完全不可区分——加上"▲ 上升"/"▼ 下降"标记。

🎯 安全配色组合

最安全的配对：蓝色+橙色（最广泛可区分）。其次是蓝色+红色、蓝色+棕色。避免：红色+绿色、绿色+棕色、蓝色+紫色、绿色+灰色。

🔍 WCAG 2.2 对比度标准

AA 级：正文 4.5:1，大文本(≥18px 粗体或 ≥24px) 3:1
AAA 级：正文 7:1，大文本 4.5:1
增强版：UI 组件和图形元素 ≥ 3:1 (WCAG 2.1 新增)
⚠️ 注意：仅满足 AA 不够——许多用户需要更高对比度。

🌙 深色模式设计

纯黑(#000)背景不适——用深灰(#121212)。文字不要用纯白(#fff)，用浅灰(#e0e0e0)减少眩光。保留足够对比度（遵循 WCAG 标准）。深色模式下高饱和颜色更刺眼——降低饱和度。

📱 模拟工具

使用以下工具验证色盲友好性：Chrome DevTools 的 Rendering 面板（CSS 滤镜模拟）、Color Oracle（桌面端色盲模拟器）、WebAIM 对比度检查器、Adobe Color 的色盲预览。

✏️ 灰度测试

将设计一键转为灰度模式：如果信息层次消失（按钮看不到、图表读不了、链接不可见），说明你完全依赖颜色来传递信息。一个无障碍的设计在灰度模式下仍应可读可用。