附录

阅读指南

本书是一部帮助设计师作出决策的参考书。颜色本身并不会自动产生效果：结果取决于任务、环境、使用面积、照明、媒介和受众。如果时间有限，请先从具体任务入手，再阅读原理说明和资料来源。

设计任务	从这里开始	检查结果时关注什么
建立品牌配色	从任务制定配色、产品系列	品牌辨识度、与竞争者的区分度，以及在各种媒介上的表现
选择按钮和状态颜色	界面色彩系统、界面案例分析	对比度、状态含义，以及不单靠颜色时是否仍然醒目
为“心理效应”主张提供依据	色彩心理学、研究卡片	研究类型、测量结果、情境和结论可推广的边界
制作图表或地图	数据中的颜色、实践工作坊	数值顺序、图例可读性，以及灰度检查
为印刷准备设计稿	屏幕与印刷、材料与光线、测量与验收	色彩配置文件、纸张、打样、观察照明和验收标准
制作深色主题	渐变与深色主题、设计令牌与代码	每种颜色角色和状态的对比度，而不是简单反转 HEX 值
为商品选择颜色与名称	颜色名称、图像颜色	商品照片、名称、样品和实物是否一致
向团队说明设计决策	如何论证颜色选择、评估方法	假设、评判标准、对照方案和决策记录
从头到尾推进项目	四个完整项目	项目简报、颜色角色、对比度、媒介和测试
在 CSS 中交付颜色	现代 CSS 颜色	sRGB 后备方案、功能支持情况和最终配色
验收材料和照明	照明实践工作坊	实物样品、观察条件和验收标准
展示数据质量	图表中的不确定性	数值范围、缺失数据和有依据的结论
检查适合不同年龄人群的界面	颜色与年龄	目标查找、替代提示和真实参与者
检验色彩假设	测试流程	可测量的结果、受控条件和结论边界

简明词汇表

色相（hue）——颜色在色相环上的位置；不等同于亮度。
明度（lightness）——在指定模型中颜色介于暗与亮之间的位置；不同于显示器的物理亮度。
饱和度与彩度——不同模型对颜色强度的不同定义；数值不能直接互换。
对比色组合——一组具体的前景色与背景色；其对比度比值不能证明整个界面都易于访问。
相对亮度——WCAG sRGB 对比度公式中使用的量。
色域（gamut）——设备或色彩空间能够再现的颜色集合。
ICC 配置文件——描述设备与标准色彩空间之间颜色数值转换方式的文件。
同色异谱——两个样品在一种条件下看起来相同，在另一种条件下却不同。
颜色恒常性——照明改变时，视觉系统仍能部分保持对物体颜色感知的能力。
同时对比——同一颜色因周围颜色而产生的外观变化。
颜色令牌——产品中带有名称的颜色角色，例如 text.primary，而不是单独的 HEX 值。
顺序配色——从较小到较大排列数值的色阶。
发散配色——围绕有意义的中点向两个方向展开的配色。
分类配色——一组用于区分无数量顺序类别的颜色。
CVD——色觉缺陷；一张“模拟”图片不能替代真实用户测试。
偏好——参与者在特定任务中给出的“喜欢”评价，不必然意味着选择或购买。
联想——参与者报告的一种联系；仅凭联想不能证明颜色造成了某种效果。
重复验证——通过新的研究再次检验已有结果。
TM-30——IES 用于描述光源显色特性的方法；它不评定配色的“心理质量”。
ΔE00——根据 CIEDE2000 公式衡量两种颜色差异的指标；没有测量条件和商定的公差，就无法据此作出验收决定。
数据不确定性——我们对某个数值所知有限；应依据来源所用的方法说明，而不应以颜色将其掩盖。

主题索引

**A–C：**联想——心理学；品牌设计——品牌；图表——数据；对比度——字体排版；图像——照片与视频；可见性——无障碍设计。

**M–Z：**材料——印刷与照明；名称——色名目录；不确定性——数据；OKLCH——实践工作坊；配色——实践工作坊；印刷验收——测量；项目——四个案例；心理学——研究卡片；状态——设计令牌；假设测试——测试流程；色彩模型——模型；CSS——生产应用。

返回目录 ↑

第一部分 / 物理基础

第 1 章　作为现象的颜色

第一部分：物理基础 · 扩展版 · 2026 年 9 月 21 日

为什么本章从一只白杯子讲起

把一只白杯子放在窗边，再把它移到暖色灯下，然后移到阴影里。在日常谈话中，它始终是白色的；但拍下的三张照片里，它的像素很可能各不相同。哪一种才是它的“真实颜色”？

答案取决于问题。生产检验关注涂层的性质和约定好的测量条件；摄影师关注光线、曝光和颜色转换；商品目录的读者则会根据图像形成对实物的印象和预期。把这些任务混为一谈，就会在尚未明确测量对象时引发争论。这只杯子只是用于说明的例子，并非对某项实验样本的描述。

刺激与知觉

CIE 将知觉颜色描述为色相、亮度或明度，以及 colourfulness、saturation 或 chroma 等属性。后三个术语不可互换。本书分别将其解释为“颜色感觉的强度”“饱和度”和“彩度”。相关因素包括刺激光谱、视野的大小及其周围环境、适应状态和观察者的经验。因此，颜色的定义不只是“波长”或“物体的属性”。CIE S 017:2020，术语 17-22-040 [1]。

有必要区分四个层次。材料具有光学属性；照明与材料共同形成到达眼睛的辐射；视觉系统产生颜色知觉；人则用词语描述这种知觉并赋予其含义。最后一层还涉及语言和文化：调查中回答“红色”，与测量红色表面的光谱，属于不同的研究变量。

这里的链条是本书作者提出的组织框架，有助于判断错误发生在哪一层。ICC 配置文件不正确，涉及信号传递与再现；商品目录中的术语不恰当，涉及命名；按钮状态不清晰，则涉及解释。

为什么不能把颜色完全归于物体

在简化条件下，非荧光哑光表面的反射光谱取决于照明光谱和表面的光谱反射率。但要使颜色匹配，并不总要求这两个光谱相同：在指定的色度系统中，不同光谱刺激可能具有相同的三刺激值。这种现象称为同色异谱。CIE，17-23-006 [2]。

实践启示。 屏幕上的样色与布料在一个房间里看起来一致，并不保证换一盏灯后仍然一致。品牌颜色任务书应明确要求的对象：屏幕色值、印刷样张、实物标准，还是多个媒介之间的协调一致。

“颜色只存在于大脑中”这句话对实际工作而言也不够完整。它提醒我们观察者参与了颜色知觉，却忽视了外部世界中可测量的属性。即使人在特定条件下无法分辨两种材料，分光光度计仍可能可靠地将它们区分开来。测量与知觉回答的是相关但不同的问题。

一个物体，三份记录

针对本章开头的杯子，设计师可以准备三份记录：

文件	记录内容	不作何种保证
涂层规格	样品、材料、方法和检验条件	在任何照明下拍出的照片都相同
图像记录	配置文件、源文件和导出设置	所有屏幕都能完全一致
内容卡片	颜色名称及给买家的说明	“乳白色”等词语具有光谱精度

这是建议采用的流程，并非 CIE 的要求。其目的是让每项承诺都能得到验证。

请记住

后续章节出现“颜色”一词时，请先确认讨论对象：刺激、坐标、印象、名称还是含义。许多错误的心理学概括，都始于这些层次之间不易察觉的转换。

下一章：电磁辐射。相关总计划主题：12——色度学；68——颜色恒常性；101——色彩心理学。

返回目录 ↑

第一部分 / 物理基础

第 2 章　电磁辐射

波长、频率与能量

在真空中，单色波的波长 λ 与频率 ν 满足关系式 c = λν。光子的能量为 E = hν = hc/λ。光速 c = 299 792 458 m/s 和普朗克常数 h = 6.62607015 × 10⁻³⁴ J·s 在 SI 中具有精确定义值。NIST，SI 定义常数 [3]。

一纳米等于十亿分之一米。由于可见辐射的波长为数百纳米，纳米是光学中很方便的单位。波长越短，频率越高。这一物理关系不应被转述成“短波对人的作用更强”之类的心理学公式；若要得出此类结论，必须有关于特定暴露条件及其测量结果的证据。

三个计算示例

以下计算针对真空中的单个光子，不涉及灯的功率或人眼感知到的屏幕亮度。

波长	近似频率	近似光子能量
450 nm	666.2 THz	2.755 eV
550 nm	545.1 THz	2.254 eV
650 nm	461.2 THz	1.907 eV

这些数值由上述公式得出；单位换算使用精确关系 1 eV = 1.602176634 × 10⁻¹⁹ J。计算可通过 scripts/build_encyclopedia.py 复现。

假设两个理想的单色光源分别以 450 nm 和 650 nm 的波长发出一瓦功率。每秒光子数为 P/E。长波长光源的光子数约为短波长光源的 650/450 ≈ 1.44 倍。这是作者设计的计算示例，说明相同功率与相同光子数是两种不同的实验条件。

为什么强度不等于光子能量

单个光子的能量由频率决定，而光束的功率还取决于单位时间内光子的数量。光电效应的教材说明讨论了光与物质相互作用的量子描述，其中包括能量与频率的关系。OpenStax，《大学物理》第 3 卷，§6.2 [4]。

遇到广告语“充满能量的颜色”时，这一区别很有用。它可以描述构图给人的印象，却不会因此变成物理量。一张鲜红的海报不会仅仅因为名称而含有更多能量。若要讨论能量，还需说明面积、时间、光谱，并测量辐射。

材料中发生了什么

在透明介质的常见描述中，相速度与折射率的关系为 v = c/n；OpenStax，§1.1 [5]介绍了这一关系。光穿过静止界面时，频率保持不变，而在介质中的波长会改变。因此，颜色规格中使用的波长应结合其说明的条件来理解；光线进入玻璃并不会让颜色类别自动改变。折射的几何关系见OpenStax，§1.3 [6]。

给设计师的提示

在光谱图中标明单位。仅标注“颜色”的坐标轴并不足够：它表示的可能是波长、HSL 色相角，或调查中的一个类别。400 到 700 nm 之间的线应表示物理范围；其下方的装饰渐变只是屏幕上的视觉表现。不要把渐变的饱和度说成眼睛敏感度的测量值。

下一章：可见光谱。上一章：作为现象的颜色。

返回目录 ↑

第一部分 / 物理基础

第 3 章　可见光谱与颜色名称的边界

可见范围从哪里开始，到哪里结束

常见的 380–780 nm 区间便于绘图说明，但它并非明确的界限。CIE 指出，能否探测到辐射取决于视网膜上的辐照量和观察者的敏感度；下限通常取 360 至 400 nm 之间，上限通常取 760 至 830 nm 之间。CIE，可见辐射 [7]。

因此，严谨的图注应写作“可见辐射的近似范围”。如果写成“人眼严格只能看见 380 至 780 nm”，就会造成虚假的精确感。在科学研究中，仪器的测量范围、标准表格的计算范围和刺激实际可被探测的范围可能并不相同。

光谱连续，名称离散

彩虹和棱镜光谱中，黄色与橙色之间并没有物理分界线。颜色名称的边界会随着条件和分类方式而变化。色散会按波长分开光的成分，而不是按词语分类。OpenStax，§1.5 [8]。

本百科不把“名称 → 纳米”表格当作通用的颜色转换器。对于窄带辐射，可以指定波长；对于宽带刺激，需要提供光谱函数；对于屏幕色块，则需要颜色空间坐标和显示条件。

为什么不存在通用的 wavelength → HEX 转换

CSS 中的 HEX 值指定的是 sRGB 坐标。要显示光谱刺激，必须选择标准观察者、强度尺度、色彩空间转换方式，以及对无法再现的颜色进行处理的方法。sRGB 无法涵盖所有可见色度。因此，网站上的彩色光谱条不可能同时成为所有光谱颜色的精确物理演示。有关编码和转换，请参阅CSS Color 4 [9]；有关观察者函数，请参阅CIE 1931 [10]。

教学示例。 网站作者想用 #0000FF 表示“450 nm 蓝光”。只要明确说明它是约定符号，这种用法便可以接受；但它不会把屏幕变成 450 nm 的单色光源。即使两台显示器呈现相同色块，其原色发射光谱也可能不同。

光谱紫色与品红色

日常所说的“紫色”通常涵盖较广的色调范围。从物理角度看，短波长的光谱辐射与品红色不同；品红色是光谱不同区域的混合。外观相似并不代表光谱相同。这说明色板中的名称不能代替对刺激本身的描述。

设计界面时，最好保留两项记录：技术值 sRGB #7C3AED 和编辑名称“紫色”。如果是光学实验，还应补充光谱数据或精确的再现条件。避免在没有定义的情况下使用“纯色”，因为它可能指光谱带宽窄、彩度高，或只是没有混合颜料。

检查插图

先确认图示的内容：波长顺序、可用色域，还是语言类别。只有在清楚解释各个层次时，才适合把它们放在同一条色带中。教学文章使用准确的示意图即可；比较测量结果则需要数值数据。

返回目录 ↑

第一部分 / 物理基础

第 4 章　光谱功率分布

颜色始于一个函数

如果说 RGB 坐标像简要摘要，那么光谱就是详细记录。它展示指定物理量如何分布于不同波长。首先必须说明该物理量是什么：光谱通量、辐照度还是辐亮度。仅写 SPD 缩写无法确定计量单位。CIE 将光谱分布定义为某一物理量相对于光谱坐标的密度。CIE，17-21-029 [11]。

例如，光谱通量可以用 W/nm 表示。选定范围内曲线下的面积对应这一波段中的通量。如果曲线已按最大值归一化，没有比例尺度就无法恢复绝对功率。相对光谱分布中的数值则没有量纲。CIE，17-21-030 [12]。

如何阅读图表

先检查横轴：波长以纳米计，而频率图需要不同的密度表示方式。再检查纵轴：它表示绝对单位、相对量还是百分比。最后确认数据来源：实际测量、标准表格还是教学模型。

两张分别按各自最大值归一化的图可以比较曲线形状，却不能比较光源亮度。平滑曲线也不一定代表精确测量，它可能只是对稀疏数据点进行了插值。这些是数据阅读规则，并非对某一款灯具的评价。

看起来同样白，光谱可能不同

同色异谱刺激在特定系统中具有相同的三刺激值，尽管光谱并不相同。因此，两个白色看起来一致，并不能证明光源的光谱相同。CIE，同色异谱 [2]。

对零售空间设计师而言，这意味着要把灯光与商品一起评估。设想两盏灯产生视觉上相似的白光；这还不能说明红色织物、深色皮肤或包装在灯下的表现。应使用项目关注的材料进行测试并记录条件，而不是只看灯具照片。

反射信号的教学模型

在不考虑荧光且几何条件不变的简化模型中，反射信号的相对光谱形状可写作 S(λ)R(λ)，其中 S 表示照明，R 表示光谱反射率。这不是完整场景的通用公式，因为它没有考虑方向性、多重反射和自发光。

作者的数值示例。 在选定的三个波段中，光源相对值为 0.8、1.0、0.6，表面反射率为 0.1、0.3、0.8。对应乘积为 0.08、0.30、0.48。这只是用于说明依赖关系的例子，并非布料的实测光谱，也不是 RGB 计算。仅凭三个任意波段，不能断言结果对应某个精确 HEX 值。

向供应商索取什么

如果展陈中的颜色十分重要，应索取光谱条件及测量方法的说明，然后确认实体样品。光谱曲线应与工作模式和几何条件等信息一并参考。缺少这些资料并不能证明产品质量差，但会限制从宣传图表中能够得出的结论。

返回目录 ↑

第一部分 / 物理基础

第 5 章　反射与吸收

入射光去了哪里

入射辐射可能被反射、透过材料或吸收。对于没有额外发光的被动物体，能量平衡要求以一致的方式考虑这些部分。吸收和反射取决于材料及波长。有关这些相互作用的一般物理解释，参见NASA，波的行为 [13]。

简写式 R + T + A = 1 适用于在可比核算条件下对同一入射光通量进行分配。其中 R 是反射比例，T 是透射比例，A 是吸收比例。不能用只在狭窄方向测得的镜面高光值，替代全部反射光通量。

表面颜色与高光

设计时应区分材料的颜色成分与光的反射分布。即使基础色度接近，同一种涂层的光面和哑光版本也可能给人不同印象。拍摄光泽样品时，亮斑首先可能反映光源，而不是一种新的“漆色”。

教学案例。 设计师选定深蓝色盒子 #172554，请印刷厂用哑光覆膜来再现，然后拿成品与光泽数字渲染图比较。这样的检查把颜色、材料和照明混在了一起。更合理的做法是分别确认实体涂层样品和图像参考值。这里的 HEX 只是屏幕稿的初始设计意图。

为什么颜料不会像光束一样相加

在通常的非相干条件下，来自不同光源的光可以按光谱功率相加。颜料混合则不同：光与颗粒相互作用，并被吸收和散射。因此，对两个 HEX 值取平均并不能预测真实颜料混合后的外观。关于另一类机制——结构色及其与颜料的结合——参见综述Kinoshita、Yoshioka 与 Miyazaki，2008 [14]。该综述讨论结构色光学，并不是把屏幕 HEX 值转换成颜料配方的方法。

混色教学界面可以使用近似模型，但应明确标注为近似。如果用户选择“混合蓝色与黄色颜料”，结果就应符合所声明的材料模型。如果模型实际只是在混合 RGB 数值，标签就应说明这是数字混色。问题不在于简化，而在于操作名称与实际含义不一致。

白色与黑色也是材料

“白纸”并不能完整说明其反射光谱；“黑布”也不意味着在所有方向和波段上都没有反射。生产检验还取决于样品、衬底、表面纹理和观察条件。商品目录里的色值不能替代这些信息。

一种示范性做法是：把两份样品并排放在相同的中性衬底上，保持光线方向一致，并从多个角度观察。如果角度变化后差异消失，应先检查光泽和几何关系；如果更换光源后差异变化，则应检查光谱条件。这种测试有助于明确问题，但不能取代仪器测量。

返回目录 ↑

第一部分 / 物理基础

第 6 章　透明、半透明与滤光片

光通过材料，不代表保持原样

透光材料可能改变光的光谱和方向分布。因此，透明、无色和没有光学影响并不是同义词。透明的有色玻璃仍能让人看清物体；无色的磨砂玻璃却可能明显模糊物体轮廓。NASA，波的行为 [13]讨论了透射光涉及的物理作用。

对于设计师而言，透明度是整个场景的属性，涉及材料、厚度、背景、照明和观察者位置。平面色块可以示意玻璃的概念，却无法完整描述玻璃的光学特性。

两片滤光材料依次叠放

在不考虑散射、额外反射和发光的简化模型中，两片滤光材料依次叠放时，其光谱透射率为 T₁(λ)T₂(λ)。蓝色滤光片会透过某些波段，第二片滤光片则可能进一步削弱这些波段。因此，即使两张有色薄膜单独看起来都很亮，叠在一起仍可能显得很暗。

作者的计算示例。 在选定波长处，如果第一张薄膜的透射率为 0.50，第二张为 0.40，最终透射率就是 0.20。这并不是 CSS 透明度相加的通用公式。物理滤光模型取决于波长；Alpha 合成则是在指定表示方式下混合图像。

Alpha 通道与真实玻璃

八位 CSS 表示法 #175CD380 指定带有 Alpha 通道的蓝色 sRGB 值。它没有提供真实玻璃的折射率、厚度、散射或光谱透射率。CSS Color 4 [9]介绍了颜色语法及其数值分量。

教学示例。 将半透明蓝色卡片放在白色背景上，与将同一卡片放在照片上，会得到不同的合成颜色。检查文字对比度时必须考虑最终组合场景。如果背景不可预测地变化，一种实用做法是在文字下方加上足够不透明的底色，并对允许出现的最不利背景进行测试。

如何向客户描述材料

规格说明应分别描述材料的整体颜色、透射率、背后图像的可见程度、表面纹理以及样品厚度。对于展示柜，还应说明灯光位置和玻璃背后的背景。如果承包商要制造实物，“半透明蓝色，50%”并不足以作为要求。

建议的检查材料包括：在浅色背景上的照片、在深色背景上的照片、材料后方高对比度网格的图像，以及实体样品。网格能显示细节模糊程度；两种背景能显示外观对周围环境的依赖。这只是示例流程，不能替代行业中测量透射率和雾度的标准。

常见错误

仅凭一个百分比，就比较有色光学滤片和数字半透明色块。必须明确数字所代表的含义：能量比例、Alpha 通道，还是某台指定仪器的测量结果。否则，50% 只是一个标签。

返回目录 ↑

第一部分 / 物理基础

第 7 章　散射：蓝天与红色日落

光会改变方向

散射会把辐射重新分配到不同方向。在瑞利散射条件下，粒子尺寸远小于波长，短波长散射得更强。这种机制促成晴朗天空呈现蓝色。NASA，瑞利散射 [15]。

在简单的瑞利散射模型中，其他条件相同时，散射强度近似与 1/λ⁴ 成正比。这并非适用于所有雾或云的通用公式；散射粒子的尺寸和性质也很重要。当粒子大小与波长相近时，应使用其他描述方式。“米氏散射”指球形粒子散射问题的一种解法，并不是所有白色薄雾的同义词。

估算差异的量级

教学模型。 根据四次方关系，450 nm 与 650 nm 处的散射比为 (650/450)⁴ ≈ 4.35。这是其他条件相同时，对单独光谱分量的比较。它不表示人眼觉得天空“蓝了 4.35 倍”，也不能据此得到一个确定的 HEX 值。计算保存在 data/physics_calculations.json。

阳光穿过大气的路径越长，短波长光从直射光束中被散射掉的比例就越大，剩余光线可能显得更暖。路径几何有助于理解日落，但真实的大气气溶胶和云层会使情况更复杂。NASA，曙暮光线与光散射 [16]。

为什么天空照片不能充当光谱标准

照片记录的不只是大气，也受到相机设置的影响，包括曝光、光谱敏感度、白平衡和后期处理。设计师可以据此取色，但配色中的“天空颜色”只是经过特定转换后的图像颜色。

作者为风景页面设计的配色： 深色文字 #172554、浅色表面 #EFF6FF、青色点缀 #38BDF8、暖色点缀 #F4C430。这是一项构图建议，并非由大气测量得出，也不是日落光谱，更不宣称能够带来平静效果。

散射与材料观感

产品设计中，应把颜色与光在材料内部的传播特性分开评估。乳白衬底、烟熏面板和透明塑料可能属于相近的颜色类别，却会以不同方式传递边缘和高光。因此，在模型中关键的参数有时不是色相，而是模糊特征及光的空间分布。

如何检查说明是否准确

如果文字说“天空反射了海洋”，就遗漏了主要的大气机制。如果说“蓝色在任何条件下都一定散射得更强”，就把瑞利模型推广得过头了。准确的说明会交代适用条件、状态和推论边界。

返回目录 ↑

第一部分 / 物理基础

第 8 章　折射、色散与彩虹

为什么光线会改变方向

光线在两种介质的交界面改变传播方向，其关系由斯涅尔定律给出：n₁ sin θ₁ = n₂ sin θ₂。角度从法线量起；法线是垂直于界面的直线。如果误把表面本身当作法线，计算结果就会出错。OpenStax，§1.3 折射 [6]。

作者示例。 光线以相对法线 40° 的角度，从 n₁ = 1 的介质进入 n₂ = 1.5 的介质。此时 θ₂ = arcsin(sin 40° / 1.5) ≈ 25.37°。这些数值描述的是假设的透明介质，并非某种特定玻璃的规格。

色散带来什么

折射率可能随波长变化。不同光谱成分因此朝不同方向传播，白光经过棱镜后便会分开。主虹的形成涉及光线进入水滴和离开水滴时的折射，以及水滴内部的反射；色散使颜色彼此分离。OpenStax，§1.5 色散 [8]。

透明物体上的彩色高光不一定都是彩虹。它也可能是周围彩色物体的反射，或由图像处理造成。解释视觉效果时，应先判断光来自哪里、经过了什么路径。

棱镜不会给光“上色”

教学插图可以在棱镜前画一支白色箭头，棱镜后画出数支不同颜色的箭头。但物理上的关键在于：入射辐射的不同成分沿不同路径传播。如果光源在某些光谱区域几乎没有功率，棱镜就无法凭空产生这些部分。

以玻璃包装的广告渲染图为例，彩虹高光可能只是艺术手法。如果图像需要忠实呈现产品，高光的强度和位置就需要材料与照明的物理模型，或者实物摄影。仅添加装饰性渐变并不能证明材料具有某种光学特性。

图像制作中的错误

教学示意图中常见三种错误：没有标出角度是相对于法线测量；把每种颜色都画成边界锐利的独立色带；随意决定颜色分开的方向。第一种错误妨碍计算，第二种掩盖光谱的连续性，第三种则以装饰替代物理规律。

网站最好分成两种模式。“示意图”显示几何关系和约定颜色，并注明内容经过简化；“计算”则使用指定的 n(λ)、光源参数，以及有说明的颜色显示方法。这是作者对交互工具的建议，并非科学标准的要求。

练习

保持入射角为 40°，把第二种介质的折射率从 1.5 改为 1.2。光线向法线偏折的程度应减小：新角度约为 32.39°。如果演示界面显示相反的结果，请检查角度定义和光线传播方向。比较两种条件比观看静态图片更能揭示机制。

返回目录 ↑

第一部分 / 物理基础

第 9 章　干涉与薄膜颜色

无色薄膜如何呈现颜色

一部分光在薄膜上表面反射，另一部分进入薄膜并从下表面反射。两列波随后叠加，它们的相对相位决定彼此增强还是减弱。效果取决于光学厚度、角度和反射引起的相位变化。因此，肥皂膜即使没有相应颜料，也可能呈现彩色。OpenStax，§3.4 薄膜干涉 [17]。

为什么公式需要附带条件

对于正入射，在简单的双光线描述中，额外光程为 2nt，其中 n 是薄膜的折射率，t 是厚度。但光程等于整数倍波长，并不总意味着反射达到最大；还需考虑相对相位跃变。在常见的介电质模型中，光从低折射率边界反射到高折射率边界时会发生相位反转。OpenStax，§3.4 [17]。

作者的计算示例。 假设某种单层材料的 n = 1.4，目标波长为 560 nm。四分之一波光学厚度对应 t = λ/(4n) = 100 nm。仅有这个数值，并不能证明反射会为零；还需满足合适的边界折射率和振幅条件。选择厚度与选择折射率差异有关联，但并不是同一条件。

颜色随角度变化

斜角观察会改变光的传播几何关系，从而使获得增强的波长发生偏移。对设计师而言，“薄膜的颜色”有时是一组随观察角度改变的外观。用吸管工具从一张照片中取出的 HEX 值，只描述这组外观中的一个片段。

教学案例。 某品牌形象使用虹彩贴纸。网站需要三种不同表示：静态的示意色样、展示实物多角度外观的视频或连续画面，以及文本名称。色样帮助识别类别，连续画面展示虹彩特征，名称方便查找商品。它们都不能单独替代生产规格。

虹彩与无障碍设计

如果图标移动时会改变色相，就不应只用这一变化表示重要状态。交互式教学材料可以保留厚度与角度标签，允许停止动画，并提供独立于颜色的数值。这是作者针对演示界面的建议，把光学模型与阅读任务联系起来。

不能从示意图中推出什么

简单的双光线解释不是多层涂层的完整模型。实际计算可能需要考虑多重反射、材料色散、吸收和偏振。教学章节只需说明这些限制，避免读者把 t = 100 nm 的单一结果误当作适用于所有虹彩涂层的配方。

返回目录 ↑

第一部分 / 物理基础

第 10 章　结构色

由材料结构产生的颜色

物质在与光波波长相近的尺度上形成特定结构时，便可能产生结构色。其机制包括薄层干涉、衍射、散射和光子结构。Kinoshita、Yoshioka 与 Miyazaki 的综述汇集了对自然系统和模型系统的相关解释。这是对结构色物理机制的综述，并非研究鲜艳颜色心理影响的实验。《结构色的物理学》，2008 [14]。

“结构”一词指出了光谱选择性的来源，但不代表材料一定会随角度变色；角度依赖与具体结构有关。颜料和结构也可能共同起作用，因此不能简单地说成“颜料或者物理结构”。

如何研究这种着色

仅凭一张漂亮照片不足以确定作用机制。研究者会比较微观结构、光谱，以及反射如何随几何条件变化。有关方法的综述介绍了对单个鳞片和羽毛的测量，并将其与光学模型进行比较。生物系统结构色的物理研究方法 [18]。

这体现了贯穿本百科的科学思路：观察提出问题，测量缩小可能的解释范围，模型则提出可检验的预测。没有测量支持时，“纳米结构”这一名称既不能证实颜色的成因，也不能证明产品经久耐用。

设计任务书需要增加什么

对于平面的屏幕点缀色，通常只需指定颜色空间、坐标和用途。虹彩材料则需要补充条件。作者建议的规格清单包括：

实物样品和底材。
照明及观察条件与方向。
可接受的外观范围，而不只是一个色调。
批次检验方法和约定公差。
分别用于屏幕和印刷的图像。

这只是与制造商讨论的模板，并非通用生产标准。它有助于避免客户根据单帧画面选择虹彩效果，却只凭一个平面样品验收整批产品。

屏幕示意与实物效果

用于概念可视化的作者配色： #155E75 → #0891B2 → #A78BFA → #F0ABFC。它可以表达虹彩的概念，但这些数值并非取自某种蝴蝶或涂层的光谱。添加渐变并不能再现真实材料随观察角度变化的特性。

教学演示的图注应说明实际模拟了哪些变量。“角度”滑块可以控制一组照片的切换；此时功能是浏览实测视角，而不是连续模拟物理过程。如果使用公式，则应说明所用模型及其适用范围。

为什么本章结束物理基础导论

红色颜料、红色像素和红色结构材料可以使用相同名称，但它们的光谱、几何特征和制作工艺都可能不同。现在，面对“红色会产生什么作用？”这一心理学问题，应进一步明确：哪一种刺激、何种条件、针对哪位观察者？下一部分将把这一要求转化为可测量的坐标和流程。

返回目录 ↑

第二部分 / 颜色测量

第 11 章　为什么要测量颜色

从主观印象到可验证的条件

“让蓝色再深一点”是讨论设计概念时有意义的意见，却不足以作为生产说明。不同的人可能指降低明度、增加彩度、改变色相，或调整光泽。测量有助于区分这些要求。它不会代替设计师挑选“漂亮的颜色”，而是帮助确认实际得到的结果。

在色度学中，双方的约定不只涉及坐标。CIE 建议还涵盖观察者、标准照明体、照明与观察条件，以及坐标和色差的计算。这是一套描述条件的系统，并不是要为物体寻找唯一的“真实数值”。CIE 015:2018，技术报告说明 [19]。

作者示例：一个品牌，三种媒介

假设网站的品牌点缀色指定为 sRGB #2563EB，还要应用在屏幕、包装和喷漆金属标牌上。问题从“到处都用同一个代码”这条要求开始。网站的代码指定屏幕颜色；印刷还需要说明工艺和纸张；涂层则需要实物样品和验收条件。HEX 值不包含后两种规格。

更合适的做法是准备三份相互关联的记录：

媒介	提供给执行方的内容	如何检查
网站	sRGB HEX、颜色用途、背景和元素状态	数值、显示效果和可读性
包装	标准样、材料和约定的印刷工艺	按约定流程进行打样与测量
标牌	涂层样品、底材和光泽度	在规定条件下检查生产样品

这是作者提出的任务拆解方式，并非 CIE 的正式要求。它说明了为什么颜色名称相同，不等于生产方法相同。

记录精度与认知精度

L*=52.43871 这样的记录看起来很精确，但小数点后五位并不能证明材料或仪器能够复现这样的精度。在讨论最后一位之前，应先在多个位置重复测量、检查表面不均匀性，并确认比较条件一致。还需区分仪器的显示分辨率、流程的重复性，以及成品允许的差异。

测量不能取代目视检查。例如，平坦区域的颜色匹配合格，并不能说明颗粒、纹理、随角度变化的虹彩或材料纹样也符合要求。正确做法是明确验收对象，而不是断定眼睛或仪器其中一方一定出错。

最低限度的颜色记录

本书建议记录颜色用途、媒介、坐标系统、计算所用的观察者和照明体、标准样、测量方法以及验收规则。未知项应明确标为未知，而不是填入猜测值。这样的记录能把“看起来色调不一样”转化为可调查的问题。

下一章：色度学。

返回目录 ↑

第二部分 / 颜色测量

第 12 章　色度学

这门学科测量什么

色度学按照既定规则，用数值描述颜色刺激。它要回答的实际问题是：在选定的标准系统中，某种刺激对应哪些坐标？这与“人们会不会喜欢这种颜色”“它会不会让人信任”或“物体在任何环境下看起来是否都一样”是不同的问题。

计算过程将光谱描述转换为三个数值。颜色匹配函数把刺激的光谱组成与三色系统的坐标联系起来。CIE：颜色匹配函数 [20]。三个数值便于比较和交换，却无法保留原始光谱的全部信息。

从样品到坐标

考虑一个不透明、无荧光样品的简化模型。计算需要入射光的光谱分布、样品的光谱反射率，以及选定的观察者函数。照明和反射率决定刺激光谱；随后依据观察者函数的权重对其求和。测量几何条件还需另行说明。

简写为：

照明体 S(λ) × 反射率 R(λ) → 刺激光谱 → X、Y、Z。

这是一条教学流程，并非适用于所有材料的完整模型。荧光、明显的角度依赖和透射都需要额外条件。对于显示屏，起点是它发出的光，因此此处不需要表面反射率这一因子。

实测、计算与转换

作者示例：实验室测得样品光谱，在选定的照明体下计算 XYZ，将结果转换为 Lab，并制作屏幕示意图。报告应保留各项结果的来源：

光谱数据来自对特定样品的测量。
XYZ 和 Lab 是在注明的条件下计算所得。
HEX 是转换后的屏幕表示，并不是对材料的一次新测量。

如果读者只看到最后一项，就无法了解颜色从何而来。呈现完整流程，才能判断差异来自测量、计算条件还是显示过程。

色度学不作什么保证

在指定条件下，两个不同光谱可能得到相同坐标。因此，“根据三个数字还原颜料光谱”这一反向问题通常没有唯一解。作者打个比方：知道几笔支出的总和，并不能还原每一张收据。这个比喻用于说明信息损失，但不能替代物理模型。

应把色度学报告理解为一项有条件的陈述：“这些坐标是在这些参数下通过这种方法得到的。”正是这种条件限定，使结果可以核查。一般方法背景见CIE 015:2018 [19]。

上一章：为什么要测量颜色。下一章：标准观察者。

返回目录 ↑

第二部分 / 颜色测量

第 13 章　标准观察者

作为数学约定的观察者

标准色度观察者并非某一个具体的人，也不保证每个人的视觉都相同；它是一组用于计算的函数。ISO/CIE 11664-1:2019 介绍了 CIE 1931 和 CIE 1964 两组函数。前者表示明视觉条件下，视野角尺寸约为 1–4° 时的颜色匹配；后者用于大于约 4°、不涉及视杆细胞的条件。二者通常称为 2° 观察者和 10° 观察者。CIE：该标准的公开说明 [21]。

这些定义并不意味着界面总该用 2° 观察者、建筑总该用 10° 观察者。视野尺寸说的是视角，并非设计学科的名称。为使结果具有可比性，应在方法中选择并记录观察者函数。

为什么只写厘米还不够

作者的几何示例：对于宽度为 w、距离观察者 d 的平面物体，其视角宽度为 2 × arctan(w / (2d))。在 60 cm 观看距离下，2° 视野约宽 2.09 cm，10° 视野约宽 10.50 cm。这是观察几何计算，并非知觉实验。

同一张样品卡在靠近眼睛时占据的视角会增大。因此，仅说“测量了大样品”还不足以精确描述视野。实验室方法需要提供样品尺寸和距离，或直接给出规定的视角。

比较错误如何产生

设想两份针对同一涂料的报告：一份写 Lab、D65、2°，另一份写 Lab、D65、10°。即使颜色名称写得一样，计算条件仍不相同。不能立即把坐标差异解释为生产批次发生了变化。应先让结果具有一致的计算基础，最好直接使用原始光谱数据。

也不应只把标签中的 10° 改成 2°，当作“修正”：观察者名称说明了计算时实际使用的函数。未重新计算就更改元数据，会使报告失实。

网站或研究中应注明什么

普通 CSS 调色板不需要为每个 HEX 值手动添加观察者信息。但测量样品表格应保留实验室报告中的参数。如果原始出版物没有提供这些信息，应如实注明“未说明观察者”，而不是自行填入常见值。

CIE 发布了可用于重复计算的CIE 1931 2° 观察者函数 [10]。标准表格让计算更一致，但不会把平均模型变成对每位读者个人视觉的描述。

返回目录 ↑

第二部分 / 颜色测量

第 14 章　颜色匹配函数

为什么需要三条曲线

颜色匹配函数表示在所选三色系统中如何对光谱成分加权。对于 CIE XYZ 系统，这些函数写作 x̄(λ)、ȳ(λ)、z̄(λ)，用于根据光谱描述计算 X、Y、Z。它们是色度学函数，并不是直接测得的三类视锥细胞敏感度曲线。CIE 术语定义 [20]。

计算示意如下：

X = k ∫ P(λ)x̄(λ)dλ；Y 和 Z 也采用类似计算。

这里的 P(λ) 表示刺激光谱，k 则取决于所选的归一化方式和物理量。对反射样品进行相对计算时，通常将照明体与反射率相乘。应在计算前定义归一化方法，而不是事后调整它来得到预期结果。

积分如何变成表格

计算机处理的是离散数据，即按指定波长间隔排列的数值。CIE 提供 CIE 1931 2° 函数表，采样间隔为 1 nm，DOI 为 10.25039/CIE.DS.xvudnb9b。官方数据集 [10]。

作者建议用四个问题检查计算流程：波长单位是否一致？光谱数据与函数表是否使用同一网格？积分时是否计入采样间隔？归一化方式与波长范围是否一致？其中任一项出错，都可能产生看似合理的结果。三个漂亮的数字不能证明程序正确。

加权求和的简化示例

为了理解运算，取三个假设的光谱值 [2, 4, 1]，以及某一坐标的假设权重 [0.1, 0.6, 0.2]。若间隔为 1，加权和为 2×0.1 + 4×0.6 + 1×0.2 = 2.8。

这些权重是为解释算术而虚构的，并非 CIE 样本；数值 2.8 也不能说成真实颜色的 X 坐标。图注应明确区分教学示意和实测数据，否则插图可能在不知不觉中成为虚假的科学证据。

结果旁还应保存什么

为了让计算可复现，应一并保存原始光谱、函数表的链接与版本、采样间隔、数据网格对齐方法、归一化方式和代码。如果光谱数据每隔 10 nm 采集一次，把它插值到 1 nm 只会增加数据行，并不会增加实测信息。

网站上的图表应标明显示的是哪一种标准观察者的函数。称作“人眼对 RGB 的敏感度”会把不同概念混在一起，让读者难以了解图表究竟呈现什么。

上一章：标准观察者。下一章：CIE XYZ。

返回目录 ↑

第二部分 / 颜色测量

第 15 章　CIE 1931 XYZ

不是屏幕通道的三个坐标

CIE XYZ 是 1931 年采用的标准色度系统。其坐标根据颜色匹配函数计算。ȳ(λ) 函数与明视觉光谱光视效率函数 V(λ) 相同，因此 Y 通过光度学关系与亮度相关。XYZ 是历史 CIE RGB 系统的线性变换，并非现代显示器使用的 RGB。CIE：XYZ 系统定义 [22]。

不要把 X 理解成红色像素的数量、Y 理解成绿色、Z 理解成蓝色。这些字母表示数学系统中的坐标，而不是控制三盏真实灯的通道。它们的用途是为计算和转换提供共同基础。

为什么必须注明尺度

作者示例：在参考白的 Y 分别为 1 和 100 的尺度中，(0.20; 0.30; 0.10) 与 (20; 30; 10) 可能表示同一个相对结果。如果混用这两种约定，软件可能会把差异解释成亮度提高了一百倍。

表格应明确说明数值是否为相对量，以及白色如何归一化。如果表示绝对光度量，就必须提供相应单位和校准信息。没有这些背景时，不应自动将 Y 标为“cd/m²”。

线性及其边界

在一致的线性坐标中，两个光刺激之和可以用它们的 XYZ 值之和表示。教学示例：(10; 20; 5) + (5; 10; 15) = (15; 30; 20)。这是在共同尺度上相加辐射的算术，不是混合颜料的配方。

如果整个光谱按相同比例缩放，XYZ 也会按相同比例变化。混合物质颜料时，对各自坐标进行这种简单运算通常并不足够，因为结果取决于光与材料的相互作用。因此，屏幕混色工具不应被说成真实的颜料计算器。

在设计工作中使用 XYZ

XYZ 适合作为中间数据保留，但不适合直接解读成“再少一点黄色”这样的指令。此外，XYZ 空间中相同的欧几里得距离，并不保证人眼感受到的差异同样明显。不同任务需要不同表示：xy 可将坐标间的相对比例分离出来；Lab 则为许多表面颜色比较提供了更合适的几何关系。

本书的实用建议是：保存 XYZ 时，同时记录观察者、相关照明体信息、归一化方式和数据来源。若无法查明在线转换器的假设，就不要用它随意转换颜色。

返回目录 ↑

第二部分 / 颜色测量

第 16 章　色度图

平面图展示什么

CIE xy 图根据归一化 XYZ 坐标绘制：

x = X/(X+Y+Z)；y = Y/(X+Y+Z)；z = 1−x−y。

归一化后，只需两个坐标便可将结果显示在平面上，但原始 XYZ 的尺度也随之丢失。该图有助于讨论色度和再现边界，却不是完整的颜色知觉空间。xy/XYZ 的定义与转换见CSS Color 4 中关于色彩空间转换的章节 [9]；这是规范草案，不是心理学研究。

同一坐标，不同亮度

作者示例：XYZ (20; 30; 10) 对应 x=1/3、y=1/2。XYZ (40; 60; 20) 也对应相同的 x 和 y。在图上两点重合，但第二个示例的 Y 值是前者的两倍。

因此，在一张平面马蹄形图下标注“人眼可见的所有颜色”会造成误导：图中没有呈现所有亮度层级和知觉条件。对于 X=Y=Z=0 的黑色，上述分数本身没有定义。即使按惯例在图中央标出一点，也不会使其成为黑色在数学上的色度值。

如何阅读设备色域三角形

标出 RGB 系统三种原色发射的色度，就会形成一个三角形。原色的非负混合色度位于其内部。但这张图没有说明在通道功率有限时，各个点能达到什么亮度。二维色域范围与可再现坐标的完整体积并不是一回事。

作者用一个示例说明如何检查宣传图表：图中把两台显示器画成相互嵌套的三角形。单从图像可以讨论所示色度边界的差异；但缺少其他数据时，不能据此断言外侧三角形代表更高精度、更好的黑场、更均匀的背光，或更讨人喜欢的图像。

为什么图中色块只是示意

色度图显示在一块具体屏幕上，而这块屏幕无法再现图中标出的所有色度。图中的彩色填充只是辅助可视化。应根据坐标轴、坐标值和边界阅读几何关系；不要用吸管工具取最外侧绿色区域的 HEX，再称之为“精确的光谱绿”。

网站可以标注：“颜色填充仅作示意；坐标由坐标轴定义。”发布色域比较时，还应注明使用的图表系统和面积计算方法：xy 图中的面积比例本身并不等于所有视觉上可区分颜色的比例。

返回目录 ↑

第二部分 / 颜色测量

第 17 章　xyY

补回丢失的坐标

xyY 表示法保留色度坐标 x、y，并单独保留 Y 值，因此可以区分在平面色度图上重合的结果。这里的大写 Y 很重要：小写 y 是归一化色度坐标；大写 Y 则是 XYZ 三个坐标之一。

当 y ≠ 0 时，逆转换为：

X = xY/y；

Z = (1−x−y)Y/y。

这些关系可直接由 x 和 y 的定义推导出来。XYZ 与 xy 之间的转换也见W3C CSS Color 4 草案规范 [9]。Y 的物理含义参见CIE 对 XYZ 的定义 [22]。

完整计算示例

取 XYZ (20; 30; 10)，总和为 60。因此 x=20/60=0.333333…，y=30/60=0.5，Y 保持为 30，得到 xyY (0.333333…; 0.5; 30)。

检查逆转换：X=(1/3)×30/0.5=20；Z=(1−1/3−1/2)×30/0.5=10。坐标恢复正确。如果中间把 x 保存为 0.33，逆转换得到的 X 就会变成 19.8。这不是样品颜色发生变化，而是表示过程中的舍入误差。

此处所有数值均为教学示例，并不代表对某种纸张或颜料的测量。实际表格还需注明条件和归一化方式。

如何处理零值

含有 y 作除数的公式需要检查边界情况。XYZ 全为零时，色度没有定义。程序应明确规定如何处理此输入，例如返回未定义的 x、y 和 Y=0。如果应用为了方便为黑色保留约定色度，就应将其与计算所得结果区分开。

另一个检查方法是：如果坐标不适用于当前任务，就应拒绝输入，而不是悄悄通过截断来“修正”。有效条件取决于程序描述的是物理刺激还是中间数学量。

xyY 对设计师有什么用

阅读白点规格和显示器参数时，这种表示法很有用：x、y 指定色度，Y 补充亮度量级。但它并不是为了方便地构建视觉均匀的色阶。x 等步长并不保证知觉变化相等。

作者建议：如果确有数据，可在技术记录中显示 xyY；颜色选择界面则提供用户更容易理解的参数。不要为了滑块操作方便而牺牲文档精度，也不要让读者必须懂色度学才能选点缀色。

返回目录 ↑

第二部分 / 颜色测量

第 18 章　CIELAB

更适合比较颜色的几何空间

CIELAB 用三个坐标描述颜色：L*、a*、b*。它是近似均匀色彩空间，并非对所有感觉的精确映射。L* 是明度的相关量；a* 和 b* 指示色彩方向。计算需要指定参考白及其 Xn、Yn、Zn 坐标。CIE：CIELAB 定义 [23]。

大致而言，正 a* 指向偏红方向，负 a* 指向偏绿方向；正 b* 指向偏黄方向，负 b* 指向偏蓝方向。这些轴既不是情绪量表，也不是颜料用量配方。

公式与白点

L* = 116f(Y/Yn) − 16

a* = 500[f(X/Xn) − f(Y/Yn)]

b* = 200[f(Y/Yn) − f(Z/Zn)]

当 t > (6/29)³ 时，使用 f(t)=t^(1/3)；否则使用 f(t)=(841/108)t+4/29。这些公式来自上文引用的 CIE 定义。正因为有非线性转换，L*=50 并不表示 Y/Yn=0.5。

作者对满足 X/Xn=Y/Yn=Z/Zn 的中性刺激所作计算：

相对水平 Y/Yn	L*	a, b
0	0	0, 0
0.18	49.496	0, 0
0.50	76.069	0, 0
1	100	0, 0

这些是计算得到的坐标，并非关于主观“中灰”的实验结果。反算 L*=50，可得 Y/Yn≈0.18419。

为什么“Lab 60, 30, 40”并不完整

没有参考白和原始条件，就无法可靠地将这组记录与另一张表比较。在不同条件之间转换时，可能需要进行色适应，并采用额外假设。不能只把 D65 标签改成 D50，却不改变坐标。

ISO/CIE 11664-4 的公开说明规定了适用范围：被感知为反射物体或透射物体所呈现的刺激。它允许使用经过适当归一化、模拟这类物体的显示器刺激，但并未把 Lab 定义为适用于所有明亮光源的通用外观模型。CIE 标准说明 [24]。此处不转载付费标准全文。

如何解读坐标变化

作者示例中，从 (60; 30; 40) 变为 (65; 30; 40) 会提高 L*，同时保持另两个坐标不变。这是在 Lab 空间中的精确操作描述。但把结果显示在色域受限的设备上时，可能需要进行色域映射。数值上定义了某个操作，不等于保证实物外观完全一致。

返回目录 ↑

第二部分 / 颜色测量

第 19 章　LCh

相同数据，不同坐标系统

本章的 LCh 指 CIELAB 的圆柱坐标形式：L*、Cab、hab。明度保持不变，a 和 b* 则改用到中性轴的距离和角度表示。彩度计算为 C*=√(a*²+b*²)；色相角通过 atan2(b*,a*) 计算，再转换为度数并归一到 0–360°。这些量对应CIE 对 CIELAB 的定义 [23]中的彩度与色相相关量。

如果不注明所基于的系统，LCh 可能产生歧义。本章所说的不是 CIELUV 的圆柱形式，也不是 OKLCH。未经转换，不能把它们的数值放在同一张表中。

一个没有隐藏转换的作者示例

对于 Lab (60; 30; 40)，L*=60、C*=50、h≈53.130°。反向计算可得 a*=Ccos(h)=30，b=C*sin(h)=40。这只是同一个点的两种表示方式；转换本身不会让它变亮，也不会改变设备色域。

若要在 L* 和 h 不变的情况下降低彩度，可将 C*=50 改为 C*=25。此时 a*=15、b*=20。这是在该模型中的精确数学操作。不要把它说成“按 1:1 比例将原始颜料与白颜料混合”，因为那是另一种物理操作。

中性色与圆周角度

在中性点 a*=b*=0 时，彩度为零，色相没有定义。如果软件库在此时返回 0°，这只是技术约定，并不能证明颜色带红色。

角度也不能像普通数字那样直接求平均，除非先选定路径。350° 和 10° 之间的短路径经过 0°，普通算术平均得到的 180° 却落在圆的另一侧。作者的算法示例：先选择 +20° 的角度差，再沿此方向走一半，得到 0°。如果有意选择，也可以沿长路径移动。

在网站中的应用

为了说明颜色编辑，可分别显示三种操作：改变 L*、改变 C*、旋转 h。不要保证任意输入组合都能通过 sRGB 再现。界面应提示颜色超出色域，或说明应用了哪种色域映射。

CSS 的 lch() 函数表示以 D50 为白点的 CIELCH。例如，lch(60% 50 53.1301) 表示该白点条件下的教学示例点。它既不是现成 HEX 值，也不是实测样品。W3C CSS Color 4 草案 [9]规定了语法与色彩空间。

出版时可以将原始 LCh 值与另行计算的屏幕版本一起保存，让读者看出设计坐标与其在特定设备类别上的再现结果之间的差异。

上一章：CIELAB。下一章：CIELUV。

返回目录 ↑

第二部分 / 颜色测量

第 20 章　CIELUV

不同的几何空间，而非 Lab 的另一个名称

CIELUV 是近似均匀色彩空间，坐标为 L*、u*、v*。它与 CIELAB 一样，使用 L* 与相对 Y 之间的关系，但色度坐标的计算方式不同。计算需要指定参考白。CIE 定义 [25]。

区分名称的实际原因很简单：Lab 中的 (60; 20; 30) 和 Luv 中同样的数字表示不同的坐标条件。空间后缀是数据的一部分。导出表格时若丢失后缀，后续比较就会产生歧义。

不要混淆 u、v 与 u′、v′

u′、v′ 坐标指定二维色度；u*、v* 属于三维空间，还取决于明度和参考白。二者的关系为 u*=13L*(u′−u′n) 和 v*=13L*(v′−v′n)。撇号和星号不是装饰性排版符号，混淆会改变数值的数学含义。CIE：CIELUV [25]。

作者的计算示例：当 L*=50、u′−u′n=0.02、v′−v′n=−0.01 时，u*=13、v*=−6.5。当 L*=75 且色度差值相同时，结果为 19.5 和 −9.75。这个例子展示明度参与了坐标计算，并不描述实测灯具。

检查他人的图表

假设供应商发来一张坐标轴标为“u、v”但没有注明系统的图表。与自己的数据表比较前，应先索取坐标定义、公式和归一化方式。仅凭图表外观修正标签并不可靠；相似图像可能属于另一种系统。

将科学数据转移到网站时，应保留原始出版物中的符号，并在旁边补充说明。如果来源使用 u′v′，就不要为了简短而把图表改称“CIELUV”。对于只显示色度、并未展示全部三个坐标的图表，这一点尤其重要。

如何在 Lab 与 Luv 之间选择

选择应取决于任务、约定流程和待比较数据的格式。不能仅仅因为某个名称不常见，就把旧测量系列转换到另一系统。应先确定要评估哪些差异、采用什么标准。

报告色差时也要保留计算基础。Luv 中的欧几里得距离与 Lab 中的距离不是同一个数，更不能自动视为 CIEDE2000。“Delta”这个泛称不能代替具体公式名称。

返回目录 ↑

第二部分 / 颜色测量

第 21 章　ΔE：色差

数值必须注明所用公式

ΔE 表示颜色差异的数值估计，但并非唯一算法。CIE 1976 ΔE*ab 是 Lab 中两点之间的欧几里得距离。CIE 定义 [26]。计算公式为：

ΔE*ab = √[(ΔL*)² + (Δa*)² + (Δb*)²]。

作者示例：(50; 20; 30) 与 (53; 24; 30) 之间的距离为 √(3²+4²+0²)=5。这表示所选度量中的 5 个单位，不是“颜色相差百分之五”。

为什么还有其他公式

即使是 Lab 和 Luv，也只是近似均匀色彩空间。更复杂的公式会修正数值距离与感知差异大小之间的关系。CIEDE2000 另行纳入 ISO/CIE 11664-6:2022 标准。CIE 公开说明 [27]。

不能计算 ΔE76 却标注为 ΔE00。也不能在未检查其他条件的情况下，将某个公式的数值公差直接套用到另一个公式。应在列标题中注明所用度量，而不是把信息藏在通信记录里。

科学论文中的验证示例

根据 Sharma、Wu 和 Dalal 的测试数据，Lab 坐标 (50; 2.6772; −79.7751) 与 (50; 0; −82.7485) 之间的 ΔE00=2.0425。同一组坐标的普通欧几里得距离 ΔE76 约为 4.0011。后一个数值由本书计算，前一个数值来自作者测试数据集 [28]。

论文：Sharma, G., Wu, W., Dalal, E. N.（2005），The CIEDE2000 Color-Difference Formula: Implementation Notes, Supplementary Test Data, and Mathematical Observations。DOI：10.1002/col.20070。作者页面 [29]提供论文与测试数据。这些资料适合检查角度和边界情况；一个示例结果一致，并不能证明整套实现都正确。

从计算到验收

作者建议的验收条件模板：“比较通过约定流程得到的坐标；注明公式及其参数；预先确定验收规则。”数值限值应针对具体任务选择，而不是从网上随意找一张表照搬。

相同距离也可能掩盖偏差方向不同。为了诊断问题，应保留原始坐标及其差值。即使总指标符合公差，客户仍可能看出中性色不希望出现的偏移。度量有助于评价差异，但不能代替明确的要求。

上一章：CIELUV。下一章：刚可察觉差异。

返回目录 ↑

第二部分 / 颜色测量

第 22 章　刚可察觉差异

察觉差异与接受差异是两种任务

差异阈值指在指定流程中能否检测到差异；可接受阈值则指某一具体用途是否允许这种差异。人可能看出两个样品不同，却仍然接受两者。反过来，生产要求也可能规定一个无法靠匆匆一瞥判断的限值。

CIE 将均匀色彩空间描述为一种旨在让相等距离对应相等知觉差异的空间，这些差异可以处于阈值水平或阈值以上。这是空间设计的目标，并不意味着所有真实观察者具有相同阈值。CIE：均匀色彩空间 [30]。

为什么“ΔE=1 始终不可察觉”并不可靠

只写 ΔE 并不充分；还必须注明公式和比较条件。这些公式只是对感知差异的近似估计，并非普遍适用的检测定律。CIE：CIEDE2000 公式背景 [27]。

研究应说明样品尺寸、周围环境、照明、呈现时长、采用同时还是顺序比较，以及参与者要完成的任务。没有这些信息，“人们看不出差别”这一说法就无法复现。还要预先规定标准：正确回答达到什么比例才算达到阈值？如何处理猜测？

作者提出的测试设计

设想一个团队要在两个相近的界面背景色之间作出选择。一种教学流程是随机交替呈现相同和不同的色对，询问是否存在差异，并记录正确察觉与虚报。然后再单独询问差异是否妨碍任务完成。这是建议的研究设计，并非已验证的心理物理学流程。

用户能在实验室样卡上辨别一组颜色，并不代表一周后也会注意到某个网页的细微变化。两种任务的比较条件不同。报告应描述实际测试的情境。

技术任务书中应写什么

与其写“人眼看不出色差”，不如列出可核查的条件：采用了什么流程和标准。如果没有进行研究，就只报告计算出的色差，不应再对人的感知作保证。

本百科尤其强调这一点：数值距离、实验阈值和生产公差应分开呈现。把它们合并成一张通用表格，会以损失含义为代价制造简单的假象。好的技术记录应帮助读者选择合适的检查方法，而不是把缺乏数据说成不可察觉。

返回目录 ↑

第二部分 / 颜色测量

第 23 章　孟塞尔色彩系统

将颜色表示为有序系统中的地址

孟塞尔系统将色彩划分为色相 Hue、明度 Value 和彩度 Chroma。其标记格式为 H V/C。X-Rite 用 5R 6/14 举例：色相为 5R，Value 为 6，Chroma 为 14。《孟塞尔：定义颜色》 [31]。

无论使用什么工具，这种区分都有帮助：“更红”“更亮”和“彩度更高”是不同的变化方向。“更明亮”一词常常把它们混在一起，使沟通变得困难。

如何阅读教学示例

作者对 5R 5/4 的解析：5R 表示红色区域中的位置，5 是 Value，4 是 Chroma。它不表示 5% 红色、50% 反射率或 HSL 饱和度的四个单位。改为 5R 6/4 表示记录的明度发生变化；改为 5R 5/6 表示记录的彩度变化。这些例子用于说明系统记法；是否存在相应实物样品，还需查看具体色谱册。

历史背景可参考 1915 年的 Atlas of the Munsell Color System，该书收录于史密森学会数字图书馆 [32]。早期印刷插图有助于研究颜色分类的历史，但数字复制品不能等同于现代测量的样品。

为什么没有自动 HEX 对照表

要在屏幕上显示实物样品，必须有该样品的数据和转换条件。网上随手找到的对照表可能没有说明测量来源、白点或色域外颜色的处理方式。缺乏这些信息时，为每个代码都附上 HEX 会造成虚假的精确感。

作者建议网站卡片记录孟塞尔标记、坐标来源、条件、屏幕转换方式，并提示显示结果只是近似值。如果只有标记信息，与其编造一个看似可信的色样，不如用文字说明它的含义。

设计师练习

取三张实体色卡，试着分别描述其色相、明度和值彩度差异。然后换一块背景重新观察，并记下哪些判断发生了变化。这是观察练习，不是对视觉系统准确度的测量。

实际上，孟塞尔系统可作为讨论与记录颜色的语言。但知名系统的名称不会使任意配色自动和谐，也不能证明某个样品具有特定心理作用。

返回目录 ↑

第二部分 / 颜色测量

第 24 章　自然色彩系统（NCS）

描述外观，不是颜料配方

NCS 标记法通过黑度、彩度和色相来讨论颜色。官方指南将 S 5020-R50B 解析为黑度 50、彩度 20、色相 R50B——红色与蓝色相似度为 50%。NCS：应用指南中的标记解析 [33]。这些术语描述的是系统属性，并不规定黑、红、蓝颜料的质量比例。

在展示表格和配色之前，最好先解释这一区别。生产配方取决于材料与工艺，不能仅从外观唯一还原配方。

在项目中使用 NCS 标记

作者示例情境：设计师在墙面立面图上标注 NCS 色号，施工方却使用自己的调色系统选择材料。在大面积施工前，双方应先商定在指定底材上做一块试涂。代码用于传达目标颜色；试涂则展示特定材料、施工方法和室内条件下的实际结果。

如果结果有差异，应先检查标准样、材料、底材、施工方式和比较条件。没有找出原因就更换色号，可能会解决一处偏差，却在别处造成新问题。

系统指南中的“和谐”是什么意思

NCS 配色建议使用色相、色调细分、彩度等共同属性来组合颜色。NCS：颜色组合简介 [34]。这些方法有助于构建一组配色，但生产商指南本身并不是能证明这类搭配普遍具有审美偏好的实验。

作者建议的应用方式：先选定容易理解的相似规则，再按照实际比例、在真实媒介上检查构图。共同属性可作为系统选色的依据，但数字相同并不能代替对结果的评估。

NCS 与屏幕示意

本章有意不为 S 5020-R50B 编造 HEX 对应值。若要制作示意，应使用来源明确的数字表示，并说明屏幕无法替代实物标准。没有经过核实的数据时，最好只保留文本色号。

网站卡片可以分开显示三个字段：“目标色号”“显示的屏幕版本”“已验证的材料”。这样，室内照片就不会被误认为精确的测量样品；照片像素还受到拍摄和处理的影响。

上一章：孟塞尔系统。下一章：奥斯特瓦尔德系统。

返回目录 ↑

第二部分 / 颜色测量

第 25 章　奥斯特瓦尔德系统

一种历史性的色彩秩序模型

奥斯特瓦尔德系统通过完全色、白色和黑色的比例来描述颜色。其典型表示方式是一个以这三种颜色为顶点的三角形。白色与黑色之间排列着灰阶，其他中间变化则组织在三角形内部。照明工程学会：奥斯特瓦尔德色彩系统 [35]。

对于百科全书而言，这是呈现颜色关系的一种重要历史方式。但不应把它说成现代印刷工艺的 ICC 特性描述，也不应说成精确的神经编码模型。

三角形有助于观察什么

作者建议的教学图将三个顶点标为“完全色”“白色”和“黑色”。向白色顶点移动表示一种变化方向，向黑色顶点移动则表示另一种。三角形内部的位置有助于讨论属性组合。这种图示能丰富观察颜色的词汇，并帮助分析配色。

不过，单凭图形无法确定所选材料的光谱。如果画家将实物颜料与白色颜料混合，物理结果取决于物质本身及其与光的相互作用。几何上的一个点并不是通用的克数配方。

几何关系正确也不能证明什么

作者示例：沿着示意图中的同一条线选择三种颜色。这只能说明选色方式，并不能证明所有受众都会喜欢这一构图、文字一定清晰易读，或它会引发某种情绪。

要评估构图，还需考察其他问题：每种颜色占多大面积、什么内容最突出、文字是否易读，以及材料在实际照明下的外观。历史规则可以作为起点，却不能代替这些问题的答案。

如何发布历史资料

展示旧色谱时，应区分原始页面、数字复制品和重新绘制的示意图。如果插图是为网站制作的，图注应明确说明。没有相应数据时，不应把三角形中的约定色块称为奥斯特瓦尔德样品的精确复原。

本书主要用这一系统说明颜色分类史和描述颜色的语言。把历史样品转换成 Lab 或 HEX 则是另一项研究任务，需要确认版本、样品状态，进行实际测量，或找到可靠的坐标数据集。

实际结论是：有效地组织颜色与准确再现样品，是两种不同成果。可以使用前者，而不必宣称自己也做到了后者。

返回目录 ↑

第二部分 / 颜色测量

第 26 章　RGB

模型不等于具体色彩空间

RGB 表示由红、绿、蓝三个通道组成的颜色表示法。要让数值具有明确的色度学含义，必须指定具体的色彩空间，包括其原色、白点和编码方式。例如，ICC 注册表单独规定了 sRGB 的这些参数。ICC：sRGB [36]。

因此，不带背景信息的“RGB 100、150、200”是不完整的记录。CSS 色值的含义由语言规则确定；普通表格或文件则必须另行注明。不同空间中的相同数值，不一定表示相同颜色。

HEX 是数字的一种写法

作者示例 #2563EB 可拆分为三个十六进制数：25=37、63=99、EB=235。三个通道的数值为 37、99、235，范围是 0–255。它们既不是光谱波长，也不是某种物质的含量百分比。

三个 8 位通道共有 256³=16,777,216 种组合。代码数量的算术结果不能证明人眼能够在特定显示器上分辨这么多种颜色，也不能说明校准精度、面板均匀性或图像质量。

为什么一半的代码值不等于一半的光

sRGB 编码值与线性分量之间是非线性关系，第 29 章会详细计算。对设计师而言，这意味着必须区分对编码值的操作与对线性光的操作。两个数值的平均在数学上可能正确，却未必解决了你想要的混色问题。

作者举例说明一个定义不清的要求：“需要黑与白的中间值。”它可能指数值范围的中点、线性信号的一半，或视觉上选定的灰阶。在含义明确之前，不能宣称某一个 HEX 是唯一正确答案。

屏幕配色的实用记录

网站配色应记录色彩空间、代码、用途、背景及各状态。例如：sRGB #2563EB，链接点缀色，背景 #FFFFFF；另外说明悬停、焦点、已访问链接和禁用状态。这些用途角色由作者定义，并不意味着蓝色具有普遍的情绪功能。

配色本身不能保证界面易于访问。还需检查具体前景与背景组合、元素尺寸和用途，以及表示状态的其他线索。颜色代码只是界面规格的一部分。

上一章：奥斯特瓦尔德系统。下一章：CMYK。

返回目录 ↑

第二部分 / 颜色测量

第 27 章　CMYK

印刷流程中的四个通道

CMYK 表示青色、品红色、黄色和黑色通道。屏幕点缀色是抽象数值，而印刷结果则与材料和工艺条件有关。ICC 注册表针对不同印刷方法和承印物提供不同的特性数据集；一个数据集可能成为多个配置文件的基础，而这些配置文件可采用不同分色方式，包括黑版生成。ICC：CMYK 特性数据 [37]。

因此，在没有注明工艺时，四个百分比并不是通用的物理标准。

为什么 HEX 没有唯一的转换结果

“把 #2563EB 转成 CMYK”这一要求还不完整。必须明确源色彩空间、目标配置文件和转换目的。还应确认所选工艺能否再现目标颜色，以及如何处理超出色域的结果。

“C=1−R”之类的简单公式只能说明通道之间理想化的互补关系，不能描述真实油墨和纸张。没有补充条件时，不应把公式结果当作精确规格直接交给印刷厂。

分色是单独的决策

相似的色度学结果可能由不同的油墨分布产生。因此，选择黑色通道并非外观上的小调整。生产流程中，应根据工艺要求和配置文件协商确定，而不是看屏幕色块凭感觉挑选。

作者的算术检查示例：若 C=60%、M=40%、Y=40%、K=100%，通道总和为 240%。这只是总和计算，并不表示该配方适用于任何印刷厂。允许的总墨量和分色是否合适，应由具体工艺决定。这不是推荐的黑色配方。

送审时应提供什么

作者建议的清单包括：目标媒介与工艺、配置文件、颜色用途、标准样或约定的打样、转换信息，以及检查条件。如果品牌颜色非常关键，却无法通过所选工艺再现，就应讨论生产技术，而不是通过改写表格中的数字来掩盖差异。

网站上展示 CMYK 时，最好同时注明配置文件，或明确写明数值仅供示意。没有这一字段的“HEX — RGB — CMYK”对照表看似方便，却抹去了决定最后一列的条件。本百科宁愿减少未经确认的对应值，也要提供更多可复现的信息。

上一章：RGB。下一章：HSL 与 HSV。

返回目录 ↑

第二部分 / 颜色测量

第 28 章　HSL 与 HSV

RGB 的便捷操作界面

HSL 和 HSV 使用色相以及另外两个参数重新表示 RGB，方便用户选色。但不能将这些模型的名称直接等同于光度学量或 CIE 感知尺度。Smith 和 Lyons 在原始论文 HWB—A More Intuitive Hue-Based Color Model, 1996 [38] 中讨论了它们的结构与限制。

常见 HSV 表示中的 V 等于 RGB 通道最大值；HSL 的明度 L 则是通道最大值与最小值的平均数。两个模型对饱和度 S 的计算方式也不同。因此，两种模型中相同的 H、S 和末位坐标，不一定表示相同颜色。

作者的计算示例

将通道归一到 0–1。红色 (1; 0; 0) 对应 HSV (0°; 100%; 100%)，而 HSL 为 (0°; 100%; 50%)。灰色 (0.5; 0.5; 0.5) 的饱和度为零，V 和 L 均为 50%；色相没有定义。

对于 #336699，归一化通道为 (0.2; 0.4; 0.6)。得到的 HSL 为 (210°; 50%; 40%)，HSV 为 (210°; 66.667%; 60%)。可通过逆转换回原始通道来核对结果。

为什么相同的 L 不代表相同的光

黄色 #FFFF00 和蓝色 #0000FF 的 HSL L 都是 50%，S 都是 100%。这并不意味着它们具有相同的光度亮度，也不代表上面的文字一样易读。HSL 的 L 只使用通道最大值和最小值，并未考虑其光谱或视觉权重。

对于界面色阶，作者建议把 HSL 当作便捷的控制参数，然后单独检查重要配色的可区分性和对比度。L 的等步长不保证视觉变化也相等。

代码中应保存什么

数值记录应说明模型、取值范围和 RGB 基础。例如，CSS HSL 以 sRGB 为基础，语法见CSS Color 4 [9]。如果应用把滑块标成 HSB，应查看其文档，而不要假定它与熟悉的 HSL 完全相同。

来回转换时可能出现小的舍入误差。编辑时应保留足够精确的原始值，只对界面标签进行舍入。中性色、黑色以及色相角经过 360° 的边界情况应分别测试。

返回目录 ↑

第二部分 / 颜色测量

第 29 章　sRGB

对通道数值的明确约定

sRGB 定义了原色、D65 白点和编码函数。ICC 注册表将其与 IEC 61966-2-1:1999 联系起来。原色的 xy 坐标为 R (0.64; 0.33)、G (0.30; 0.60)、B (0.15; 0.06)；D65 白点为 (0.3127; 0.3290)。ICC：sRGB 参数 [36]。

这套定义让不同使用者可以交换颜色，而不必重新约定每一组三元数的含义。但它不能保证所有屏幕都精确再现信号；设备特性和设置仍会产生影响。

编码值与线性值

对于线性通道 C，当 C≤0.0031308 时，编码值 C′ 为 12.92C；否则为 1.055C^(1/2.4)−0.055。逆函数为：当 C′≤0.04045 时，C=C′/12.92；否则，C=((C′+0.055)/1.055)^2.4。上述 ICC 注册表定义了编码函数；逆函数则由反向运算得出。

作者计算示例：255 个代码值中的 128 对应 C′≈0.501961，但线性 C≈0.215861。因此中性灰 #808080 并不等于白色线性光强的一半。若 C=0.5，编码值约为 0.735357；舍入到 8 位后为 188，即中性三通道值 #BCBCBC。

这些数值描述信号。若不另行定义，不能将其中任一种普遍称为黑与白之间的“心理中点”。

两组教学色阶

以下中性色序列是作者示例，用于展示不同运算方式，并非推荐的界面配色。

步长比例	编码通道等步长	线性通道等步长
0	`#000000`	`#000000`
0.25	`#404040`	`#898989`
0.50	`#808080`	`#BCBCBC`
0.75	`#BFBFBF`	`#E1E1E1`
1	`#FFFFFF`	`#FFFFFF`

此处舍入至最接近的 8 位代码。两组色阶都没有被宣称为知觉均匀。它们说明，“等步长”必须明确指哪种量。

向网站交付颜色

对于普通 sRGB 配色，应保存 HEX 值及其用途。导出图像时应保留正确的色彩空间信息。如果原始材料使用其他空间，转换颜色与仅仅重命名配置文件并不是同一操作。

制作本章插图时，不要给色样增加透明度，因为背景会改变最终颜色。教学色阶应使用不透明信号，并明确说明改变的是哪个坐标。

上一章：HSL 与 HSV。总计划接下来的主题：Display P3、Adobe RGB、Rec.709 和 Rec.2020。

返回目录 ↑

第二部分 / 颜色测量

第 30 章　Display P3

为什么设计师可能需要另一种 RGB 空间

Display P3 是一种屏幕 RGB 色彩空间，色域比 sRGB 更广，尤其覆盖更饱和的红色、橙色和绿色。其原色、D65 白点和编码函数见ICC 注册表 [39]。只说“P3”并不充分：不能默认把 Display P3 等同于电影放映用的 DCI-P3。CSS 在CSS Color 4 [9] 中使用明确写法 color(display-p3 ...)。

#00FF00 表示 sRGB 绿色；color(display-p3 0 1 0) 则指定了另一种绿色原色。不同空间中的相同通道数值不保证颜色相同。反过来，经过正确转换后，同一种感知颜色有时也能由不同数值三元组表示。

网站应用

假设设计师为广色域显示器设计了鲜艳的点缀色。不能把源 RGB 文件简单改名为 sRGB，也不能把 P3 通道值复制进 HEX，因为这样会改变数值含义。应保留图像配置文件并进行色彩转换；CSS 中注明 P3 值和经过验证的 sRGB 备用值。颜色超出色域时，浏览器或图像编辑器必须进行映射，使其落入可再现范围。映射算法很重要，因为简单截断通道可能改变色相。CSS Color 4，色域映射 [9]。

用于测试的教学数值，并非品牌色：使用 #C73B32 作为 sRGB 备用值，并单独选择 P3 版本，再通过合适的显示器进行目视确认。这里不编造“等效”的 P3 数值；它应从具体目标色计算后再验证。界面还需测量实际显示的文字与背景组合的对比度。

需要注意，广色域不会修复糟糕的构图，不会自动让颜色易于访问，也不保证用户能看到额外饱和度。结果取决于显示器、操作系统、软件和设置。

返回目录 ↑

第二部分 / 颜色测量

第 31 章　Adobe RGB

工作色彩空间，不是“让颜色更漂亮”模式

Adobe RGB (1998) 是一种定义明确的 RGB 色彩空间，使用 D65 白点，色域比 sRGB 更广。其参数和负责开发者列于ICC 注册表 [40]。在色彩管理的摄影和印刷流程中，常用它在针对具体输出进行转换前保留源数据范围。名称本身并不意味着所有显示器或打印机都能再现它包含的全部颜色。

RGB 数值相同的 Adobe RGB 照片和 sRGB 照片，不一定看起来一样。因此，没有正确嵌入配置文件的文件，对工作流程中的下一位人员而言含义不明确。指定缺失的配置文件，与从已知配置文件进行转换，是两种不同操作：前者重新解释已有数值；后者改变数值以尽量保持外观。ICC 关于 RGB 工作流程的说明 [41]指出，配置文件是图像交接的重要组成部分。

根据设计任务选择光源

对于珠宝展示柜、美术馆或试衣间，首先确定哪些材料和色调最重要。索取灯具参数，在候选灯光下比较样品，并记录照明方向、强度和背景。眩光、阴影、舒适度和能耗应分别评估。显色保真度高并不自动代表照明“最好看”：任务可能是准确比较商品，也可能是营造有表现力的展示，这两类任务的评判标准不同。

“这盏灯能让红色更好卖”这一说法既不能由 CRI 也不能由 TM-30 推出。此类主张需要单独开展消费者研究。光源指标描述颜色再现，不是广告造成心理影响的因果证据。

返回目录 ↑

专题

主题章节 I：人类如何感知色彩

色彩是视觉系统处理光线信号及周围场景的结果。同一表面在不同照明下、或置于不同背景旁边时，可能呈现不同外观；相同的 HEX 数值也不能保证在不同显示器上产生相同印象。因此，研究人类感知时应结合物理学与色度学，而不能把颜色简化为调色板上的一个数字。视网膜机制概述见 Peter Gouras, Webvision [55]；表面颜色知觉稳定性的综述见 Foster, 2011 [56]。

从光到色彩：三个层次

刺激。 到达眼睛的光取决于光源光谱、表面反射和传播介质。视网膜。 在通常的日间照度下，颜色信息主要由三类视锥细胞提供：S、M、L，它们的光谱敏感范围彼此重叠。这些字母表示相对较短、中等和较长的波长，并不对应三个现成的“蓝、绿、红”感觉。单个视锥只能报告吸收强度，无法独自确定波长。为了区分光谱组成，视觉系统会比较不同类型视锥细胞以及场景相邻区域的反应。知觉。 随后，视觉系统还会考虑边缘、适应状态和周围物体；最终结果并非逐通道读取 RGB。Gouras, Webvision [55]。

视杆细胞在弱光下尤为重要。在黑暗中，颜色差异通常会早于明暗差异消失：白天清晰可辨的设计配色，在照明不足的房间里可能难以区分。这也是应在真实光照下检查导视和包装，而不能只看明亮显示器的实际原因。Gouras, Webvision [55]。

比较、适应与颜色恒常性

大脑会结合周围环境判断表面颜色。在不同日光下，一张白纸看起来仍大致是白色，尽管反射光的光谱发生了变化。这种现象称为颜色恒常性。它并不完全，且依赖具体场景，因此复杂的混合照明仍可能造成偏差。Foster, 2011 [56]。色适应帮助我们适应占主导地位的照明。如果刚看完非常明亮的屏幕就立即评估印刷样品，观察者的状态也会改变比较条件。

相邻颜色也会产生影响：同一色块放在深色或浅色背景上，可能看起来不同。对设计而言，这意味着品牌色应放入实际情境检查：例如卡片、照片旁、按钮中，以及正常显示尺寸下。单独的调色板色块只能提供不完整的信息。

记忆、识别与语言

在 Hansen 等人 2006 年的实验 [57]中，参与者调整熟悉水果的颜色，直到主观上感觉中性。调整结果相对于物理中性值发生偏移，方向与物体熟悉的颜色相反。这表明有关物体的知识可能影响其颜色外观，但并不能证明记忆总会“重新着色”任何场景。

语言会影响某些辨色任务。在 Winawer 等人 2007 年的实验 [58]中，俄语参与者对位于“голубой/синий”（浅蓝/深蓝）语言边界两侧的某些色调配对，辨别速度更快；加入言语干扰后，这一优势消失。结论仅适用于该任务和所选样本，并不意味着使用其他语言的人看不见浅蓝色。后续研究继续检验这一效应能否稳定复现。因此在实际设计中，测试具体元素的识别效果，比依赖语言理论更有用。

观察者之间的差异

感知会受到视力状况、年龄、颜色元素尺寸和照明的影响。常见色觉缺陷可能使人难以区分某些红绿色组合，此外也存在其他类型。美国国家眼科研究所 [59]介绍了这些类型及诊断方式。界面不能只用颜色表示关键状态；还应加入文字、形状、图标或其他独立线索。这符合 WCAG 2.2 成功标准 1.4.1 [60]。

示例。 如果表单错误只用红色边框标出，有些人可能不知道需要修改哪个字段。在字段旁注明“请输入电子邮箱地址”，无需辨认红色也能传达相同信息。文字与背景的对比度应另行检查；色调本身容易区分，并不代表文字一定清晰可读。

设计师的简要检查流程

在浅色和深色背景、手机和桌面显示器、明亮和昏暗环境中展示同一版式。先用灰度检查关键元素，再邀请产品目标用户测试，其中应包括有色觉差异的参与者。记录测试内容：任务、设备、照明、替代标记以及识别错误。这是一种实用的设计检查方法，不是实验室标准。

返回目录 ↑

专题

主题章节 II：色彩心理学——情绪与行为

科学的色彩心理学提出可检验的问题：人们会报告哪些联想，看到某种颜色时实际感受到什么，以及他们在特定任务中的行为是否改变。这些问题不能相互替代。Elliot，2015 [61] 详细讨论了实验的复杂性，以及将研究结果应用于实践时的局限。

三种不同的测量对象

**联想：**参与者把某个颜色名称与“平静”一词联系起来。**体验：**看到经过精确定义的刺激后，参与者报告自身状态发生了变化。**行为：**一个人更好地完成任务、注意到信息或购买产品。不能从联想自动推断体验，也不能从体验自动推断购买。 Jonauskaitė 与 Mohr，2025 年的系统综述 [62] 汇集了 132 篇实证论文；作者指出，大多数比较评估的正是联想。这是品牌传播中承诺效果时必须考虑的边界。

联想研究报告了什么

2025 年的综述考察了效价（愉快或不愉快）、唤醒度（平静或兴奋）以及力量/控制感。红色既与积极的高唤醒感受相关，也与消极的高唤醒感受相关，因此“红色 = 爱”与“红色 = 危险”同样片面。黄色和橙色更常与积极的高唤醒相关。绿色和蓝色更常对应积极的低唤醒，但蓝色也会与悲伤并列。灰色更常与消极的低唤醒状态相关。综述材料中，黑色对应消极感受；力量感不能与唤醒度混为一谈。明度和饱和度也会改变结果。Jonauskaitė 与 Mohr，2025，结果部分 [62]。

在一项跨国研究中，Jonauskaitė 等人，2020 [63]让来自 30 个国家的 4,598 名参与者，把 12 个颜色词与 20 种情绪对应起来。研究者发现了共同规律，也发现与语言和地理位置相关的差异。该研究评估的是颜色词语，而非屏幕上经过相同校准的图像。结果可用于提出传播假设，但它本身并未测量消费者对某个具体标志的反应。

色彩不只是色相名称

在 Wilms 与 Oberfeld，2018 年的一项实验室研究 [64]中，62 人通过 LED 显示器观看了 27 个有彩样本和 3 个无彩样本。研究者分别改变色相、饱和度和亮度，并收集状态评分与生理数据。饱和度更高、亮度更高的刺激伴随着更高的唤醒度评分；各参数之间也存在交互作用。这比“所有红色都会让人兴奋”这样的规则更具体，也更有限。

为什么颜色偏好会改变

Palmer 与 Schloss，2010 [65]提出并通过实证检验了一种颜色偏好的生态理论：人们对某种色相的态度，与他们对和该颜色相关事物的态度有关。例如，洁净的水和晴朗的天空可能会增强人们对某些蓝色的偏好。这一理论描述的是研究条件下的偏好，并不能为所有国家和商品类别得出普遍的调色板排名。个人经历、熟悉的物品和新的事件都可能改变联想。

检验醒目的断言

元分析 Gnambs，2020 [66] 检验了“红色会降低测试成绩”这一常见说法。考虑发表偏差后，支持红色对智力任务产生稳定影响的有力证据所剩不多。这并没有推翻所有情境下关于红色的研究，而是限制了一个关于认知表现的具体而强烈的断言。

实践结论。 把设计目标写成可检验的假设：“在这个界面里，用户能更快找到 A 版本的按钮”，“一周后，人们能更常认出 B 版本包装”。比较时保持文字、构图、明度和任务一致，或者明确说明哪些因素同时改变了。如果只评估了“平静”“有活力”这类词语，就不要把结果称为销量增长的证据。

返回目录 ↑

专题

主题章节 III：品牌色彩——我们知道什么，以及品牌为何选用它

品牌色彩有助于识别、连接不同媒介，并表达公司的故事。选择某种颜色的原因应从品牌自身资料中查找；它对受众的影响则应单独验证。色彩很少独立发挥作用：品牌名称、标志形状、字体、曝光规模以及多年的重复使用都会产生影响。Labrecque 与 Milne，2012 [67] 在四项研究中考察了颜色参数与人们对假想品牌的感知之间的关系，包括对品牌“个性”的推断；该研究并未确定具体公司选择调色板的内部动机。

四个有资料记录的案例

品牌	识别系统中的颜色	品牌自身来源给出的解释	不能归因于该研究的说法
可口可乐	红与白	白底上的历史红色字样；保留可识别元素并维持一致性	“红色会让所有人都口渴”
IKEA	蓝与黄	易于识别并体现瑞典渊源；公司称黄色给人乐观感	“蓝色会自动让人信任家具”
Spotify	绿色搭配黑色或白色	绿色作为可识别的品牌锚点；规范说明搭配方式和标志可读性	“科学证明绿色会增加收听量”
Tiffany & Co.	标志性浅蓝色	历史目录和礼盒用色，后来被确立并标准化	“仅凭浅蓝色就能营造奢华感”

可口可乐：传承与重复

可口可乐的历史资料 [68] 将红白组合追溯至 Frank Robinson 早期设计的招牌。随着时间推移，红色圆盘成为品牌存在的醒目信号。在 2026 年视觉系统公告 [69]中，公司称将强化红白配色，并在不同媒介上结合飘带、方形和标志性字样。这些资料记录的是公司历史和策略，并未通过实验测量单独的红色对饮料口味或销量的影响。公司明确表示其红色没有唯一的 Pantone 色号，因此这里不把网上随意找到的 HEX 值冒充官方规范。

IKEA：渊源、醒目程度与系统

IKEA 解释 [70]，蓝色和黄色有助于人们迅速识别品牌，并突出其瑞典渊源。公司称蓝色用于吸引人们关注产品，黄色则带来乐观印象。这是品牌自己的说法，并非对所有消费者反应的独立测量。IKEA 博物馆 [71]展示了标志的演变过程，其中也包括红白版本；大面积蓝色店面搭配黄色字样是后来才确立的。这样的历史脉络比“蓝色天生具有某种含义”的说法更能解释品牌识别。官方页面没有为所有媒介规定一组通用 HEX 值，因此本文只写颜色名称，不虚构精确代码。

Spotify：易于识别的绿色

Spotify 开发者规范 [72]指出，在需要体现可识别品牌形象时，绿色是核心色。绿色版标志应放在黑色或白色背景上；其他背景则使用单色版。规范还单独要求保证可读性和足够的对比度。它说明品牌如何维护视觉系统，但没有完整解释最初为何选择这个具体色调，也没有揭示它对听众行为的影响程度。没有文件明确确认的 HEX 规格，不会被说成官方代码。

Tiffany & Co.：逐渐积累的颜色标记

根据 Tiffany Blue 礼盒的历史 [73]，这种独特的浅蓝色于 1845 年出现在 Blue Book 目录封面上，后来与礼盒联系起来。公司称于 1998 年注册 Tiffany Blue，之后在 Pantone 系统中将其标准化，名称为“1837 Blue”。这个案例的力量来自包装、送礼体验和品牌之间逐渐积累的联系。颜色名称中的 1837 指公司创立年份，并非 HEX 代码。不能把任意屏幕近似色作为精确的品牌配方发布。

精确 HEX：IBM 开放色彩系统示例

与上述案例不同，IBM Design Language [74]公开提供数字颜色代码：例如核心色 blue 60 为 #0F62FE，blue 70 为 #0043CE，blue 10 为 #EDF5FF；系统还包含 black (#000000) 和 white (#FFFFFF)。IBM 解释说，蓝色系列构成调色板的中心，而灰色、黑色和白色则帮助分配界面中的颜色角色。这些代码展示了如何把颜色管理成适用于不同任务、屏幕和印刷的系统。代码属于 IBM，只是参考示例，并不是可随意复制其他公司品牌形象的通用配色。使用 #0F62FE 或 #EDF5FF 上的文字时，仍需检查具体组合的对比度。

如何说明自己的调色板

为项目记录以下内容：(1) 颜色的作用——导航、识别、强调或传达信息；(2) 它与品牌历史及所属品类的关系；(3) 竞争环境；(4) 复现条件；(5) 面向受众的验证标准。确定主色和辅助色的职责，再设定屏幕 HEX 值及独立的印刷规范。把色样放在浅色、深色背景上，放在照片旁边，并搭配文字展示。研究中应比较理解度、识别率或某个具体行为。简报中写下的心理含义只是一个假设，需要在具体情境中验证。

作者制作的示意配色，并非上文品牌的官方颜色： #163D52（深色主色）、#F0C66C（强调色）、#F6F4EE（浅色背景）、#1D2528（文字）。这些 HEX 值用于示范颜色角色；是否符合对比度要求以及印刷效果如何，仍须另行计算并打样。

返回目录 ↑

专题

主题章节 IV：色彩组合——偏好、和谐与可读性

“和谐”常被当作“美观”的同义词，但二者是不同的评价。在 Schloss 与 Palmer，2011 年的实验研究 [75]中，参与者分别评价整组配色的偏好、配色的和谐度，以及指定背景上图形颜色的偏好。不同问题产生了不同规律：在研究所用样本中，相近的色相有利于提高对配色及其和谐度的评价；图形与背景的对比则可能提高图形本身的吸引力。配色偏好还取决于人们对单个颜色的喜好以及明度对比。因此，不能仅凭一个色轮推导出唯一的“正确搭配”规则。

选择调色板前先问三个问题

我喜欢这个构图吗？ 这是对整个版式的审美评价，包括比例、照片和字体。
各元素看起来协调吗？ 这是关于和谐度与风格统一性的问题。
人们能迅速分辨重点吗？ 这是关于视觉任务的问题：读懂文字、找到操作入口或对应类别。

明显的色相差异可以让按钮更突出，同时也可能让整个构图显得不那么平和。这并非研究缺陷，而是因为所评价的结果各不相同。Palmer、Schloss 与 Sammartino，2013 年的综述 [76]讨论了人们对单色、配色、空间构图的偏好以及个体差异，并提醒我们，颜色的位置和比例也会影响审美印象。

配色组合依赖具体的布局方式

如果交换文字色和背景色，每种色调所占的平均面积、视觉适应和边界感知都会改变。在 Schloss 与 Palmer 关于空间组织的 2011 年研究 [77]中，人们对配色的偏好取决于哪种颜色用作图形、哪种用作背景。因此，两个 HEX 值并不能描述完整设计。应在指定角色中、并以最终页面的实际尺寸检查两种颜色。

和谐与无障碍

审美上的协调不保证文字清晰易读。白底上的浅灰文字可能显得安静、精致，但对比度仍可能不足。对于普通大小的文字，WCAG 2.2 成功标准 1.4.3 [78]规定阈值为 4.5:1；大号文字为 3:1，但存在列明的例外。根据成功标准 1.4.1 [60]，颜色不能成为传递重要信息的唯一方式。应计算实际文字与背景组合的对比度，而不能只看颜色名称。

用于测试的作者自拟方案，而非“情绪公式”

用途	背景	正文	强调色	检查内容
平静阅读	`#F6F4EE`	`#1D2528`	`#163D52`	长文与链接
高对比度公告	`#163D52`	`#FFFFFF`	`#F0C66C`	强调按钮的可读性
多个类别	`#FFFFFF`	`#1D2528`	`#0F766E`	配合文字标签区分类别

这些是自行设计的屏幕配色示例。颜色的职责比它们的情绪名称更重要。投入使用前，应检查每组实际搭配的对比度，以及不同色调在各类设备上的表现；此处列出 HEX 并不能证明用户测试的结果。未经验证，不要把两个纯色样本间的和谐结论直接套用到包含照片和大量元素的界面上。

返回目录 ↑

专题

主题章节 V：广告、销售与包装中的色彩

在营销中，色彩是信号系统的一部分：包装塑造预期，陈列安排注意力，界面展示价格，品牌标志帮助识别商品来源。Labrecque、Patrick 与 Milne，2013 年的综述 [79]说明了将知觉研究结论直接应用于营销的复杂性，并没有提出“红色更能促进销售”这样的通用配方。

对品牌的印象

Labrecque 与 Milne，2012 [67]研究了颜色及其参数与人们对虚构品牌印象之间的关系。必须区分对品牌特征的联想与对熟悉公司的实际购买行为。真实市场中的品牌标志拥有历史、包装、广告和知名度，这些都不是实验室中新设计的标志所能复现的。颜色设计简报最好写成可检验的描述，例如“在版式相同的条件下，A 版本被认为更适合这项服务”，而不要把固定效果归给所有蓝色。

广告：色相与执行方式

Gorn、Chattopadhyay、Yi 与 Dahl，1997 [80]研究了色彩作为印刷广告执行要素的作用，不仅改变色相，也改变彩度和明度。作者在摘要中指出，较高的明度与放松感相关，较高的彩度与唤醒度相关；这些反应参与形成对广告的态度。这是特定实验设计下的结果，并非普遍适用的增销配方。实践中应比较完整广告，并记录具体改变了哪些颜色参数。

情境可能改变效果的方向

Bagchi 与 Cheema，2013 年的研究 [81]是情境依赖性的一个典型例子。在所研究的拍卖中，与蓝色背景相比，红色背景伴随着更大的加价幅度；而在与卖家谈判时，红色与报价之间关系的方向恰好相反。作者将唤醒、攻击性以及竞争对象的不同作为可能解释。设计启示不是“所有价格都用红色”，而是先明确人们处在什么决策情境中，以及他们认为自己在和谁竞争。

货架与包装

人们会整体感知包装：色块面积、图案、材料、文字、形状和照明共同发挥作用。Krishna，2012 年的综述 [82]将视觉线索放在更广泛的消费者感觉体系中讨论。颜色可能使消费者预期某种商品类别或味道，但更换标签也可能同时改变醒目程度、可读性和价格联想。若要了解色彩本身的作用，比较方案时应尽可能保持其他元素一致。

零售任务的评估流程

**对象：**具体包装或广告版式。**条件：**商店类型、相邻商品、照明、屏幕或货架上的尺寸。**变量：**精确标出改动区域的坐标或 HEX 值；用于印刷时，另行测量实际样本。**结果指标：**例如规定间隔后的识别率、货架搜索时间、对价格的正确理解或实际选择。**复核：**除了平均偏好，还要比较错误率、不同文化群体以及有色觉差异的人群。这是项目测试流程示例，并非某一项实验的结果。

测试方案示例。 测试两种茶叶包装色带，同时保持产品名称、照片和材质不变。“你会买哪一种包装？”回答的是一个问题；“哪一种看起来茶味更浓？”回答的是另一个问题。不要把两类回答合并成一个笼统的“效果”。

返回目录 ↑

专题

主题章节 VI：网站与界面中的色彩

在网站上，色彩有助于表达页面结构：文字、操作、导航、状态和数据。用户评价的并非孤立的调色板，而是自己要在页面上完成的任务。因此，数字界面中的色彩应同时从吸引力、易懂性和无障碍性几个方面进行检查。

页面印象

Cyr、Head 与 Larios，2010 [83]通过问卷、访谈和眼动追踪，比较了加拿大、德国和日本参与者对不同网站配色的反应。作者报告了颜色吸引力与信任、满意度之间的关联，也发现了文化差异。研究检验的是特定设计方案，不能据此得出“某种色调能让所有访客产生信任”的规则。

在 Reinecke 等人 2013 年的研究 [84]中，研究者让参与者短暂浏览页面后评价第一印象，并对页面的视觉复杂度和整体“色彩丰富度”进行建模。加上人口统计变量后，这些模型解释了约一半的吸引力评分差异。这并不意味着用一个颜色计数器就能预测任何网站的评价；页面结构、目标用户和页面用途仍然重要。

可读性是另一项任务

Hall 与 Hanna，2004 [85]研究了文字与背景的搭配对可读性、记忆、美感和行为意向的影响。这些结果不能相互替代：读者可能喜欢页面外观，却读得更慢。对在线阅读书籍来说，行长、行距、字号和对比度都很重要。WCAG 2.2 成功标准 1.4.3 [78]规定的正式对比度检查必不可少，但仍不能代替在普通屏幕亮度下用手机实际阅读。

色彩的功能角色

角色	传达的信息	可检查的示例结果
正文	页面内容	长段落的可读性
链接	可以跳转	注意到链接的用户比例
主要操作	下一步行动	正确选择预期操作的准确率
错误提示	需要修正的内容	成功修改字段的比例
数据	数值之间的差异	读图错误次数

错误提示和链接不能只靠颜色差异来识别：WCAG 2.2 成功标准 1.4.1 [60]要求颜色不能成为传递信息的唯一方式。给链接加下划线、用文字解释错误，比挑选所谓“正确”的红色或蓝色更可靠。

实际比较方案

针对书籍页面，提出两个问题：“读者能否找到需要的章节？”以及“能否连续阅读十分钟而不觉得吃力？”展示两个版本，保持文字、字体和区块尺寸一致，只改变指定的颜色角色。分别检查寻找章节、阅读段落、点击来源链接和理解错误提示。完成这些任务后，再评价整体吸引力。此类测试的结论适用于这个网站及其受众，并不能代表所有网站。

返回目录 ↑

专题

主题章节 VII：图表、地图与数据中的色彩

在图表中，颜色承载含义：表示数值顺序、类别差异或相对于基准的偏离。漂亮的渐变可能制造并不存在的分界，也可能掩盖真实差异。Crameri、Shephard 与 Heron，2020 [86]说明，感知变化不均匀或不利于色觉缺陷者辨认的色图，可能扭曲科学信息的传达。设计师的任务是保留数据结构，而不是给每个数值贴上情绪标签。

先确定数据类型

ColorBrewer [87]区分三种情况。顺序色带表示从低到高的有序数值，此时明度应按可控方式变化。发散色带突出有意义的中心点（如零）及其两侧的偏离方向。定性色带区分类别，但不暗示高低顺序。如果把“苹果”“梨”“李子”这几类画成由浅至深的顺序色带，读者可能误以为它们之间存在实际并不存在的等级关系。

数据	方法	示例
订单数量 0–100	顺序色带	数值增加时由浅变深
相对正常值 −5…+5 的温度偏差	发散色带	两个偏离方向，中间为中性零值
三种服务类型	分类色	相互区分但不分高低；必须提供文字标签

关键值、缺失数据和零值应分别标示。“无数据”不能使用代表最小值的颜色，因为二者含义不同。

彩虹色带为何容易误导

彩虹色带包含多种色相，但人们感知到的明度变化并不均匀。因此，相同的数值间隔有时看起来很小，有时又显得突兀。Crameri 等人，2020 [86]讨论了此类失真以及色觉缺陷者面临的困难。Moreland，2009 [88]详细讨论了科学可视化中的发散色带。本文引用其设计原理，不复刻其现成色带或插图。

无障碍也是对信息含义的检验

Nuñez、Anderton 与 Renslow，2018 [89]介绍了针对常见红绿色觉缺陷优化色图的方法，并提出了 cividis。他们的方法旨在让不同色觉的观察者以相近方式解读数据。但即使使用这种色带，也不能省略坐标轴标签、计量单位和图例，还要在实际使用尺寸下检查图表。

作者自拟的教学用色带

对于 0 到 100 的数值，可以从 #EEF5F6 → #6C9BAA → #163D52 开始。这是对“由浅到深”原则的示意，并非经过感知均匀性测量并正式发布的色带，也不能替代经过科学评估的色图。发布前应检查明度是否单调、相邻档位能否区分，以及模拟不同色觉时是否清晰；之后再标注数值并提供图例。

地图检查简要流程

请读者找到最大值、比较两个相邻数值，并在未事先解释图例的情况下判断偏离方向。记录错误、耗时和信心程度。如果产品同时包含印刷品和屏幕版本，两者都要测试。地理地图还要考虑相邻区域与边界；热力图则需考虑单元格尺寸。这是受文献中相关任务启发的编辑流程，并非通用实验阈值。

返回目录 ↑

专题

主题章节 VIII：食品、饮料与环境色彩

在食品设计中，颜色可以提示人们预期的味道和新鲜度。在室内空间中，颜色会与照明、材料及人的活动相互作用。同一套配色在这两种情境下不一定带来相同体验。

对味道的预期

Spence，2015 年的综述 [90]介绍了一些研究：产品颜色会改变人们对味道的预期，有时也会影响实际品尝后的评价。关键机制之一是预期与实际感官体验是否吻合。如果颜色暗示一种味道，产品入口后却是另一种，落差可能损害整体印象。年龄、文化和个体差异都可能改变颜色线索的意义。因此，红色液体并没有唯一且固定的味觉“译法”。

饮料测试示例。 先让参与者在不品尝的情况下观看样品，询问他们预期的味道、甜度和新鲜度。随后让他们品尝，并测量实际体验到的味道和喜好度。如果配方与颜色同时改变，就无法区分颜色的作用。如果只更换包装图案，所得结论反映的是包装引发的预期，不一定是液体本身的味道。

包装颜色与产品本身的颜色

消费者可能透过透明瓶子看到饮料，也可能只能根据标签判断。这是两种不同情境。Krishna，2012 [82]将感官营销视为视觉线索与其他感官体验的相互作用。研究酸奶时，应分别评价内容物的颜色、浆果图片、瓶盖和标签底色。否则，“紫色改变了味道”这样的结论过于宽泛：消费者或许只是因为图案而预期它是蓝莓味。

光线与室内表面

对于涂色墙面，最终效果取决于灯具的光谱、照射方向、涂料光泽、表面质感和周围材料。Küller、Mikellides 与 Janssens，2009 年的比较研究 [91]考察了环境色彩、唤醒度和任务表现，但不能由此得出“蓝色墙面能提高生产力”这样的通用建议。应在实际照明条件下，并结合具体用户的任务来测试空间设计。

两种实际检查方法

**产品：**保持配方、容量、温度和配料信息不变，只改变一种视觉线索。测量品尝前的预期和品尝后的评价。**房间：**准备实际材料样品，在计划使用的灯光下分别于早晨和傍晚查看；测量照度并记录视觉任务。两种情况下，屏幕上的 HEX 都只是设计记录，不能用作味道或涂漆表面反射率的规格。

返回目录 ↑

专题

主题章节 IX：文化、语言与偏好差异

“人人都喜欢这种颜色”是一个需要极强证据支持的说法。比较时应选取可比群体，使用相同刺激，并以相同方式提出问题。有的研究测量人们对色样的偏好，有的研究测量颜色词引发的联想，还有的研究观察包装选择。这些研究回答的问题各不相同。

共同规律与差异

Jonauskaitė 等人，2020 [63]发现，在 30 个国家中，颜色词与情绪之间存在相似规律，同时也观察到语言和地理接近程度的影响。该研究说明某些联想可能是共通的，但并未把每种颜色变成一条放之四海皆准的设计指令。Madden、Hewett 与 Roth，2000 [92]在营销情境下比较了八个国家对颜色的理解与偏好，也发现了相似与不同之处。

更直接检验偏好是否普遍的研究是 Taylor、Clifford 与 Franklin，2013 [93]。作者比较了英国成年人和纳米比亚的辛巴族人。在研究条件下，两组人的偏好结构存在明显差异，一个模型也无法同时解释两组结果。这不代表不同文化之间没有共同点，而是说明该比较不支持“全球色相排名固定不变”这一强断言。

语言有助于完成某些任务

Winawer 等人，2007 [58]对俄语“голубой/синий”（浅蓝/深蓝）语言边界的研究表明，在特定任务中，语言类别可能影响参与者辨别所选色样的速度。这并不能证明语言会永久改变视网膜。对于国际网站的编辑来说，这提醒我们应请母语者检查色名和标签，不应假设“蓝色”“浅蓝色”和“青绿色”在各地都理解一致。

本地化时要检查什么

先明确颜色的功能：识别品牌、发出警告、区分商品类型还是装饰。面向目标用户开展简短测试，请他们辨认操作、描述联想并解释选择。记录的不应只有答案比例，还应包括场景信息：照明强度、设备、年龄和对品牌的熟悉度。若出错会造成后果，就提供其他文字标记。有关联想的研究不能替代对网站任务完成能力的测试。

示例。 在国际化界面中，同一种绿色可能既用作确认按钮，也用作品牌标志和类别标记。即使“自然”是常见联想，用户仍可能混淆这些角色。应通过文字、形状、位置和交互顺序区分它们，然后在不同语言版本中测量错误。

返回目录 ↑

专题

主题章节 X：如何验证有关色彩的说法

一本实用的百科全书不应只呈现结果，也应说明如何区分可靠结论与引人注目的故事。Elliot，2015 [61]指出了色彩心理学中的方法问题：刺激定义不清、未控制明度和饱和度、情境因素未充分考虑，以及某些效应难以复现。人们常说“X 颜色会导致 Y”，这句话往往掩盖了具体条件。

检查来源的五个步骤

1. 展示了什么？ 颜色词、屏幕矩形、织物、房间和包装都是不同的刺激。2. 测量了什么？ 联想、情绪评分、眼动、答题正确率还是购买行为。3. 对谁、在哪里测量？ 记录样本量和来源、语言、设备及照明。4. 与什么比较？ 必须描述对照颜色；如果色样的明度也不同，就不能把所有结果都归因于色相。5. 结果是否复现？ 若要得出有力的实践结论，应查找独立重复研究和元分析。

更广泛的研究背景也很重要：开放科学协作组织 2015 年的大规模研究 [94]考察了整个心理学领域的结果可复现性。它没有专门测量品牌色彩的影响，但说明了为什么要把初次观察与稳定知识区分开来。更直接相关的例子是 Gnambs，2020 年关于红色与智力任务的元分析 [66]：早期报告的大效应，并不意味着我们可以确信它会在所有实际情境中重现。

论断记录卡

字段	记录内容	示例
论断	精确、可检验的表述	“A 版本在页面上更容易被注意到”
刺激	颜色、尺寸、背景和媒介	sRGB 代码与版式截图
情境	任务和目标人群	在手机上阅读文章时寻找链接
结果	要测量的指标	到首次正确跳转所用的时间
依据	来源链接及可访问程度	全文、摘要或标准
局限	尚未明确的内容	未测试印刷版本和其他受众

这样的记录卡不会把主观偏好变成因果效应，却能让决策接受检验。它也可以帮助设计实验，并预先选定主要结果指标。如果一次测试五个版本和十项指标，偶然“胜出”的版本更容易被误认为存在稳定规律。应在查看结果之前确定比较方案，并保留无效结果以及不符合预期的结果。

返回目录 ↑

专题

主题章节 XI：从屏幕到印刷的色彩工作流程

选定颜色代码前先问四个问题

项目中的颜色不仅有名称和 HEX 值，也有用途、媒介、观看条件及可接受的偏差范围。先写一份简要说明：哪些特征必须保持可识别、颜色会出现在哪里、由谁确认样品、如何测量或比较结果。对于屏幕界面，应特别关注可读性和组件状态；对于包装，则要考虑材料、油墨、货架照明以及批次间的一致性。ICC 对色彩配置文件作用的说明 [95]指出，配置文件用于通过明确定义的转换连接不同设备的数据，并不能神奇地保证外观完全相同。

场景：一个品牌，三种媒介

假设版式的主色是 sRGB 下的教学用陶土色 #B54708。这是作者制作的示例，并非现有品牌的规范。网站可以将其用于白字按钮：不透明的 #FFFFFF 与 #B54708 组合，按 WCAG 计算的对比度约为 5.43:1。因此，它达到普通文字 4.5:1 的数值门槛，但这并未检查焦点指示器、按钮尺寸、文字下方的图像或 WCAG 2.2 [78] 的其他要求。

为盒子制作照片时，应保留原始图像配置文件；按照已商定的发布流程转换文件，并在浏览器中检查。制作实体盒子时，不要只把 #B54708 发给印刷厂：应索取对应印刷方式和纸张的配置文件，先做软打样，再制作实体打样。双方还应商定印刷工艺参数和视觉检查条件。ICC 对 RGB 工作流程和软打样的说明 [41]指出，屏幕模拟很有用，但不能代替对实体样品的确认。

阶段	应保留的内容	应检查的内容
数字母版	原始文件、色彩空间/配置文件、颜色用途	数值是否得到正确解释
网站	sRGB 值、必要时的广色域版本、文字/背景组合	对比度、状态、实际显示器
印刷稿	目标印刷工艺和纸张的配置文件	超出色域的颜色、暗部细节、中性色
确认	日期、光线、样品和允许偏差	在商定条件下是否匹配

三种常见错误

只改名称，没有转换。 如果把 Adobe RGB 通道值直接标成 sRGB，它们会被不同地解释。盲目转换成 CMYK。 各印刷厂没有通用的 CMYK；承印材料和工艺都会改变可用色域。对显示器期望过高。 即使显示器经过精确校准，也无法呈现纸张的纹理、光泽和反射光。为品牌制作规范时，应把屏幕代码作为整个系统的一部分，而不是唯一标准。

品牌色档案

实用的色彩档案应包括：颜色角色名称、原始定义及色彩空间、允许的数字版本、对比度组合、深色主题选项、印刷参数和实体参考样、检查日期及负责人。若另一家公司没有正式公布准确的品牌色代码，就不要用网上随手找到的 HEX 替代。应明确告诉读者哪个代码是官方规范，哪个只是教学示例。

返回目录 ↑

专题

主题章节 XII：界面色彩系统——角色、令牌与状态

为什么 HEX 清单不等于系统

调色板回答“有哪些颜色可用”。色彩系统还要回答“这些颜色各自做什么用”“状态变化时如何调整”以及“切换主题后会怎样”。可以把颜色分为三个层级：基础色阶、语义角色和具体组件颜色。Design Tokens Color Module 2025.10 [96]格式中的颜色令牌会保存色彩空间及分量信息。这是稳定的 W3C 社区组报告，但不是 W3C 推荐标准。该格式是交换数据的工具，并不能证明某个视觉设计方案合理。

编辑类网站的教学示例系统

以下是不透明的 sRGB 配色示例，由作者拟定并按 WCAG 公式计算。颜色名称描述的是用途，而非情绪。长文正文使用白底 #FFFFFF 上的 #111827（约 17.74:1）。信息提示块使用 #EFF6FF 底色上的 #1D4ED8（约 6.16:1）。错误提示使用 #FEF3F2 底色上的 #B42318（约 6.05:1）。商店按钮使用白字和 #B54708（约 5.43:1）。这些数值仅适用于所列的不透明颜色组合和普通大小文字。如果按钮叠在照片上或使用半透明颜色，就需要重新计算对比度（WCAG 2.2：最低对比度 [78]）。

层级	名称示例	记录内容
基础色阶	`rust-700`	一个颜色资源，尚未指定用途
语义角色	`action-primary-bg`	主要操作的背景色
组件	`purchase-button-bg`	某个按钮中对该角色的具体实现

表中名称是作者拟定的示例，并非必须遵守的行业标准。语义令牌让更换主题更容易：组件引用一种角色，而不是任意色阶编号。即便如此，仍须在版式中确认最终可见的颜色组合；文件里的令牌名称正确，并不代表设计结果一定合适。

状态矩阵

按钮需要定义默认、悬停、按下、聚焦、禁用和加载状态。链接需要定义默认、悬停、聚焦状态，以及系统支持时的已访问状态。输入框需要定义默认、聚焦、出错、成功和禁用状态。每个状态都应在实际背景下检查。不能只用红色边框表示错误；还要提供文字、符号或其他可辨线索（WCAG 2.2：使用颜色 [60]）。

深色主题与用户配色

深色主题不能靠机械反转 HEX 值生成，因为层级、感知亮度、图像和对比度都会随之变化。应为文字、表面、边框和状态标记分别设计配色组合。还要检查系统主题偏好以及强制颜色模式。CSS Color Adjustment 1 [97]介绍了浏览器如何用用户的系统调色板替换网页指定颜色；在该模式下，重要信息和可见焦点仍必须保留。

验收流程

在真实组件中逐个检查每个令牌：分别放在浅色和深色背景上，在键盘导航、页面缩放和强制颜色模式下进行检查。另行检查图表、插图和照片，因为它们可能破坏原本按纯色背景计算的对比度。最终目标不是一组“完美色号”，而是一套能在新页面上重复使用的颜色选择与检查规则。

返回目录 ↑

专题

主题章节 XIII：真实界面元素中的色彩无障碍

三种不同的检查

文字对比度达到阈值，并不等于获得了通用的无障碍认证。WCAG 2.2 成功标准 1.4.3 [78]评估文字与背景之间的对比度。标准 1.4.11 [98]涉及理解所必需的图形对象和控件。标准 1.4.1 [60]要求颜色不能成为传达含义的唯一视觉方式。这些是不同的问题：文字是否易读？边界或图标是否可见？不辨认色调能否理解其功能？

表单示例

在订单表单中，填写错误的字段以 #B42318 红色边框标出，底色为浅色 #FEF3F2。只有边框还不够：应在旁边加上“请填写送货地址”等文字，并将提示与字段关联，同时提供明显的键盘焦点样式。如果已成功填写的字段带有绿色标记，也不能只依赖绿色；还应添加文字说明或形状明显的符号。在浅色背景上，元素轮廓必须清晰可辨。应用阈值时，应按 WCAG 对应标准的准确措辞和例外情况进行判断，不要笼统地说“一切都必须达到 3:1”。

图表示例

图中两条线分别用红色和绿色标记。即使二者与白色背景的对比度足够，用户仍可能把两条线彼此混淆。应使用不同标记或虚线样式，并在线条末端直接标注。如果图表面积很小，要按手机上的实际尺寸检查。色觉模拟有助于初步审查，但不能证明所有用户都能以相同方式读懂图表。对于地图和连续色阶，应另行检查明度顺序以及可能产生的虚假边界；参见 Crameri 等人，2020 [86]。

按钮与链接示例

不透明纯色背景上，白字与 #B54708 的对比度约为 5.43:1。但如果按钮半透明地覆盖在照片上，实际背景就会改变。应针对每个显示状态重新计算可见颜色组合，或添加不透明底层。段落中的链接也应在不辨认颜色的情况下被识别，例如加下划线。键盘焦点必须始终可见。在强制颜色模式 [97]中，部分背景填充和阴影可能消失，因此应检查组件结构，而不能只看原始设计稿。

测试报告中要记录什么

针对每个问题，记录页面、元素、状态、实际文字与背景颜色、设备或浏览模式、适用标准和截图。修复后重新检查。检查九组配色，并不足以把整个页面称为“符合 WCAG”：页面结构、导航和交互也有其他要求。

返回目录 ↑

专题

主题章节 XIV：布雷姆与色彩心理学——设计中值得借鉴的内容

Harald Braem 的《色彩心理学》（莫斯科：AST/Astrel，2009 年；M. V. Krapivkina 译；158 页）是 Die Macht der Farben 的俄文译本。书目信息见 Google Books [99]；Elvea 出版社 [100]介绍了德文再版。本文关注 Braem 将色彩同时视为视觉印象、文化符号和设计决策的思路。以下是结合现代研究对其观点作出的独立分析。

这本书真正有价值的地方

Braem 的长处不在于提供“魔法色彩词典”，而在于反复回到具体情境：物体颜色、邻近颜色、文化记忆、材料、顾客预期和信息目的共同发挥作用。在印刷版第 32–33 页，他明确区分了红色家族中的不同色调，而非一种普遍的“红色”，并指出背景与邻色会改变印象。这是有用的设计问题框架。其不足是从生动观察和个别演示，跳到有关生理反应、遗传原型或治疗的宽泛结论。某种说法不会只因写在书里就变成已证实的结论。

图中，同一强调色 #C84B3B 被用于三种情境：第一个屏幕上它标示操作，第二个屏幕上它形成大面积情绪色块，第三个屏幕上它表示错误。这些不是实验结果，也不是试图用 HEX 测量反应；图示说明了为什么未定义颜色用途之前，不能先给它指定一种心理效果。

不是“色彩的含义”，而是可能解读的地图

Braem 分别讨论红、蓝、黄、绿、橙、紫、棕、黑、白、灰和银色，构成一幅广阔的文化图景。与其整理成“颜色 = 情绪”的表格，不如把它转化为设计问题。下表将书中的主题与 Jonauskaitė 和 Mohr 的系统综述 [62]所采用的“联想、偏好、行为”区分对应起来。以下并非各色系的普遍属性。

色系	两种可能的解读方向	简报中要澄清的问题
红	爱、能量、庆祝，或危险、错误、禁止	用于品牌、节日、折扣还是警告？色块面积多大？
蓝	距离感、稳定、专注，或寒冷、疏离、悲伤	是长文背景、服务状态还是情绪形象？
黄	光亮、活力、醒目，或刺眼、杂乱、警告	背景明度如何？实际尺寸下文字是否可读？
绿	生长、自然、许可，或毒性、人工感、嫉妒	“环保”提示是否暗示了缺乏依据的环境承诺？
橙	亲近、温暖、趣味，或廉价、激进促销	需要友善提示还是紧迫信号？
紫	仪式、独特、幻想，或疏离、人工感	受众是否熟悉这种文化符号？
棕	材料、土地、手工艺，或污垢、陈旧、沉重	纹理是否显得有意、可信？
黑	图形凝练、地位，或细节消失、阴郁	层级和状态差异是否仍清晰？
白	空间、洁净，或冷硬、空洞	是否需要温暖材质或更明确的结构？
灰与银	中性支撑、金属、科技，或缺乏个性	是独立形象还是另一种材料的背景？

此表用于提出相互竞争的假设，而非诊断个性、国籍或购买行为。即使在研究色彩与情绪关联时，结果也会受到措辞、颜色分类及参与者群体的影响；强烈联想不能证明消费者选择会改变。介绍 Braem 所述历史象征时，应注明地点与年代，不能泛化到所有人。

值得发展的六个观点，以及六项限定

一种颜色有许多变体。 “红色”并非一个精确答案：珊瑚红、酒红和信号红的明度、饱和度与情境都不同。项目中要记录色调、面积、材料和照明。限定：颜色名称本身不能确定 CIE 坐标或 HEX 值。
邻色会改变印象。 Braem 描写颜色与邻色并置时的“声调”。这为比较“颜色相同、用途不同”的版式提供了理由。限定：艺术性的“增强”不一定等于经过测量的心理物理效应。
符号可能有相反含义。 Braem 将红色同时联系到生命与威胁，这提醒我们避免扁平的色彩词典。限定：具体含义来自符号、文字与任务，而非孤立色块。
材料与预期会相互作用。 书中讲到同样的盒子因颜色不同而显得重量不同（印刷版第 10–11 页）。后来 Huang，2008 [101] 对 42 名学生研究了刺激颜色、照明与重量感。但这并未验证 Braem 以公斤表示的数值尺度，也不能据此承诺实际重量或销量会改变。
颜色能引发跨感官预期。 关于味道、气味和声音的章节（印刷版第 133–143 页）为包装和界面提出了实用问题。Spence 的综述 [102]讨论跨模态对应关系；具体产品、文化和刺激仍需测试。普通的“颜色—味道”联想并不等同于联觉。
设计师应以观察取代教条。 书末建议比较不同情境并培养视觉敏感度。我们将其转化为有对照版本的测试流程，而不是“我能感受到受众”的直觉。限定：设计师意见只是提出假设的起点，并非用户研究结果。

未经验证，不应照搬到现代出版物中的说法

Braem 称红色必然加快脉搏、蓝色必然减慢脉搏，这过于绝对；生理反应会受到亮度、持续时间、光照条件、任务和个体的影响。书中还声称“暖房”和“冷房”之间相差 13°C（第 12–13 页），这一说法更不可靠：书中没有说明可将此数值当作恒定温控修正量的实验方法。后来的热舒适度实验研究 [103]指出，早期结果并不明确。因此，不能把红橙色房间设计成暖气的替代品。

有关绿色“疗愈作用”及色彩疗法的章节（第 143–149 页）应被视为思想史材料。不能把调色板开成治疗抑郁症、贪食症、疼痛或躯体疾病的处方。若项目用于医疗场所，应分别测量照度、安全、隐私、导视和患者体验；医疗主张需要临床研究，书中引用的例子并未提供这些证据。

第 150–152 页列出的“德国人喜爱的颜色”和“病人的颜色”，没有充分交代样本、日期、方法和分析，不足以支持现代概括。更不能根据用户选的颜色推断其患病与否或性格特征。Sugonyaev，2019 [104]在多个样本中检查八色吕舍尔测试，未发现其流行指标与人格特征之间存在稳定关联。Braem 书末的占星术和炼金术对应关系属于符号体系史，而非心理测量量表。

三种实用情境，而不是装饰性的 HEX 清单

教育服务。 基底 #F5F3ED，正文 #202A2E，蓝色 #245B78，柔和强调色 #D99B62。浅色背景与深色文字适合持续阅读；蓝色稳定地用于链接和章节，橙色则少量提示实际操作。检查所有文字组合的对比度、链接是否能通过颜色以外的方式识别，以及手机上的阅读体验。不要承诺蓝色能“改善学习”。

服务导视。 基底 #FFFFFF，文字 #18232B，成功 #126B56，警告 #A45412，错误 #B42330。重要的是状态惯例，而不是“红色的情绪”。每种状态都应有标签或图标，不能只靠红色传意。检查实际文字对比度、字段边界、焦点显示和有色觉差异者的使用情况。WCAG 2.2 的“使用颜色”标准 [60]明确规定不能只依赖颜色。

材料产品故事。 纸色 #EFE6D6，正文 #2B2926，木色 #6B4B38，强调色 #B66A44。棕色只有与材质照片、产品来源和真实包装质感相结合才有意义。绿色或棕色背景本身不足以支持环保声明。检查不靠颜色提示能否识别材料、视觉隐喻是否取代了事实，以及印刷效果是否可靠。这里的 HEX 是屏幕教学值，不是现成的 CMYK 配方。

三套配色承担不同功能。仅凭“温馨”或“可靠”之类的词来选择并无意义：先定义读者要采取的行动，再分配颜色角色，最后才检验联想和审美。

如何在自己的网站上检验书中的假设

记录一项可观察的结果，例如正确找到警告的人数比例，而不是“是否喜欢这个颜色”。
保持文字、尺寸、位置、字体和图像不变，只调整所关注的颜色因素；如果要测试多个因素，应明确设计对照。
除色相外，也比较明度、饱和度和对比度，避免色相差异掩盖可读性差异。
将最终版式展示给目标用户，包括手机尺寸和真实观看条件。若事件罕见或需分析细分人群，另行检查样本是否足够。
保留负面和零结果。它们同样有价值：对具体产品的认识胜过普遍的“色彩魔法”。

因此，从 Braem 的著作中值得带入百科全书的，不是原书篇章或未经验证的承诺，而是最有建设性的核心观点：色彩属于人的经验，应同时从文化、视觉和实验角度加以描述。

返回目录 ↑

专题

主题章节 XV：从任务出发建立调色板——设计师工作坊

评价调色板时，与其看一排色样是否漂亮，不如判断它能否解决页面、包装或海报的实际问题。先写下三句话：用户首先应该注意到什么；需要比较哪些信息；接下来应采取什么行动。这是作者提出的设计方法，并非心理测试。它能帮助把“现代”“平静”“高级”等词语转化为可展示、可验证的设计决策。

从简报到限制条件

建筑事务所网站的主要内容可能是建筑照片；配送服务的主要内容则可能是地址、送达时间和下单按钮。前者如果使用过于活跃的配色，可能会与照片争夺注意力；后者若过于中性、没有明显操作提示，用户就难以找到下一步。不要规定每个项目都必须有相同数量的强调色。先列出使用媒介：手机、大屏幕、印刷品、招牌；再标出不能更改的元素：标志、照片、必须保留的信号色和现有界面。

提出三个方向，而不是二十个近似色。例如：中性色基底搭配一种冷色强调；暖色基底搭配深色强调；或者高对比度的双色构图。所有方案都放在同一版式中展示。否则客户可能是因为照片或构图而选择，却误以为自己选的是颜色。

先定义角色，再选色调

编辑类页面的基本颜色角色包括背景、卡片表面、正文、次要文字、链接和主要操作。错误、警告和成功提示则属于独立的语义组。品牌色不必同时充当错误提示色，也不必用于所有图表。IBM 色彩系统 [74]中，中性色占据界面很大部分，蓝色及其他色组各有明确用途。这只是某一品牌的组织方式，并非通用比例。

教学版式中的角色	sRGB 颜色	用途
背景	`#F6F4EE`	大面积、平静的表面
文字	`#1D2528`	主要阅读内容
主要操作	`#163D52`	白字按钮
强调	`#F0C66C`	搭配深色文字的标签或提示块
表面	`#FFFFFF`	卡片和输入框

这些颜色是为示例专门设计的，其含义取决于在版式中的指定用途。黄色提示块可以表示精选内容，但不能在下一页毫无说明地变成警告标记。若含义发生变化，就应更改颜色角色或添加明确标签。

色相搭配方案：从这里开始

类似色方案使用相邻色相；互补色方案使用相对的色相；分裂互补色方案使用与对比色两侧相邻的两种色相；三角色方案则使用间隔相等的三种色相。这些几何规则能帮助寻找备选方案，但不能保证配色和谐或易读。结果还取决于采用哪种色轮：HSL 中的相对色，不等同于传统颜料色轮中的对比色。

四种 HSL 色相方案：起始角 210 度、饱和度 60%、明度 45%。色条只表示色相位置，并非已经通过无障碍检查的界面配色。

选定方案后，再根据各自用途调整明度和饱和度。三角色方案不要求三个按钮都同样鲜艳：一种颜色可作主色，另一种少量强调，第三种用于低调背景。对于同一色系的多个色调，可以先构建明度阶梯，再检查实际组件中相邻档位是否容易区分。

为什么 HSL 不适合构造视觉步长相等的色阶

在 HSL 中，不同色相使用同一个 L 值，并不意味着它们感知到的明度相同。因此，数值对称的配色在视觉上仍可能失衡。OKLCH 允许分别控制明度 L、彩度 C 和色相角 h，便于编辑色阶，但仍不能代替对完整构图的检查。给定坐标下的颜色可能超出设备色域，尤其是在彩度较高时。色彩空间和转换的定义见 CSS Color 4 [9]。

实际步骤可以是：选择基准色相；设定浅色和深色色阶；对超出目标色域的颜色降低彩度；针对相应发布版本转换为 sRGB；最后重新计算成品颜色代码的对比度。不能用 OKLCH 的 L 值代替 WCAG 公式中的相对亮度。

在单页版式中检查调色板

把长段正文、行内链接、带照片的卡片、按钮、错误输入框和小型图表放在同一页。将版式缩放到实际使用尺寸。如果每个元素都需要强调色，问题可能出在信息层级，而非色调不够。去掉部分色块，加强字体层级和留白，然后检查剩余的每个颜色提示：不看图例能否理解？是否与旁边元素的含义冲突？

最终评价不应以投票选出最喜欢的颜色为结尾，而应看用户是否完成任务：找到操作、读懂标签、辨认状态。主观喜好也可以测量，但要单独提问。这样，调色板讨论就能围绕可观察的结果展开。

返回目录 ↑

专题

主题章节 XVI：构图中的色彩——背景、面积与照片

色样为什么会误导

一个 HEX 值描述的是颜色数值，并不描述它所处的环境。深色边框、浅色页面、相邻照片以及色块面积都会改变观看条件。包括 Lotto 与 Purves，2000 [105] 在内的色彩对比研究，考察了颜色外观如何依赖环境。对设计师而言，实际结论很简单：应在完整构图中确认颜色，而不只是查看色样库。

相同的 #808080 灰色方块分别置于 #202020 与 #E6E6E6 背景上。中间连接带也使用相同的 #808080，以便确认填色在数值上完全一致。

先分别看两个中央方块，再看连接它们的色带。它们的填色数值相同，视觉效果却可能不同。这个示例并未测量每位观察者所受影响的程度，而是说明为何把品牌色从浅色名片转移到深色包装上时，需要另行评估。

管理明度层级

把构图分为三个层次：主要内容、辅助内容和背景。主要内容必须与周围形成足够区别，但不一定只能靠色相：尺寸、明度、留白和位置也能起作用。如果标题、价格、按钮和装饰插画同样鲜艳，读者就不得不自己决定从哪里开始看。

灰度预览有助于发现层级是否消失，但不能模拟所有色觉缺陷。此外，不同的去色方法也会产生不同效果。把灰度视图当作诊断草图即可：如果两个层级合并了，再判断是否需要明度差异，还是加上标签、改变形状或拉开距离就够了。

色彩面积比 HEX 数量更重要

即使使用完全相同的三种颜色，两个版式看起来也可能截然不同。大面积的强调色会成为视觉环境，小面积的强调色则成为标记。常见的 60/30/10 比例可当作练习，不应被视为经过科学验证的最佳比例。文章、海报和商品卡片各自需要不同的面积分配。

制作三个版本进行比较：强调色只用于操作按钮；强调色用于标题区块；强调色覆盖大部分背景。观察内容和操作分别先在哪里被注意到。还要考虑高饱和度照片：即使照片不属于正式的品牌色表，它也已占用了视觉注意力。不要用更鲜艳的边框把每个版块都围起来，试图抵消照片的活跃感。

从照片提取调色板：从选色到系统

自动吸管工具能选取像素，但不会为颜色分配角色。照片中占面积最大的颜色，可能只是偶然入镜的墙壁，并非主题。先确定什么物体应支撑项目形象，例如材料、服装或建筑细节；再手动选取几种有代表性的颜色，并分别分配用途。深色可调整后用于文字，浅色可用作表面，小面积的高饱和度颜色可作为强调。

若提取的颜色影响可读性，就不要原样照搬。界面配色应衬托照片，而非逐像素复制照片。对于一组照片，还要测试极端情况：特别浅、特别暗、偏暖或饱和度高的照片。如果其中一种会破坏系统，应准备备用版式模板。

图片上的文字

对比度取决于文字背后那一处背景，而不是整张照片的平均颜色。仅仅一个浅色区域就可能让白字难以辨认。手机端裁切也会改变这些区域的位置。可靠的做法包括：把文字放在纯色表面上；加一块底板；在文字区域叠加可控的暗色层；或为窄屏单独选图。

不要把文字阴影当作通用补救方法。应检查最终组件在所有计划的裁切方式下是否清晰，也要考虑网站编辑人员可能上传不同的图片。如果内容可能在没有设计师参与的情况下更换，就应明确规定安全区域、可用底板方案，并为困难图片自动添加不透明背景。WCAG 2.2 [78]说明了文字易读性要求。

构图验收

同时以放大视图和实际使用尺寸展示方案。海报要从目标观看距离检查阅读效果；界面要检查小标签和密集列表。还要比较相邻页面：某种颜色在单页上效果不错，在连续页面中却可能失去含义。如果新内容无需每次另造一套配色就能完成设计，说明系统具有较好的稳定性。

返回目录 ↑

专题

主题章节 XVII：渐变、透明度与深色主题

渐变是一条路径，不是两个色样

渐变的起始色和终止色并不能说明整个过渡过程。两端之间还要经过色彩空间中的一条路径。对编码后的 sRGB 通道、线性光值或感知坐标进行插值，会产生不同的中间颜色。交付设计时，除了端点颜色，也要说明混合方式。插值机制见 CSS Color 4 [9]。

黑到白的过渡：上方为编码 sRGB 的等步长，下方为线性光的等步长。四舍五入到 8 位后，两条渐变的中间样本分别为 #808080 和 #BCBCBC。

图中显示九个独立色样，而非连续色条，这样更容易对照相同位置。线性光过渡的中点，在该模型把黑色设为零时，等于白光强度的一半，但并不等于主观明度的一半。不要仅凭“正确”这个说法选择混合方式：光的物理叠加与装饰性渐变是不同任务。

检查彩色渐变的哪些问题

检查过渡中是否意外出现灰色或过亮区域、是否产生明显边界、导出后是否丢失色相。沿色相环插值时，可以走较短或较长的路径。经过额外色相会让渐变更鲜明，却也可能改变数据色阶的含义。对于定量图表，装饰性的彩虹色带不能替代顺序色阶。

在目标显示器上以及图片压缩后检查渐变。色带断层可能与位深、编码和设备有关。加入噪点有时能遮掩色阶，但会增加视觉纹理和文件大小；这只是处理手段，并不能恢复已丢失的色阶。渐变上有文字时，要检查文字可能出现的整个区域。

透明度：先计算合成后的颜色

半透明图层没有脱离背景后仍然固定的唯一可见 HEX 值。对于不透明背景以及普通的 source-over 合成，所选混合空间中的最终通道值为：C = α × Clayer + (1 − α) × Cbackground。色彩空间是计算条件的一部分。多个图层要从底层到顶层逐层合成；multiply 和 screen 模式则采用其他规则，见 W3C Compositing and Blending [106]。

用编码 sRGB 通道举例：把 50% 不透明度的黑色盖在白色上，四舍五入后得到 #808080。白字在该背景上的对比度约为 3.95:1，低于普通文字所需的 4.5:1 阈值。黑色不透明度为 60% 时，结果为 #666666，白字对比度约为 5.74:1。这是针对特定模型的计算，不保证适用于所有图像编辑器效果。如果把透明度设在整个容器上，文字也会一起变淡，结果会不同。

深色主题：保留功能，不保留数值

浅色主题中的深色链接，在近白背景上可能清晰可见；同一个链接放到深色背景上则可能消失。因此应保留“链接”这一功能角色，同时调整具体数值。不要自动反转照片或品牌标志；应另外准备适用于深色环境的版本。下表为作者创建的独立不透明 sRGB 配色示例。

角色	浅色主题	深色主题
背景	`#FFFFFF`	`#111827`
正文	`#111827`	`#F9FAFB`
次要文字	`#4B5563`	`#D1D5DB`
带下划线的链接	`#1D4ED8`	`#93C5FD`
卡片表面	`#F3F4F6`	`#1F2937`

文字要在浅色和深色表面上都检查，而不能只看主要背景。背景与卡片之间的小差异或许足以用于装饰性区分，但若它是识别控件所必需的边界，就应另行评估。在深色界面中，还要把鲜亮的强调色放在长文旁边检查：发光色块过多会破坏层级。

检查状态和主题

建立状态矩阵：浅色/深色主题 × 默认/悬停/聚焦/错误/禁用状态。逐一检查背景、文字、图标和边框。随后开启强制用户颜色模式，因为浏览器可能替换网页指定的填充色。除非有充分理由，否则不要为了保留装饰效果而禁用这项适配。相关行为见 CSS Color Adjustment [97]。

最终应在实际运行的界面中检查。设计截图无法显示键盘焦点、文字换行、用户缩放或更换照片的效果。数值化的对比度检查必不可少，但不是唯一的验收结果。

返回目录 ↑

专题

主题章节 XVIII：生产环节中的色彩——从确认到印刷

随版式文件一并交付什么

一份封面漂亮的文件，并不能说明最终印在纸上应该是什么样。应提供使用媒介、尺寸、材料、印刷方式、双方确认的配置文件、专色信息和已批准样品。还要指出哪些元素对颜色匹配尤其重要，例如标志、中性背景或产品本色。导出前应确定转换顺序和责任人。

不要习惯性地给所有项目使用同一个 ΔE 允差。允差取决于计算方法、测量条件、材料和生产约定。如果采用数值允差，应注明色差公式及样品比较时的条件。没有光照条件说明的视觉样品同样不完整：换一盏灯，颜色匹配结果可能就会不同。

指定配置文件还是转换

指定配置文件会改变现有数值的解释方式；转换则会根据所选算法，为目标色彩空间重新计算数值。这是两种不同操作。如果照片显示异常，应先确认它原有的配置文件，而不是不断更换配置文件直到看起来顺眼。相关基本原理由国际色彩联盟 ICC [95]介绍。

保留带有原始配置文件的源文件，并另存生产用导出文件。这样，改用其他材料时可以重新执行转换，不必把已经受限的 CMYK 文件再用作新的母版。避免在设计师、排版人员和印刷厂之间未经约定反复转换文件。

黑色小字与大面积黑色底

黑色小字和大面积深色底是不同的生产任务。单色黑能减少小字号文字因多色套印而产生偏差的风险。大面积色块使用复合黑可能有不同效果，但配方取决于印刷工艺和总墨量限制。不能根据屏幕上的 HEX 值给出适用于所有场景的“浓黑”配方。

在 InDesign 中，默认值为 100% 的 [Black] 色板可能采用叠印；这一设置并不意味着所有看起来是黑色的对象都会自动叠印。Adobe 单独说明了黑色叠印设置的作用范围 [107]。尤其是导入图像时，应逐项检查对象和文档设置。

挖空与叠印

挖空通常会清除上层对象下方的底层油墨；叠印则保留底层油墨，因此最终效果取决于对象下方的内容。这是印刷工艺行为，不等于屏幕上的透明度。叠印设置错误可能改变颜色，甚至让浅色对象消失。应查看叠印预览和分色预览，而不能只看页面的普通视图。

深色背景上的白字尤其需要考虑字号、字重和工艺限制。显示器上看起来清晰的细线，在印刷中可能无法可靠复现。应与印刷厂商定最小字号和线条粗细。不要在确认后再随意加粗所有文字来补救技术问题，而应提前准备印刷版本。

打样与确认

软打样有助于预览指定配置文件下预期的颜色变化，但屏幕无法呈现纸张纹理、光泽、压凸工艺以及反射光的所有特性。对关键颜色，应在双方约定的条件下制作实体样。比较时，把打样、标准色样和成品中会与之相邻的材料放在一起。不要只凭即时通信软件里的一张照片验收包装。

确认样品时，不要只写“稍微暖一点”这类含糊意见；应指出具体元素和希望的变化。保留签字确认的样品及版本参数。如果确认后纸张、覆膜或印刷方式发生变化，先前的打样并不能自动证明新结果合格。

交付前检查表

检查项	检查原因
配置文件和文件用途	避免数值解释错误
印刷油墨清单	找出意外增加的色版
分色与叠印	查看对象之间的影响
小字与细线	检查细节能否复现
转换后的图像	检查阴影、中性色和关键色
实体打样及观看条件	让确认结果可复现

色彩记录把设计与生产连接起来：包含屏幕版本、印刷条件、实体样品和允许的变化范围。相比之下，只列 RGB/CMYK 数值，却不说明数值来源和适用工艺的表格，实用性较低。

返回目录 ↑

专题

主题章节 XIX：界面分析——操作、选择与错误

任务：预约咨询

看一个作者制作的教学界面示例：页面包括服务说明、时间选择、电子邮箱输入框和“预约”按钮。用户需要区分已选时间和可选时间，找到邮箱错误提示，并理解哪个操作会完成预约。配色应围绕这些区别来建立，而不是给五种色调各贴一个情绪标签。

使用白色 #FFFFFF 作为中性基底，正文用 #111827。主要操作使用蓝色 #1D4ED8。已选时间使用浅蓝底 #EFF6FF、蓝色边框和“已选择”文字。错误提示使用红色 #B42318，并配上“请检查电子邮箱地址”的文字。在这个具体系统中，蓝色和红色表示不同用途，并不代表已经测得的心理效应。

教学示例中的按钮状态：默认、悬停、按下和键盘聚焦。白色标签保持不变；聚焦状态用带白色间隙的深色外框标示。

状态不是随意挑选的近似色

状态	按钮背景	标签	标签对比度
默认	`#1D4ED8`	`#FFFFFF`	6.70:1
悬停	`#1E40AF`	`#FFFFFF`	8.72:1
按下	`#1E3A8A`	`#FFFFFF`	10.36:1

上述数值针对不透明的 sRGB 配色计算；判断阈值时使用未四舍五入的数值。这三种按钮状态使用白字和各自的背景色即可。但已选择、错误和聚焦状态还必须通过形状或文字区分，因为它们传达了默认状态中没有的信息。

不能仅因为按钮有默认和悬停两种状态，就要求这两种背景色之间的对比度达到 3:1。WCAG 1.4.11 [98]针对的是理解所需的重要视觉信息及相邻颜色，并非所有连续出现的填充色变化。应检查每种状态下控件本身和关键信息是否可见。

聚焦、选择和错误可能同时发生

用户选好时间后，用键盘焦点移到该选项上。如果“已选择”和“聚焦”都用同一个蓝色边框，就会混为一体。应分别标示：选择状态用“已选择”标签和内部标记；聚焦状态用带间隙的外框。同样，用户返回修改邮箱时，错误字段也必须继续显示明显焦点。

在教学示例中，深色 #111827 外框与蓝色按钮之间留有白色间隙。它适用于白色表面，深色主题需要另一组颜色。容器不能裁掉这段间隙。还要检查固定定位面板是否会挡住外框。更严格的 WCAG 2.4.13“焦点外观”标准 [108]属于 AAA 级，不能说成 AA 级的必需标准。

禁用状态不应隐藏原因

没有解释的灰色按钮会迫使用户猜测还缺少什么。此教学示例可以在禁用的操作旁提示“请选择咨询时间”。有时，让按钮保持可用，并在用户尝试后明确说明哪些字段未填写，会更清楚。选择应取决于具体流程，而不能套用“灰色代表禁用”的通用规则。

加载状态也需要单独设计。“正在预约……”和进度提示，比按钮突然变淡更清晰。操作结束后，把提示改为“预约成功”，并显示日期。在实际界面中，这些变化不能只通过视觉呈现；颜色稿无法替代语义化控件和辅助通知。

交付给开发人员的内容

交付状态矩阵、允许使用的背景、文字和填充色组合、焦点外框尺寸、错误提示文案及加载行为。令牌名称应反映功能，例如 action-bg、action-bg-hover、focus-ring、error-text。如果语义令牌需要在其他主题下改变色调，就不要把它命名为 blue-700。

验收时进行四项操作：用鼠标完成表单；用键盘完成表单；故意输入错误邮箱；在网络较慢时提交。每次都问：哪个线索表示当前状态？不辨别颜色时是否仍然明白？这才是在检查完整交互流程，而非漂亮的色卡表。

返回目录 ↑

专题

主题章节 XX：工作坊——报告与仪表板中的色彩

一张图表，一个核心问题

在选择色阶之前，先补完这句话：“读者应该看出……”。例如：哪个渠道带来的咨询更多；哪个指标低于计划；每日工作量如何变化。不同任务需要不同的视觉编码。如果颜色同时代表渠道、数值大小和结果质量，图例就会变得含糊。

在一份教学用报告中，三个渠道分别带来 42、28 和 18 条咨询。用条形长度和数值标签就足以比较数量，不一定需要三种色相。如果报告讨论渠道 B，就让另外两根条保持中性色，只用一种强调色突出 B。这属于编辑性强调，用来标出叙述主题，并非额外的数值变量。

同一组教学数据：三个渠道分别有 42、28 和 18 条咨询。左侧每个渠道使用不同颜色；右侧仅用一种强调色标出渠道 B。两种图中的条形长度相同。

要明确说明突出显示的是什么。“我们来分析渠道 B”的标签可以避免读者误以为“蓝色代表表现最好”。如果讨论的是最大值，就突出最大值；如果展示的是与计划的差异，就标出计划基准。颜色不应悄悄替代数据所要回答的问题。

根据数值含义选择色阶

有序数值适合用顺序色阶。相对于有意义中心的偏差适合用发散色阶。没有等级关系的分类适合用定性色阶。ColorBrewer [87]也采用这种区分。先判断变量类型，再选择具体配色。

任务	配色方法	要避免的错误
0–100% 的工作量	带图例的顺序色阶	“无数据”看起来像工作量为零
与计划值的偏差	以零为中心、向两侧发散	只为追求对称而选择中心点
产品类别	颜色易分辨并加文字标签	较深颜色意外暗示了等级
讨论某个渠道	一种强调色，其余用中性色	读者把强调色误认为另一项指标

零值、缺失和不适用

零是测得的数值。缺失意味着没有数值。“不适用”表示该对象没有定义这个指标。如果三种情况都涂成白色，读者便无法判断具体含义。应用标签区分它们：“0”、“无数据”、“不适用”；必要时还可用纹理线或符号，并在图例中解释。

热力图中的缺失单元可以用中性色，但中性色不能与发散色阶中有意义的中心值相同。打印后，缺失数据的纹理仍须看得出来。在交互式报告中，悬停提示可以提供信息，但不能成为了解空白单元原因的唯一方式。

多张图表之间的可比性

如果把一月和二月的图并列，且任务是比较绝对数值，同一种颜色就应表示相同的数值范围。若每张地图都自动拉伸到各自的最小值和最大值，一个表现较弱的月份和一个表现较强的月份看起来可能相近。如确有必要在每个月内部单独归一化，应明确说明：此时比较的是内部变化模式，而非绝对水平。

连续幻灯片中的类别与颜色应保持对应。如果产品 A 在前一页是蓝色，就不要在重排图例后把它改成橙色。类别色彩字典应独立于数据顺序保存。还要预先确定新增类别的处理方式：增加一种颜色、合并为“其他”，或改用另一种图表类型。不断扩充调色板并不能解决报告过于拥挤的问题。

线条、地图与小元素

细线要按最终尺寸仔细检查。可在线条末端直接标注，必要时使用不同虚线样式或标记符号。地图上相邻区域即使在大图例中颜色清楚，彼此仍可能混在一起。应检查区域边界、小岛区域以及覆盖在色块上的文字。

颜色无法修正错误的几何表达：比较条形时应使用诚实的比例尺；地图中面积很大的地区也可能在视觉上压过小地区，无论人口多少。如果任务是比较精确数值，表格或点图有时比醒目的填色地图更有用。先选择正确的呈现形式，再用颜色修饰。

报告验收

请读者找出最大值、判断偏差方向、指出缺失数据并比较两个时段。将任务错误与审美评分分别记录。如果场景包括 PDF、印刷品或投影展示，也要分别检查导出和呈现效果。即使色调比预期更难区分，图例、数值标签和单位仍应清楚可见。

返回目录 ↑

专题

主题章节 XXI：包装与品牌识别——产品系列中的色彩

区分品牌、产品版本与状态

在系列包装中，颜色至少承担三项任务：把产品归为同一品牌、区分不同版本、突出特别信息。如果同一种强调色同时表示口味、折扣和新品，系统很快就会变得难懂。设计前先列出包装系列中必须保持一致的元素，以及随产品变化的元素。

以作者虚构的茶品为例，系列包含“散叶茶”“佛手柑”和“草本”三个版本。统一的浅色底和深色字体将它们联系起来；彩色条带用于区分，文字名称则直接说明内容。这只是教学用的虚拟品牌：所选颜色不是科学的口味公式，也不能取代配料信息。

教学用包装系列：共用 #F6F4EE 底色、#1D2528 文字和统一的元素布局。#2F5D50、#5B4B80 与 #9B4B23 三种色带区分带标签的产品版本。

不能只靠色带传递信息

产品版本名称应固定放在稳定的位置，并确保缩小成商品缩略图时仍然可读。如果顾客只能靠绿色和棕色色带区分包装，那么在光线昏暗、颜色还原不佳或顾客有色觉差异时，就可能发生错误。应同时用名称、原料插图或其他独立线索重复说明差异。原料图片仍须符合实际产品和标签法规。

在教学示例中，所有选择产品所需的文字都放在共用浅色底上。因此更换色带时，不必重新挑选小字号文字的颜色。如果把文字移到色带上，就要单独检查这组配色。稳定的系列架构节省的是决策工作，而不仅仅是油墨。

要与竞争对手区分，还是符合品类惯例？

这不是非此即彼的选择。有些特征帮助人们识别品类，另一些特征帮助他们找到特定品牌。先按相同尺度拍摄或整理真实货架环境，分别记录大色块、名称结构、材料和包装形状，再决定在哪个层面做区分：主背景、色带、图形还是字体。

不要事后用“绿色包装都会让人信任”来解释设计。更准确的理由可以是：在这个货架环境中，该色带与相邻包装不同；统一表面把产品系列联系起来；商品缩略图中的名称清晰可读。这些都是需要在设计稿上检验的假设。Krishna，2012 年的感官营销综述 [82]讨论的是多种感官之间的相互作用，而非单一的色彩代码。

扩展产品系列

在确认前，先用八个假设版本测试系统，而不只看三个。这个练习可以发现还能否继续增加清晰可辨的颜色。但这不代表一定要发布八种色调：或许应该把系列分组、加入插图或修改版式。若几个色调只略有不同，不要指望顾客能逐一记住。

季节限定版仍应保留可识别的基础元素。提前规定可更改的部分，例如色带、插图或小徽章。不要让促销活动在现有配色之外再引入第四套独立系统。在网店中应一次检查整个商品目录：单张产品卡片各自看起来不错，放在一起却可能破坏系列感。

材料也是调色板的一部分

白色铜版纸、原色未漂白纸板和透明薄膜并不是相同的背景。透明包装中，商品本身的颜色也会进入构图。金属箔则会随着光线方向改变外观。因此，屏幕上的平面色块只描述设计意图；生产打样应使用实际材料、表面处理和印刷方式。

应在计划的照明下比较组装后的包装。单张平面印刷样无法显示色带如何跨越折痕，也无法说明货架上哪一面朝向顾客。电商还需要经过核验的产品摄影流程：不要为了吸引眼球随意提高商品照片的饱和度。

检验包装系列的三项任务

首先请用户从一组产品中找出该品牌；然后请他们在品牌内选出需要的版本；最后让他们仅根据较小的商品缩略图再次选择。这是三种不同任务，第一项成功并不保证其余两项也成功。记录用户依靠的是名称、位置、颜色、插图还是记住的形状。这样便能判断扩展产品系列时哪些系统元素确实值得保留。

返回目录 ↑

专题

主题章节 XXII：如何解释色彩并作出设计决策

展示解决方案，而非情绪

展示五个色块，会把解释工作留给客户；客户只能自行想象调色板最终会如何应用到网站或包装上。每个设计方向都应展示相同的应用场景：首屏、长篇文字、带照片的卡片、小型标志和印刷品。这样大家比较的是设计决策带来的实际影响，而不只是喜欢哪种色调。

演示一开始就回到项目任务，例如：把专业产品系列与基础系列区分开；保持品牌识别度；让不同商品版本易于辨认。逐一说明每个方向中的哪些元素满足这些要求。“蓝色代表可靠”并不足以解释为什么选择了这一种蓝色、采用这样的面积，并将其放在这种字体旁边。

三个层面的论据

**可测量：**具体配色的对比度、颜色角色的数量、令牌含义是否一致、能否找到指定元素。**可观察：**与竞争品牌环境的区分度、品牌线索是否反复出现、在不同媒介上的稳定性。**可解释：**克制、科技感或温暖感。三类论据都有用，但不能把第三类说成物理定律。

可以这样解释方案：“深色强调元素在浅色表面上突出主要操作；我们在导航中重复使用它；这种搭配支持我们希望体现的克制风格。”这样分别说清楚了功能、系统和审美意图。如果客户不同意最后一点，就无需否定已经测得的对比度，也不必推翻整个结构。

减少无关变量，再比较方案

如果讨论的是颜色，就让各方案使用相同的文字、尺寸和照片。如果整体构图也不同，就应称之为设计方向比较。对不同参与者调整展示顺序，避免第一个方案总是因为新鲜感或熟悉效应占优势。不要一开始就问“哪个好”，先提出一项具体任务。

对预约页面，让用户找出按钮并辨认已选择的时间；对包装，让用户找到某一产品版本；对图表，让用户比较数值。完成任务后，再询问审美印象及选择原因。这样可以发现：用户虽然偏好某个方案，却可能用另一个方案更好地完成任务。

如何解读小规模测试

几次访谈可以发现难懂的标签并帮助提出假设，却不能推断整个用户群的偏好比例。如果五人中有三人选了 A 方案，这不足以让人承诺“60% 的顾客会选择它”。定量比较需要事先确定主要指标、招募方案和分析标准。不能一出现预期结果就停止收集反馈。

要区分购买意愿和实际购买、记住颜色和识别品牌、首次点击速度和成功完成任务。声称转化率提高，不能只依据参与者说“看起来更有吸引力”。Elliot，2015 [61]讨论了色彩研究中的一般方法学局限。

决策记录卡

字段	示例记录
任务	让主要操作更醒目
决策	主按钮使用一种强调色背景
色值	`#1D4ED8` 搭配白色文字
依据	对比度计算和任务测试
使用范围	浅色、不透明表面
下一步检查	深色主题和含照片的页面

将记录卡保存在设计系统中。这样下一位设计师知道的不只是“用了什么值”，还有“为何在这里使用”。任务变化后，可以重新评估决策，而不用陷入个人偏好之争。成书或品牌指南只需给读者最终规则和示例；内部确认流程留在项目文档中。

什么样的色彩系统才算完整

它应能应对新文字、新照片、长标题、错误提示、深色主题以及预定的印刷方式。它有明确的例外规则，不会不断冒出任意色调。最重要的是，设计师能够解释每种颜色承担什么工作，以及移除它会造成什么变化。这个问题通常比寻找另一套漂亮调色板更有用。

返回目录 ↑

专题

主题章节 XXIII：色彩与字体——保持个性的同时确保可读

先建立文字层级

色彩不必承担所有文字层级的区分。标题可以靠字号和字重区分，说明文字可以靠位置，链接则可以加下划线。如果每个层级都用一种新颜色，页面会显得杂乱，也更难维护。先选一种清晰易读的正文色，通过字体样式建立层级，再添加必要的颜色角色。

教学文章可以使用正文色 #111827、次要文字 #4B5563、链接色 #1D4ED8 和白色背景。次要文字仍然是需要阅读的信息：“次要”不等于“几乎看不见”。价格、送达时间、坐标轴标签和优惠条件，即使字号小，也不是装饰元素。

浅灰文字：问题与改进

白底说明文字的对比度比较。左侧为 #9CA3AF，对比度 2.54:1；右侧为 #4B5563，对比度 7.56:1。两侧字号相同，只改变了颜色。

在此示例中，原来的灰色较低调，却没有达到普通文字 4.5:1 的对比度阈值。改进方法是把说明文字调深，同时保留它的较小字号和从属位置。构图仍然维持了层级关系。此计算仅适用于白底上的不透明 sRGB 颜色，并不适用于所有同样名为“说明文字”的样式。

根据 WCAG 2.2 成功标准 1.4.3 [78]，普通文字的对比度至少为 4.5:1，大号文字为 3:1，另有规定的例外。大号文字指至少 18 磅，或粗体至少 14 磅；换算为 CSS 单位，约为 24 像素和 18.67 像素。仅仅把样式命名为“标题”，并不意味着可以使用较低阈值。

细字重与小字号

对比度数值无法概括可读性的所有方面。经过抗锯齿处理后，细笔画可能比同色的大面积色块显得更弱。不要只靠加深颜色来补救过细过小的文字；还要在手机和桌面屏幕上检查字号、字重及字体渲染。密集界面应先删除非必需标签并重新安排空间。为了“留白感”缩小字号、淡化文字，往往只会掩盖内容过载。

段落中的彩色链接

链接既要融入文字，也要能被识别为跳转入口。下划线是可靠线索；还应设计聚焦态和已访问态。要在白色页面、引文、提示面板和深色主题中分别检查链接。在长段文字里，饱和的链接色容易分散注意力，因此不要把所有关键词都染成品牌色。

强调色标题与长文阅读

在两个词上表现醒目的颜色，不一定适合正文。应实际阅读一段较长的彩色文字来检查效果。字形中的渐变要逐处检查，并兼顾响应式版本：渐变的浅色部分可能落在细笔画上。如果信息比装饰效果更重要，就把渐变移到装饰区域，正文保留纯色。

彩色背景上的白字

并非每一种高饱和度颜色都足够深，能承托白字。黄色按钮可能很醒目，但白色文字仍不易读。可改用深色文字、加深填充色，或把强调色放在别处。按钮底色和文字必须成对选择。

症状	优先调整什么	调整后检查什么
说明文字几乎看不见	颜色与字重	实际背景上的对比度
所有文字看起来同等重要	字号、间距、强调色数量	阅读顺序
链接不容易找到	下划线和统一样式	不悬停时能否发现链接
白字不清晰	文字与填充色的组合	所有状态和表面
长文阅读疲劳	字号、行长、行距、对比度	在实际设备上阅读

发布前检查

取最长的说明文字、一个短标题、一段含链接的正文、一条错误提示和一个按钮标签。检查缩放、换行及主题切换时的呈现。如果颜色消失，层级是否仍然清晰？如果颜色保留，它是否传达了矛盾含义？色彩与字体搭配得当，应帮助人们阅读和操作，而不只是装饰页面。

返回目录 ↑

专题

主题章节 XXIV：真实版式中的色彩心理学

不只是一个颜色，而是多个变量

设计心理学简报里常会写“需要一种平静的蓝色”。这只是起点。若要作出精确的设计决策，还应说明色相、明度、饱和度、面积、邻近颜色、材料和观看情境。同一种蓝色，可以是白页上的小标记、应用程序的主背景，也可以是暗室里的商品照明。还要明确设计师关心的结果：观感、识别率、找到某个元素，还是完成某项操作。

Jonauskaitė 与 Mohr，2025 年的系统综述 [62]纳入 132 篇实证论文、42,266 名参与者和来自 64 个国家的数据。作者发现，颜色类别与情绪之间存在稳定的对应规律，但多数对应关系是“多对多”。明度、饱和度和色相都会影响结果。这说明我们应该更准确地询问调色板的作用，而不是把一种情绪固定地归给某种色调。

设计主张的三个层次

表述	检验内容	问题示例
联想	人们会用哪些词描述画面	“你觉得这项服务给人什么印象？”
即时体验	看完之后，人们如何描述自己的状态	“紧张感有变化吗？”
行为	人们在具体任务中做了什么	“用户找到正确的按钮了吗？”

参与者称某种设计“平静”，并不能证明它降低了生理唤醒度或提高了销量。如果鲜艳的按钮获得更多点击，原因可能是对比度、面积或位置。Elliot，2015 年的综述 [61]讨论了研究方法的局限；本章则把这些限制转化为提出设计主张时的实用框架。

明度、饱和度和色相回答不同问题

为同一张卡片设计两种配色。如果色相、明度和饱和度同时改变，就无法判断哪个因素影响了观感。教学测试可以准备三组对比：第一组主要改变色相，第二组改变明度，第三组改变饱和度。保持文字、字体、尺寸、照片和元素位置不变。结果只适用于所选刺激和目标人群，不代表普遍的“蓝色心理学”。

即使没有实验室，这种做法也很有用。如果强调色过于饱和、显得“刺眼”，设计师可以缩小使用面积或降低饱和度，而不改变品牌色相。如果标签不够醒目，应先检查尺寸和明度对比。情绪解释很重要，但不应与简单的元素辨认能力混为一谈。

情境会改变颜色线索的含义

浆果标签上的红色、错误提示中的红色和紧急操作按钮上的红色，处在不同的语义环境中。形状、文字和使用情境都有助于用户识别功能。Elliot 与 Maier，2014 [109]以及 Elliot，2015 [61]讨论的“情境中的色彩”理论，主张将应用领域和学得的关联纳入考虑。这并不是一张能预测所有用户行为的表格。

还必须评估证据强度。早期有关红色影响智力任务表现的报告，并未成为通用设计指令的可靠依据。Gnambs，2020 年的元分析 [66]认为相关证据有限。因此，错误提示色应根据清晰度与无障碍需求来选，而不应依赖“能提高或降低测试成绩”的承诺。

为什么有人喜欢某套配色

颜色偏好可能与人们联想到的物体和经历有关。Palmer 与 Schloss，2010 [65]用具体色样及其相关物体的评价检验了一种生态偏好理论。这项研究并不表示所有人都同样喜欢海洋的颜色。对于品牌，关键问题是目标受众如今会把哪些物体和情境与该设计联系起来。答案会因商品类别和文化而异。

例如，家具项目中的灰绿色可能使人联想到木材和天然材料；在金融应用程序中，同一色调却会与数字、图表和收益信息并列。要验证识别度或信任感，应使用真实产品版式。单独的绿色方块无法再现这些条件。

项目中的小型研究

假设设计团队正在为医生预约服务选择颜色角色。先明确问题：“不提供提示时，用户能区分已确认的预约和等待回复的预约吗？”展示两个版本，保持文字和位置一致，只改变状态颜色。请参与者指出当前状态和下一步操作，再单独询问他们对设计外观的感受。

记录理解错误、查找时间和评论。如果状态只能靠色相区分，就加入“预约已确认”和“等待回复”等文字。如果某个版本更受喜欢，却更容易造成误解，就应把两类结果分开讨论。医疗界面的最终测试还需在真实条件下进行，并征询相关领域专家意见；此处的教学示例不是临床研究。

品牌规范中的表述方式

不要写“蓝色能带来信任”，可以改写为：“蓝色是主要识别色；在已测试的版式中，它能将主要操作与中性元素区分开。整体视觉印象会在目标用户中另行评估。”这种写法说明了系统如何使用，也标明目前掌握的证据。未测量的心理效应不会因为写进规范就变成 HEX 代码的固有属性。

返回目录 ↑

专题

主题章节 XXV：色彩模型——如何按任务选择

坐标并不等于最终观感

不同色彩模型有不同用途。有些用于保存特定设备的数值，有些便于编辑色调、描述测得的色差，或预测特定条件下的颜色外观。设计师需要了解每种模型适合回答什么问题，以及哪些问题仍需单独检查。

表示方式	适合的任务	还需检查什么
HEX / sRGB	传递不透明的屏幕颜色	背景、对比度、配置文件和实际显示器
HSL / HSV	在 RGB 界面中快速选色相	感知明度与对比度
CIELAB / LCh	测量、讨论色差并关联印刷打样	白点、ΔE 方法及测量条件
OKLab / OKLCH	建立色阶、渐变和调整色相与彩度	sRGB 色域及最终数值的对比度
CAM16 / CIECAM16	在指定观看条件下预测颜色外观相关量	观看参数和实现是否准确
HCT	在 Material 系统中构建色调配色	实际输出 RGB 值及文字/背景组合

该表是色彩模型的实用导航，并非“最佳模型”排行榜。第 18–19 章介绍 CIELAB 和 LCh，第 28 章介绍 HSL 和 HSV，第 29 章介绍 sRGB。本章说明这些表示方式如何纳入同一工作流程。

HSL：相同的 L 不代表相同的对比度

黄色 #FFFF00 和蓝色 #0000FF 的 HSL L 均为 50%。黑字对比度分别为 19.56:1 和 2.44:1；白字对比度分别为 1.07:1 和 8.59:1。

两个色样的 HSL 明度同为 50%，但视觉效果和文字对比表现截然不同。不能只靠 HSL 的 L 滑块建立无障碍色阶；必须计算最终输出颜色。图中数值采用 WCAG 2.2 [78] 的相对亮度公式，适用于不透明的 sRGB 颜色组合。判断是否达到阈值时，应使用未四舍五入的数值。

OKLCH：建立色阶的实用控制项

在 OKLCH 中，坐标分别描述明度 L、彩度 C 和色相角 h。这一空间旨在更均匀地处理图像与渐变；其设计初衷及限制见 Björn Ottosson 的说明 [110]。CSS Color 4 [9]规定了 oklab()、oklch()、插值和色域映射。它是实用工具，但 L 值等距并不保证整个构图看起来完全均匀。

新界面的教学流程：先选择中心色相；建立数个 L 值阶梯；如果最浅色或最深色超出 sRGB，就降低其 C 值；记录最终 HEX 值；在所有实际表面上检查文字。降低 C 可能改变可见色相和表现力，因此要把最终色阶放入真实组件中查看。

一个重要细节：oklch(70% 0.25 250)定义的是坐标，并不保证会得到某个特定的 sRGB 代码。不能简单把超出范围的通道截断到 0 或 255，就说结果仍是同一个点。色域映射方式会影响颜色；CSS 规范对相关算法有说明。品牌色规范应同时记录源坐标和批准的屏幕版本。

CIELAB 与色样测量

印刷厂和客户比较实体色样时，只写 Lab 数值而不注明观察与测量条件是不完整的。应记录坐标的配置文件或获得方法、白点、照明、测量几何条件及色差公式。即使 ΔE 数值精确，也不能单独判断特定材料和品牌是否能接受该差异。应另行制作屏幕输出值；Lab 数值不能直接复制为 RGB。

LCh 是 Lab 的柱面表示方式。同一表面在 CIELCh 中的色相角，与在 OKLCH 中的数值不一定相同。只改列名称而不做转换，就会改变调色板。HCT 也一样：它的色相和彩度来自自身模型，不能把 OKLCH 数值机械地填入 HCT。

颜色外观模型与观看条件

普通 HEX 值不包含环境亮度、适应状态和白点等信息。CIE 248:2022 [111]将 CIECAM16 描述为一种考虑观看条件、预测颜色外观相关量的模型，可用于管理照片印刷品和自发光显示器的颜色。这是需要环境参数的专业计算方法，并不是一套新的装饰 HEX 色值。

Material Color Utilities [112]采用 HCT：色相和彩度来自 CAM16，色调坐标以 L* 为基础。由于设备色域有限，最终实现的颜色彩度可能低于设计者要求。这种方法有助于生成协调的色调变体，但最终配色仍须在实际界面中检查。

项目中如何快速选择

网站发布时，应提供已验证的 sRGB HEX 值；如有需要，也可以单独提供广色域数值。用 OKLCH 建立色阶，但要以实际输出颜色作为最终方案。制作印刷标准时，采用配置文件、测量和打样。若要在复杂观看条件之间准确匹配外观，应咨询色彩管理专家并采用颜色外观模型。滑块上的模型名称不能替代真实用户任务测试。

返回目录 ↑

专题

主题章节 XXVI：三个容易高估色彩作用的设计决策

1. 按钮很醒目，却不易理解

设计师提高了按钮的饱和度，但用户仍然没有完成预约。原因可能是操作文案、字段顺序、按钮位置或下一步不明确。先确认用户能否说清点击后会发生什么，再在文案和位置相同的情况下比较不同颜色。

案例：浅色页面上并排放着“了解详情”和“预约”两个按钮。与其让两个按钮都使用同样鲜艳的填充色，不如把其中一个设为主要操作，对次要操作采用更柔和的样式。调整后，检查错误跳转的频率是否改变。所得结论只适用于这个界面的层级安排，不能据此宣称所选蓝色在其他情境中也“能提高转化率”。

2. 增加商品后，配色系列难以区分

三个商品版本尚能凭色调区分，增加到八个后却变得相似。先明确用户最需要迅速识别的是什么：品牌、产品组，还是具体版本。建立不同层级：统一的品牌构图、产品组标记以及清晰可读的版本名称。颜色只是识别线索之一。

在网店商品卡片的实际尺寸下、货架陈列状态下以及真实材料上测试整组包装。如果区别只靠细微的色相变化，标签和形状就要承担更多识别工作。Schloss 与 Palmer，2011 年关于配色偏好的研究 [75]发现，人们的评价会受到图形色与背景色位置关系的影响；单独色块不能代表完整包装的效果。

3. 漂亮的色阶造成了虚假的差异

一份报告中，两个相近数值恰好落在彩虹色带的鲜明边界两侧。数字只略有差别，读者却看到了明显变化。应回到图表要回答的核心问题：显示顺序、偏差方向，还是类别？表示有序数值时，使用明度变化受控且带有标签的顺序色阶；表示相对于有意义零值的偏差时，使用发散色阶。

如果展示的是不同类别，不要在没有说明的情况下只用一条明度阶梯上的深浅变化来区分，否则会暗示并不存在的等级关系。Crameri、Shephard 与 Heron，2020 [86]介绍了变化不均匀及无障碍不足的色阶如何扭曲科学信息。商业报告也应遵守同一原则：读者要看懂数值之间的关系，而不是跟随装饰性的颜色过渡。

设计师决策卡

问题	记录内容
用户应理解或完成什么？	具体任务及正确结果
颜色承担什么作用？	识别、排序、强调、状态或背景
还有什么能传达含义？	文字、形状、位置和标签
方案会在哪些环境中使用？	设备、材料、照明和尺寸
如何判断成功？	分别记录理解度、错误、速度和偏好

应在挑选漂亮色调之前填写这张卡。如果还不清楚颜色要回答什么问题，再加一种颜色通常没有帮助。确认方案后，记录确切的颜色组合和使用条件，而不只是罗列 HEX 值。这样，下一位设计师或新的使用媒介也能沿用系统。

返回目录 ↑

专题

主题章节 XXVII：修复图谱——八个修改前后的设计决策

只有把颜色变化与具体任务联系起来，调整才有意义。以下八个教学案例说明该如何决策、要检查哪组 HEX 配色，以及不能仅凭一张图片得出什么结论。这些不是用户实验结果，也不是适用于所有项目的现成调色板。对比度数据针对所列的不透明 sRGB 配色组合，并四舍五入到小数点后两位；WCAG 2.2 文字标准 [78]还规定了相关例外情况。

1. 几乎看不见的小字说明

**修改前：**次要文字用 #9CA3AF，置于 #FFFFFF 背景上，看起来精致但对比度只有 2.54:1。**修改后：**改为 #4B5563，背景不变，对比度提升至 7.56:1，同时仍保持较低的视觉层级。WCAG AA 对普通文字的参考值为 4.5:1，大号文字为 3:1。即使对比度很高，也不能单凭该数值断定易读性；还要检查字号、字体、行长和实际显示尺寸。

2. 白字黄底按钮

**修改前：**白色 #FFFFFF 文字置于黄色 #F4C430 上，对比度为 1.64:1。**修改后：**只把文字改为深色 #111827，黄色不变，对比度为 10.80:1。需分别检查默认、悬停、按下和禁用状态；一种状态的对比度不能代表整个组件。

3. 只用红色标出表单错误

**修改前：**字段只有 #B42318 红色边框，没有其他提示，用户必须猜出错误原因。**修改后：**红色仍作辅助提示，并加入 ! 符号及“错误：请输入地址”信息。将说明放在相关字段旁边，并在代码中与字段建立关联。WCAG“使用颜色”要求 [60]强调信息表达方式，并不禁止使用红色。

4. 两条曲线只靠色相区分

**修改前：**曲线 #B42318 与 #067647 只靠颜色区分。**修改后：**在线条旁直接标注“销售”和“退货”，使用不同的标记或线型，并保留清晰的图例。用户不应必须分清红色和绿色才能读图。颜色可以提高阅读速度，但即使不依赖颜色，信息也要能被获取。线条色和文字色应分别对照图表背景检查。

5. 随意把白色标题放在照片上

**修改前：**白字放在 #808080 区域上，对比度为 3.95:1；换一张图后，文字背后的区域可能更亮。**修改后：**把文字放到不透明的深色底板 #202020 上，与白字的对比度为 16.29:1。如需使用半透明渐变，应在每个检查点计算合成后的背景色，而不能只根据叠加层原始 HEX 计算对比度。在动态图片库中，还须检查不同图片和裁切效果。

6. 把深色主题当成简单反色

**修改前：**次要文字 #6B7280 放在 #111827 上，对比度为 3.67:1。**修改后：**改用 #D1D5DB，同一背景下对比度为 12.04:1。深色主题中的颜色角色和状态应重新设计：相同的强调色、阴影、边框和禁用控件可能呈现不同效果。不要把浅色主题的所有色值机械地反转。

7. 产品系列只靠色调区分版本

**修改前：**版式完全相同，只有色块颜色不同；缩略图或货架上很难可靠识别版本。**修改后：**保留系列颜色，同时在正面醒目标出版本名称，必要时增加不同形状或标记位置。先以网店商品卡片的尺寸检查，再从货架观看距离检查。应测试版本识别，而非询问“哪套配色更漂亮”。

8. 只凭屏幕 HEX 确认印刷

**修改前：**客户在未校准显示器上确认了 #A65F3F，随后期待它在哑光纸上完全相同。**修改后：**规范中写明目标承印材料、印刷配置文件、照明类型、可接受偏差和已批准的打样。HEX 只是屏幕参考，不能保证实体表面完全相同。ICC 对基于配置文件的工作流程作了说明 [41]，但印刷批次的质量仍取决于生产条件和双方商定的检验标准。

如何使用这份图谱

为每项决策记录：任务 → 信息 → 颜色角色 → 确切的颜色组合和媒介 → 检查。对比度计算有助于判断可读性，但不能测量品牌识别、说明清晰度或印刷还原度。如果文字、位置和颜色同时改变，就不能把整体效果都归因于颜色。

返回目录 ↑

专题

主题章节 XXVIII：色觉差异与无障碍色彩系统

“色盲”并不代表所有人的视觉状况都一样。美国国家眼科研究所 NEI [113]区分红绿色觉缺陷、蓝黄色觉缺陷，以及少见的近乎完全缺失色觉的情况。红绿色觉缺陷内部也有不同类型和程度。因此，所谓“色盲配色”若只列出几个 HEX 值，并不足以构成完整规范。

界面中可能丢失哪些信息

如果两个状态只用红色和绿色表示，部分用户可能无法区分它们，也可能不知道哪种颜色代表成功。即便没有色觉缺陷，小色块、屏幕反光、光线不足和屏幕亮度低，也会增加辨色难度。WCAG 2.2 成功标准 1.4.1 [60]要求不能只靠颜色传达信息、表示操作、提示响应或区分元素。这一标准关注的是信息含义；文字对比度和必要的非文字元素另有标准要求。

增加第二种线索的实用方法

情况	仅用颜色	增加其他线索
表单错误	红色边框	字段旁的提示文字、符号，并在代码中关联对应字段
订单状态	绿色或红色圆点	“已就绪”“需要操作”等文字和固定位置
图表	不同色相的曲线	曲线旁直接标注、使用不同标记和线型
地图	红绿区域	带数值、标签和可分辨纹理的图例
选择商品版本	彩色缩略图	版本名称及清晰的选中状态

纹理、阴影线和标记必须按实际尺寸检查。手机地图上几乎看不见的纹理无法帮助区分。对于包含大量曲线的图表，应减少同时显示的系列数；或者允许用户交互式突出选定曲线，同时保留曲线的直接标签。

三种检查，不能只靠模拟工具

第一步：去掉色相，检查含义。 将版式转换为单色，或暂时移除颜色，观察用户还能否找出错误、已选项目和变化方向。这是一种启发式检查；黑白图像不能模拟所有类型的色觉状况。

第二步：测量对比度。 WCAG AA 要求普通文字至少达到 4.5:1，大号文字至少达到 3:1。对界面中的必要视觉部分和图形对象，标准 1.4.11 [98]通常要求其与相邻颜色的对比度达到 3:1。应计算合成之后最终的不透明颜色，并检查具体配色组合。达到某一个阈值不等于整个屏幕都具备无障碍性。

第三步：在实际情境中让不同用户测试。 模拟工具有助于发现风险，但不能代替邀请有不同视觉特征的人参与测试。给他们具体任务：“找出错误”“指出数值最高的系列”或“选择需要的商品版本”。记录错误比例和用户卡住的位置，而不能只记录对调色板的总体印象。

组件规范

对于关键状态，规范不能只写 error = #B42318；至少还要规定文字与背景的组合、图标或符号、提示语、聚焦状态、位置和错误处理行为。没有文字说明的图标也可能产生歧义；没有文字的颜色更难传意。在数据报告和地图中，还要区分数值色阶和类别色彩：色阶应保留顺序，类别应能相互区分而不制造虚假等级。

返回目录 ↑

专题

主题章节 XXIX：不同材料与照明下的色彩

设计师常在屏幕上确认颜色，但观众最终看到的可能是纸张、织物、塑料或喷漆金属上的颜色。屏幕发光，物体则反射入射光。如果没有色彩空间、配置文件和观看条件，单独一个 HEX 值无法描述材料的预期外观。ICC 的 RGB 工作流程指南 [41]说明了为什么不同设备之间需要配置文件和受控转换。

一个设计意图，多种表面

哑光纸会漫反射光线；亮面薄膜会产生明显反光；织物的外观则受到纹理和纤维方向影响。下方的色块只是示意图，并非这些材料的物理精确模拟：几个屏幕 HEX 值无法可靠呈现材料差异。生产前必须比较实物样品。

同色异谱：此处匹配，彼处不匹配

两个样品在一种光源下看起来相同，换另一种光源后却可能不同。它们的光谱反射率可以有差异，只是在某一特定条件下实现了视觉匹配。CIE 对同色异谱指数的定义 [114]，是衡量光源或观察者变化时同色异谱样品之间不匹配程度的指标。实用启示是：如果包装既会在日光下，也会在商店灯光下展示，只在一种灯光下确认颜色是不完整的。

以开尔文表示的色温本身并不能说明灯具光谱。两种光源看起来同样“偏暖”，对材料差异的呈现却可能不同。因此，规范应注明具体光源或观看条件，并把样品放在一起检查，而不是依靠记忆判断。

包装与品牌识别工作流程

确定优先媒介。 网站标志、哑光纸标签和喷漆外壳可接受的近似程度可能不同。先约定哪一种作为标准。
记录数字表示。 注明源文件的色彩空间和配置文件。若不作说明，#A65F3F 只是本书中的 sRGB 示例，并非适用于所有材料的通用光谱颜色。
在目标材料上打样。 检查实际使用的油墨、涂层、覆膜或织物。用另一种纸张在桌面打印的样品，不能证明批量生产效果。
在相关光线下比较。 将样品并排和分开查看。明确白色材料看起来会是什么效果：“白色”屏幕底色与纸张白度未必相同。
确定验收标准。 生产前应让执行方清楚打样要求、双方认可条件下的测量方式及允许偏差。若需严格的色度控制，应与生产方商定适当的指标和测量方法，不要在没有条件说明的情况下随意规定一个 ΔE 数值。

特别容易出错的环节

通过即时通信软件发送样品照片，其颜色会受到照明、相机、自动白平衡、压缩和接收方屏幕影响。照片可以帮助讨论形状和瑕疵，但不能用于最终确认颜色。一台显示器上的精确匹配，不保证在另一台显示器或印刷品上同样匹配。两种材料使用相同 HEX，也不能证明视觉感受相同，因为它们对光的物理响应不同。投产决策应以真实样品和真实观看条件为依据。

返回目录 ↑

专题

主题章节 XXX：OKLCH 实践——从坐标到 HEX 与对比度

OKLCH 用明度 L、彩度 C 和色相角 h 描述颜色。这里的彩度不同于 HSL 中的饱和度 S。OKLCH 便于构造协调的色阶，但不会自动生成无障碍配色。屏幕显示的是 RGB，而部分指定的 OKLCH 坐标无法落入 sRGB 色域。W3C CSS Color 4 [9]说明了 OKLab/OKLCH 色彩空间及色域处理；本节给出一组独立的教学计算示例，并明确说明了映射到 sRGB 的规则。

任务

构造七级蓝色，色相角固定为 h = 250°。指定的 L/C 坐标依次为：0.96/0.03、0.87/0.07、0.76/0.11、0.64/0.14、0.52/0.15、0.39/0.14、0.27/0.11。这些色阶依据 OKLab 的作者 Björn Ottosson 提供的公式 [110]计算，然后转换为 sRGB 并四舍五入为 8 位通道值。

如果初始颜色超出 sRGB 色域，本例会在保持 L 和 h 不变的前提下，只降低 C，直至色值到达色域边界。这是一种简单的设计启发式方法，并不保证与不同 CSS 色域映射算法、编辑器或配置文件产生完全相同的结果。四舍五入后，实际 HEX 坐标也可能略有偏移。

色阶	指定 L / C	降低 C 后的值	sRGB HEX	与白色的对比度
1	0.96 / 0.030	0.01973	`#E8F3FF`	1.12:1
2	0.87 / 0.070	0.06637	`#B4D8FF`	1.48:1
3	0.76 / 0.110	0.11000	`#79B6F4`	2.14:1
4	0.64 / 0.140	0.14000	`#3F90DD`	3.36:1
5	0.52 / 0.150	0.14719	`#006BB9`	5.52:1
6	0.39 / 0.140	0.11039	`#00467D`	9.67:1
7	0.27 / 0.110	0.07643	`#00274A`	15.12:1

将色阶转化为界面系统

不要用第 1–4 级作为普通白字背景：它们与白色的对比度均低于 4.5:1。第 5 级 (#006BB9) 为 5.52:1，第 6–7 级更高。搭配深色文字 #111827 时情况相反：第 1–4 级的对比度依次为 15.79:1、12.00:1、8.29:1 和 5.28:1；第 5 级只有 3.21:1，不符合普通深色文字至少 4.5:1 的要求。这些数值适用于文字与色块背景的组合，而不是两个相邻色块。

一种实用分配方式：第 1–2 级用作浅色背景或深色文字的突出面板；第 3–4 级用作更醒目的表面并搭配深色文字；第 5 级用于蓝色主要按钮并搭配白字；第 6–7 级用于浓重强调和轮廓。不过具体角色仍取决于尺寸、邻近色、状态和视觉层级。不能把同一色相轴上的七种色调自动分配给图表的七个类别，否则相邻类别会看起来像同一有序色阶中的不同等级。

计算后的检查

色域映射并四舍五入成 HEX 之后再检查对比度：初始 oklch() 值不等于屏幕上保证出现的像素。
半透明填充应先针对具体背景计算合成结果；透明度本身没有独立的对比度数值。
将悬停、聚焦、禁用和深色主题视为不同配色组合，逐一检查。文字对比度和控件边界对比度解决的是不同问题。
如果在 sRGB 之外的空间工作，应保存空间和配置文件，并为广泛使用的网站准备经过验证的 sRGB 表示。不能把另一个色彩空间的通道数值直接复制到 HEX，并期待颜色不变。

返回目录 ↑

专题

主题章节 XXXI：从相机到网站与视频的图像色彩

品牌色块、产品照片和视频帧在设计师的屏幕上可能看起来相近，发布后却出现偏差。原因不一定是“显示器不好”：源色彩空间、文件配置文件、转换过程、屏幕色域以及 SDR/HDR 模式都会产生影响。ICC 说明 [41]了如何通过受控配置文件，把源文件色彩管理到不同媒介。视频制作方面，ITU-R BT.2100 [44]规定了 HDR 电视参数，包括 PQ 和 HLG。这些是不同的工作流程，并非 HEX 的另外两种叫法。

贯穿流程的示例：商品卡片与短视频

假设教学用品牌有一个陶土色按钮 #B54708，产品照片也带有相近的整体色调。#B54708 只是界面使用的 sRGB 示例。它不规定照片中的每个像素、包装染料或 HDR 视频的颜色。商品卡片应使用配置文件已知的摄影母版，制作双方确认的 sRGB 屏幕版本；只有在确实需要且经过检查时，才另外制作广色域版本。视频则须注明工作空间、SDR 或 HDR、交付格式和参考观看条件；不能把 PQ/HLG 直接重编码成普通 sRGB 视频。

设计师应随文件交付哪些信息

项目	规范中注明	检查内容
界面颜色	`#B54708`、sRGB、用途和背景	页面中的最终像素与对比度
产品照片	源配置文件、导出版本、背景及裁切	在目标显示器上与产品样品和界面并排检查
广色域照片	色彩空间及嵌入配置文件	P3 中正常显示，并按约定在 sRGB 中呈现
视频	SDR/HDR、转换方式及交付元数据	在相应设备上检查 SDR 和 HDR 版本

关于网页颜色，CSS Color 4 [9]介绍了 color(display-p3 …) 和超出色域颜色的映射。Media Queries 5 [115]定义了 (color-gamut: p3) 检测，但满足该条件只表示设备和浏览器大致具备相应能力，并不保证显示结果与参考色完全一致。实用顺序是：先做好可用的 sRGB 版本，再在确有需要时添加 P3 版本，并分别检查。不要把 P3 的通道数字复制进 HEX；那并非跨色彩空间转换。

四种交付陷阱

配置文件丢失。 不注明色彩空间的 RGB 数值含义不明确；检查导出时有没有剥离配置文件。图像与 CSS 色块不匹配。 即使数值接近，照片还包含纹理、光线和阴影，而 CSS 色块是均匀的；要在最终构图中比较，不能只用吸管对比一个像素。把 HDR 当成“更鲜艳的 sRGB”。 HDR 采用不同的亮度处理，需要正确的制作和交付链路。用源文件计算对比度。 如果文字覆盖在照片上，就要在最终视频帧中，经过渐变、裁切和显示转换后测量。

验收包含两个不同决策：文件的技术传递是否正确；成品对该产品而言是否足够接近预期。前者通过配置文件和播放检查；后者通过真实观看、实体材料和双方约定的偏差来评估。一个 HEX 值无法同时解决这两个问题。

返回目录 ↑

专题

主题章节 XXXII：从设计稿到代码的色彩系统

大型系统中的颜色不应只是“20 个好看的 HEX 值”清单，而应形成一条链路：源颜色 → 语义角色 → 组件 → 状态 → 主题。修改一个源色调时，不应意外影响表单错误、链接和横幅背景。Design Tokens Format [116]说明了令牌之间的引用关系；Color Module [96]说明颜色令牌的数据格式。这些都是 W3C 社区组报告，不是 WCAG 标准，也不保证系统自动具备无障碍性。

完整示例：两种主题下的预约按钮

浅色主题下，主要按钮背景为 #1D4ED8，白色文字为 #FFFFFF，计算所得对比度为 6.70:1。深色主题下，相同的语义角色改用 #93C5FD 和 #111827，对比度为 9.84:1。保留的是“主要操作”的功能，而不是固定色值。聚焦状态使用可见的外框，并单独检查。禁用状态不能成为解释操作不可用原因的唯一方式。

层级	名称示例	浅色主题	深色主题
源令牌	`blue.700`、`blue.300`	`#1D4ED8`	`#93C5FD`
语义令牌	`action.primary.bg`	`#1D4ED8`	`#93C5FD`
语义令牌	`action.primary.text`	`#FFFFFF`	`#111827`
组件令牌	`button.primary.background`	引用 `action.primary.bg`	同一引用，主题值不同
状态令牌	`button.primary.focusRing`	`#111827`	`#F9FAFB`

表中的源令牌名称经过简化：“700/300”只是命名阶梯，并非通用明度单位。实际令牌应有类型、值和清晰的适用范围。如果多个组件确实承担同一角色，就不要给每个按钮另建一组 HEX；反过来，也不要仅因两个颜色目前相同，就把不同含义的颜色合并。

最小实现流程

设计师确认角色、主题和状态的配色，开发人员再建立类似 --color-action-primary-bg: var(--blue-700) 和 --color-button-primary-bg: var(--color-action-primary-bg) 的引用。深色主题只覆盖语义令牌，组件继续引用它。要在浏览器中检查最终计算值，而不能只看令牌文件：继承、透明度和状态都可能改变真实配色。

下面的最小代码片段只用于说明角色与主题之间的关系，并非完整组件库：

位置	CSS 示例
根值	`:root { --blue-700: #1D4ED8; --action-bg: var(--blue-700); --action-text: #FFFFFF; }`
深色主题	`[data-theme="dark"] { --action-bg: #93C5FD; --action-text: #111827; }`
组件	`.button-primary { background: var(--action-bg); color: var(--action-text); }`

示例中有意没有让聚焦、悬停和禁用状态“自动继承”：这些状态需要独立规则和检查。如果多个组件使用同一语义角色，修改令牌会同时影响它们；因此，变更后要逐个目视复核所有使用位置。

启用强制系统颜色时，浏览器可以替换网页指定的填充色。CSS Color Adjustment [97]说明了 forced-colors 和系统颜色；不要仅为保留品牌配色就把 forced-color-adjust: none 用在整个界面上。如果焦点只靠彩色阴影表示，强制颜色模式下它可能消失；应使用可见边框或系统颜色。

发布检查矩阵

逐项检查浅色/深色/强制颜色 × 默认/悬停/聚焦/按下/错误/禁用 × 文字/图标/边框/背景。这个矩阵不要求准备 72 个不同的 HEX 值，而是要求确认所有受支持的组合都保留含义和对比度。文字参照 WCAG 2.2，标准 1.4.3 [78]；必要图形元素参照标准 1.4.11 [98]。还须分别考虑例外情形和实际相邻颜色。最终交付包括令牌表、组件示例、主题规则、检查结果以及负责管理调色板变更的人员。

返回目录 ↑

专题

主题章节 XXXIII：目录与商品详情中的颜色名称

对品牌而言，“北方薄雾”可能是不错的系列名称，但顾客还需要知道商品究竟是不是蓝色。商品名称、筛选项、照片、HEX 预览和实体样品承担不同功能。Chou 等人的研究 [117]表明，人们对常规或不常规名称的反应，还会受到颜色作为商品属性的重要程度等因素影响。这些是特定实验的结果，并不能推导出“创意名称总能卖得更好”。

完整示例：同一产品的三个版本

为一组教学用台灯设定稳定的版本编号、便于顾客理解的名称，以及宽泛的颜色类别。这里的 HEX 只是屏幕上的近似色样，并非喷涂金属的测量值。

代码	商品页面名称	筛选类别	屏幕色样
L-01	深绿“常青”	绿色	`#2F5D50`
L-02	灰蓝“北境”	蓝色	`#70889A`
L-03	暖灰“石色”	灰色	`#9C9A91`

在每一个选择环节都将名称放在色样旁边：商品卡片、筛选器、购物车和订单。选中后，状态不能只靠彩色边框表示。商品照片应保留材料质感；平面的 SVG 色块不能代替产品照片。如果两个版本在小卡片上很像，应放大图片并增加文字区分，而不要把色样改成一个虚构的“差异更大”的颜色。

两套命名系统，一个商品身份

商品名用于塑造个性，也可以本地化。规范化类别用于筛选和比较。SKU 应在不同语言间保持稳定；翻译时不能暗中改变商品版本。将产品信息输出到电商平台时，要核对平台的最新要求。例如，Google Merchant Center [118]要求 color 属性与落地页上的商品名称一致，并将它用于筛选。这是某个具体平台的规则，并非普遍心理学规律。商品颜色属性不应只填 HEX 值，而不提供顾客能读懂的名称。

如何测试名称

不提供提示，请参与者先寻找“深绿色台灯”，再寻找“常青”版本，关闭商品卡片后让他们说出选中的颜色。测量搜索错误、版本混淆以及预期与真实色样之间的不符。按照真实商店的方式，将名称与照片和价格一起测试；随后再单独测试，以判断究竟是什么帮助了用户。如果研究名称本身的影响，在保持照片、位置和价格不变的情况下只改名称；否则无法把效果归因于这个词。

团队约定

每个版本建立一条数据记录：稳定 SKU、各语言名称、主要筛选类别、已确认图像的链接、屏幕色样值、材料和检查日期。商品页面、购物车、订单确认和商品数据导出都应从这条记录读取内容。这样能降低同一版本在筛选器里叫“绿色”、购物车里叫“橄榄色”、包装上又叫“常青”，彼此却没有对应关系的风险。

如果直译后名称的意象难以理解，就不要硬译商品名：本地化名称可以不同，只要 SKU 和实体商品版本一致。商品实际颜色改变后，继续使用旧照片或旧 HEX 预览会误导顾客。应更新所有呈现方式，并重新对照已确认的实体色样。如果发布颜色版本，管理的不只是一个好听的名称，也包括数据一致性和顾客预期。

返回目录 ↑

专题

主题章节 XXXIV：随时间变化的色彩——过渡、状态与闪烁

静态调色板无法描述点击后、加载中或出现错误时颜色会发生变化的界面。除了起点和终点 HEX 值，还要考虑持续时间、变化面积、重复次数、信息是否保留以及用户设置。快速闪烁尤其需要谨慎：WCAG 2.2 成功标准 2.3.1 [119]限制闪烁次数，或要求满足一般闪烁与红色闪烁的阈值。该标准并未给出“红色闪 100 毫秒就安全”这种简单规则。

完整示例：提交表单

用户点击“提交”后，按钮从 #1D4ED8 变为较沉稳的等待状态 #1E40AF，并显示“正在发送”。收到服务器响应后，结果继续显示在屏幕上：“申请已发送”或“错误：请重试”。绿色或红色都不能成为唯一提示。即使移除颜色过渡，含义仍保留，因为文字和组件状态没有消失。

时刻	可见提示	颜色角色	检查内容
操作前	“提交”	主要操作 `#1D4ED8`	对比度、焦点和清晰度
等待中	“正在发送……”	同一语义角色；`#1E40AF`	是否能避免误以为需要再次点击
成功	“申请已发送”	确认强调色 `#067647`	过渡后文字是否仍然可见
错误	“错误：请重试”	错误强调色 `#B42318`	提示是否与操作相关联

在此教学示例中，若白字 #FFFFFF 始终保留，其与上述四种按钮底色的对比度分别为 6.70:1、8.72:1、5.69:1 和 6.57:1。这只检查按钮的静态状态，并不能证明它们之间的动画安全。如果过渡中的文字或重要符号仍然可见，就要单独测量中间帧。

色彩心理学无法给出普遍适用的最佳动画时长。应根据任务设定时长并观察用户反应：他们是否注意到变化，会不会把等待误认为卡死，是否能够继续操作。不要用大面积亮色闪烁来吸引注意。

尊重用户设置

对于非必要动画，应在 prefers-reduced-motion: reduce 时提供静态或缩减后的效果；W3C C39 技术说明 [120]展示了如何处理由交互触发的动画。这不能代替单独的闪烁检查：用户还没找到设置项之前，减少动态效果的偏好不能被当作可以显示危险闪烁的许可。在强制颜色模式中，品牌色被系统色替换后，仍应靠文字和形状表达信息。

发布前，记录状态顺序并录屏逐帧检查；测量每一个稳定状态的对比度；查看过渡结束后的文字；并依据完整的 WCAG 标准另行评估潜在闪烁。单张截图不包含任何时间信息，不能据此承诺动画安全。

返回目录 ↑

专题

研究卡片：哪些研究结论确实能用于设计

每张卡片都把设计启示与具体研究方法联系起来。“发现了关联”不等于“颜色必然会引发某种行为”。只有引用的原始资料提供了样本量时，才在下文列出。规范文件和方法论文会与实验研究分别标明。

偏好与情绪

1. 色相偏好与物品经历有关

来源：Palmer 与 Schloss，2010 [65]。**研究内容：**实验室任务中对颜色及相关物品的评价。**规模：**主要实验 48 名参与者、32 种颜色刺激。**设计启示：**人们对物品的联想及情境可能比“红色 = 唤醒”更能解释偏好。**局限：**实验室色彩评价没有测量品牌选择或购买。

2. 和谐度与喜欢一组配色并非一回事

来源：Schloss 与 Palmer，2011 [75]。**研究内容：**图形与背景配色的偏好及和谐度评价；其中一项实验包含 48 名参与者、992 组配色。**设计启示：**最“和谐”的搭配未必最适合具体传播任务。**局限：**简单色块不等于含有文字、图像和任务的整页设计。

3. 颜色与情绪的关联既有共通点，也因地区而异

来源：Jonauskaitė 等人，2020 [63]。**研究内容：**来自 30 个国家、22 个语言群体的 4,598 人，将 12 个颜色词与 20 种情绪联系起来。**设计启示：**可能存在共同倾向，但仍须验证本地受众。**局限：**联想调查没有证明界面会引起某种情绪或改变行为。

4. 综述不会把颜色变成普遍的“情绪按钮”

来源：Jonauskaitė 与 Mohr，2025 [62]。**类型：**色彩与情绪研究的系统综述。**设计启示：**宜描述概率性的、多重联想，而不要给每种颜色规定唯一固定的“含义”。**局限：**汇总不同方法并不能证明某个具体 HEX 会影响转化率。

5. 明度和饱和度会改变情绪评分

来源：Valdez 与 Mehrabian，1994 [121]。**研究内容：**参与者对 Munsell 色样的愉悦度、唤醒度和支配感评分。**设计启示：**讨论“蓝色的影响”时，也应说明明度与饱和度。**局限：**把 Munsell 坐标转换成屏幕 HSL，再推断 UX 效果，并不是对原实验的直接复现。

6. “红色妨碍思考”不是普遍规律

来源：Gnambs，2020 [66]。**类型：**对 38 组样本、67 个红色与认知表现效应的元分析。校正发表偏差后，没有留下有说服力的总体效应证据。**设计启示：**不要仅凭流行的启动效应说法，就在教育产品中禁用红色。**局限：**这并不证明任何任务中都不存在相关效应。

7. 一项具体的启动效应研究未能复现

来源：Steele，2014 [122]。**研究内容：**直接复现 Mehta 与 Zhu 的字谜实验，沿用原材料，样本量超过原研究三倍；预测的背景颜色与词类交互作用未复现。这并非声称彩色背景之间绝无差异。**设计启示：**引用红色/蓝色启动效应时，也应提到后续验证。**局限：**复现的是一项任务，不是原论文的所有部分。

视觉与情境

8. 语言可能影响快速辨别蓝色

来源：Winawer 等人，2007 [58]。**研究内容：**比较俄语和英语参与者辨别浅蓝与深蓝色样；言语干扰会消除类别优势。**设计启示：**颜色名称和分类会影响识别任务。**局限：**不能据此按国籍分配不同品牌配色。

9. 对典型物体颜色的记忆会影响其外观

来源：Hansen 等人，2006 [57]。**研究内容：**参与者把熟悉物体的颜色调至主观中性，结果出现与物体典型颜色记忆一致的偏移。**设计启示：**评价商品照片时，应结合人们熟悉的物体。**局限：**该实验没有覆盖所有商品和标志。

10. 网站美感并非只由颜色决定

来源：Reinecke 等人，2013 [84]。**研究内容：**548 名志愿者短暂观看 450 张网站截图并作出评价；模型考虑了色彩丰富度和视觉复杂度。**设计启示：**应结合页面密度和构图讨论颜色。**局限：**观看 500 毫秒后评价截图，不等于测量网站实用性或转化率。

11. 文字对比度有利于阅读，但不能替代整页测试

来源：Hall 与 Hanna，2004 [85]。**研究内容：**136 名参与者在两个网页上体验四种文字/背景组合。较高对比度总体上提高了可读性；未发现显著的记忆效果。**设计启示：**检查文字与最终背景的搭配。**局限：**旧式显示器和有限的配色组合无法确定所有屏幕的最佳值。

12. 对比度比率是无障碍阈值，不是审美评分

来源：W3C WCAG 2.2 对最低对比度的说明 [78]。**类型：**无障碍标准的说明文档，不是用户实验。AA 阈值为普通文字 4.5:1、大号文字 3:1，另有明确例外。**设计启示：**计算叠加后的最终配色。**局限：**一组文字达标，不代表整页对所有人都无障碍或舒适。

13. 颜色不能成为传递信息的唯一方式

来源：W3C WCAG 2.2“使用颜色”说明 [60]。**类型：**对规范性 WCAG 标准的官方解释性文件，并非心理实验。**设计启示：**为颜色提示增加标签、形状、图标或错误文字。**局限：**必须在完整界面任务中检查具体实现。

品牌与商业任务

14. 不同国家的营销颜色含义并不完全相同

来源：Madden、Hewett 与 Roth，2000 [92]。**研究内容：**比较八个国家的颜色偏好、含义及其与标志的适配。**设计启示：**本地测试比“各国颜色含义表”更有用。**局限：**研究中的相似和差异不能预测单个消费者的反应。

15. 红色在议价和拍卖中的作用可能不同

来源：Bagchi 与 Cheema，2013 [81]。**研究内容：**eBay 拍卖和实验室谈判。拍卖情境下，红色提高了加价幅度；谈判中，红色却降低了报价。**设计启示：**先确定任务机制，再测试颜色。**局限：**不能据此为所有购买按钮推荐红色。

16. 颜色名称也是商品描述的一部分

来源：Chou 等人，2020 [117]。**研究内容：**五项实验考察了在颜色属性重要程度不同时，人们对颜色名称典型性和歧义的反应。**设计启示：**应把色样名称与照片及商品类别一起测试。**局限：**研究没有证明创意名称在所有品类中都更好。

数据与生产

17. “彩虹”色阶可能扭曲数据顺序

来源：Crameri 等人，2020 [86]。**类型：**分析地图与调色板的方法论文，不是转化率测试。**设计启示：**定量数据应采用感知明度连续有序的色阶，并检查图例。**局限：**调色板选择取决于数据类型和阅读任务。

18. Cividis 旨在让数据色阶更均匀易读

来源：Nuñez 等人，2018 [89]。**类型：**计算方法开发的色图，目标包括感知均匀及适应常见色觉差异。**设计启示：**可作为连续色阶的候选，但不是通用品牌调色板。**局限：**它不能取代标签、比例尺及对实际图表的检查。

19. 两种色样可在一种灯光下匹配、在另一种下偏离

来源：CIE 对同色异谱指数的定义 [114]。**类型：**术语标准，不是用户实验。**设计启示：**应在双方约定的照明下确认印刷品和材料样品；必要时使用多种光源。**局限：**单个 HEX 值或屏幕照片不能证明实体材料颜色一致。

20. RGB 数值要有明确配置文件，才能可靠迁移

来源：ICC，RGB 工作流程 [41]。**类型：**技术指南。**设计启示：**保留源配置文件，商定目标色彩空间；关键印刷批次应打样。**局限：**配置文件可以减少不确定性，但不能保证所有材料与显示器外观相同。

返回目录 ↑

专题

主题章节 XXXVI：四个项目——从设计简报到色彩验证

以下是作者制作的教学项目，并非真实销售或用户测试报告。每个案例展示完整流程：任务 → 限制 → 备选方案 → 决策 → 可测量的检查。所有 HEX 值均为不透明屏幕 sRGB 色值。对比度按 WCAG 2.2 文字公式 [78]计算；一组配色达标并不能证明整个产品都具备无障碍性。

项目 1：预约咨询——操作与错误

简报。 用户选择时间并提交表单。色彩系统要帮助用户注意主要操作并理解结果。限制条件：文字清晰易读；错误不能只用红色提示；键盘焦点必须可见。参见“表单修改前后”示意图。

元素	不合适的方案	采用的方案	检查
主要按钮	`#F4C430` 上的白字	`#1D4ED8` 上的白字	1.64:1 与 6.70:1；前者未达普通文字 AA 阈值
错误	只有红色边框	“请检查地址”文字、边框和符号；白底 `#B42318` 文字	6.57:1；不辨色也能理解含义
成功	只有绿色填充	“预约已确认”，`#ECFDF3` 底上的 `#067647`	5.40:1；用文字说明状态
聚焦	彩色阴影	与相邻表面形成可见外框	用键盘及强制系统颜色模式检查

交付开发。 语义角色：action.background、action.text、field.error.text、status.success.text、focus.ring。按钮底色更改后必须重新计算配色。WCAG“使用颜色” [60]要求提供颜色以外的信息提示；非文字对比度 [98]还单独涉及必要边界和图标。

用户测试。 请参与者预约，然后故意让其中一个字段出错。记录他们是否发现错误原因、修正所花时间以及是否看到确认信息。不能仅凭 HEX 配色比较就宣称转化率提高。

项目 2：茶叶系列——品牌识别与实体媒介

简报。 同一虚构品牌的三种口味要看起来属于一个系列，同时能在货架上区分。颜色不是唯一线索：每包还有名称、系列编号和不同图形。应在哑光纸上分别模拟日光和商店照明。

系列	sRGB 主色示意	辅助线索	文字检查
叶香	`#075B55`	“01 · 叶香”，横条	白字配绿底：7.96:1
浆果	`#B42318`	“02 · 浆果”，双面板	白字配红底：6.57:1
香料	`#F4C430`	“03 · 香料”，方块	`#111827` 配黄底：10.80:1；白字仅 1.64:1

决策。 统一字体、网格、标志位置和中性色侧面建立系列感；色相帮助查找版本，但不能取代版本名称。这些 HEX 只描述屏幕稿，并非印刷合同色。确认印刷需要目标配置文件、材料和实体打样。如果两种颜料在一种光线下匹配、另一种光线下分离，就涉及实际的同色异谱问题；可用 CIE 同色异谱指数 [114]表征差异程度。

检查。 结合货架照片和实体打样，让用户说出系列名称、找到指定口味并发现误选的包装。记录照明和观看距离。没有实体样品，就不能把屏幕问卷的结论直接套用到哑光包装。

项目 3：仪表板——数值大小不能变成类别

简报。 地图用五个区间展示一种连续数值。颜色应表达顺序，而不能制造虚假的“跳变”。修改前使用红、黄、绿、蓝、紫，读者可能误以为色相变化代表了现象类别变化；修改后改用相对亮度从 0.919 降到 0.082 的顺序色阶。

区间	颜色	相对亮度	图例标签
1	`#F1F7F6`	0.919	非常低
2	`#B9DCD7`	0.664	低
3	`#6AB9AF`	0.409	中
4	`#258A80`	0.201	高
5	`#075B55`	0.082	非常高

决策。 在图例中列出数值和单位，并用独立符号标出缺失数据。这只是教学色阶，并非天然最优：尽管已计算明度顺序，仍要检查相邻档位能否区分、地图背景的影响和实际尺寸下的感知。Crameri 等人 [86]说明了使用彩虹色阶需要谨慎的方法学原因。

检查。 请用户找到最大值、比较两个相邻地区，并在没有提示的情况下说明颜色含义。使用同一张地图比较两种图例的用时和错误数。再检查灰度打印及常见色觉差异；模拟工具可发现风险，但不能代替真人测试。

项目 4：品牌页面——按钮颜色与照片

简报。 虚构工作室的落地页只有一个目标：预约首次沟通。主照片同时有亮部和暗部，白字放在照片上就无法保持固定的对比度。

决策。 将文字和按钮放在不透明浅色底板 #F9FAFB 上；正文 #1F2937 的对比度为 14.05:1。主要操作使用 #1D4ED8 配白字，对比度为 6.70:1。陶土色 #B54708 仅用于小型装饰；虽然白字与之搭配可达到 4.5:1（5.43:1），但这不代表所有强调色都应改成按钮。照片保留内容作用，不作为关键信息的底图。

检查。 在手机和宽屏上改变裁切、缩放和亮度，确认标题、按钮和说明文字不会移到未经计算的图像区域。比较按钮颜色相同的两种构图，避免把面积、顺序或照片的影响归给颜色。Reinecke 等人 [84]研究过网站截图的快速观感评分，但没有测量此教学页面的转化率。

案例交付内容

交付源版式、颜色角色与配色表、配置文件已知的图像、状态矩阵、检查结果和待解决问题。实体媒介还应附上已批准样品及观看条件。在报告中分别标明计算结果、用户观察和假设，这三者的确定程度不同。

返回目录 ↑

专题

主题章节 XXXVII：现代 CSS 色彩——从令牌到浏览器

本章补充 OKLCH 和色彩令牌相关章节。需注意规范状态：CSS Color 4 [9]介绍 oklch() 与 color(display-p3 …)；本书编写时，CSS Color 5 [123]仍是工作草案，其功能可能变化，目标浏览器是否支持也需要核实。即便语法符合草案，仍不保证对比度合适。

先确定批准的配色和回退值

教学示例中的按钮采用 #1D4ED8 底色搭配 #FFFFFF 白字，计算对比度为 6.70:1。其他颜色函数可以用于装饰，但不能悄悄改变这组已批准的配色。以下 CSS 可以独立运行：旧浏览器保留 HEX，新浏览器在支持相应功能时使用额外的装饰方案。

:root {
  --action-bg: #1D4ED8;
  --action-text: #FFFFFF;
  --decorative: #1D4ED8;
  --card-border: #9AB0AA;
}

.primary-action {
  color: var(--action-text);
  background: var(--action-bg);
}

.decorative-strip { background: var(--decorative); }
.card { border-color: var(--card-border); }

@supports (color: oklch(60% 0.12 250)) {
  :root { --decorative: oklch(60% 0.12 250); }
}

@supports (color: color-mix(in oklch, red, white)) {
  .card {
    border-color: color-mix(in oklch, var(--decorative) 20%, white);
  }
}

按钮保持不变。浅色卡片边框只是装饰示例，并非已认证可用于识别控件的边界。如果该边框承担识别控件的功能，应根据 WCAG 2.2 标准 1.4.11 [98]检查它与相邻颜色的最终对比度。不同空间中的混合结果不同；CSS Color 5 [123]所述 color-mix() 在此明确使用 oklch。

相对颜色：一种工具，并非无障碍承诺

相对颜色语法可以读取源色通道并修改它们，例如 oklch(from var(--decorative) calc(l + 0.08) c h)。这样可以生成相关变体，无需手工复制三个数值。但提高 l 并不能说明它与指定背景的最终对比度；提高 c 还可能使颜色超出设备色域。CSS Color 5 对相对颜色的处理方式有说明 [123]。采用前须检查浏览器支持、映射至目标色域的结果及最终配色对比度。

**组件库规则：**可以自动生成插图和预览用变体；文字、图标、焦点和状态颜色则应作为具体角色和配色组合单独确认。每种角色都须明确允许的背景、主题和状态。公式变化后，要重新检查所有调用该令牌的组件。

使用广色域，同时确保 sRGB 正常显示

color(display-p3 …)使用另一色彩空间的坐标；其通道值不是 HEX，不能直接复制到 sRGB。CSS Color 4 [9]对这些空间作了说明。(color-gamut: p3)查询表示设备和环境大致具备相应能力，并不保证某个品牌色样会准确显示；Media Queries 5 [115]也说明了这一限制。

界面的处理顺序： (1) 先确认 sRGB 版本；(2) 只在确有需要的元素上提供可选广色域版本；(3) 在目标浏览器中确认两种版本的视觉效果；(4) 将截图、视频和 CSS 色块并排检查。广色域版本应单独保存为令牌或源样，不能通过重复使用 RGB 通道数字来生成。可以用 @supports (color: color(display-p3 1 0 0)) 和 @media (color-gamut: p3) 限定支持范围，但仍须实际检查。

深色主题与自动颜色函数

CSS Color 5 工作草案 [123]中的 light-dark() 会根据当前配色方案选值。这可减少重复声明，但不会自动生成合格的深色调色板：文字、边框、状态和照片仍需设计检查。应明确设置 color-scheme，并为目标浏览器准备经过测试的回退行为。在强制颜色模式下，浏览器可以替换网页指定颜色；CSS Color Adjustment 1 [97]对此作了说明。不要为保留品牌 HEX 而在整个产品中禁用这一机制。

设计师与开发人员的最低交付约定

令牌字段	记录内容	目的
角色	`action.background`，而不只是 `blue-700`	说明变更含义
数值及空间	`#1D4ED8`、sRGB	避免通道解释混淆
允许的背景	此组件使用 `#FFFFFF`	对比度取决于配色背景
状态	默认、悬停、聚焦、按下、禁用	防止未经核验的派生值
主题	浅色、深色、强制颜色	适配时保留含义
检查方式	计算、浏览器、手动任务	区分规范检查与用户检查

发布前，记录目标浏览器版本，保存浅色和深色主题下的组件截图，并对照已批准样品。对比度计算与浏览器视觉检查回答不同问题，两者都要做。

返回目录 ↑

专题

主题章节 XXXVIII：真实照明下的材料色彩

屏幕 HEX 描述的是特定数字色彩空间中的颜色信号。实体物品的颜色则取决于光谱反射率、光源光谱、几何形状、光泽、周围环境和观察者。因此，两台显示器上的设计稿看起来一致，与印刷标签和喷漆瓶盖在实体上匹配，是两类不同任务。材料配对时尤其要关注同色异谱。CIE 同色异谱指数 [114]用于表征照明或观察者变化时，同色异谱样品之间的偏差程度。

单一“色温”数值隐藏了什么

相关色温相似的两盏灯，光谱功率分布仍可能不同。哑光纸板、塑料和织物对光线的反射方式也不同。因此，仅写“在 4000 K 下检查过”，并不能说明品牌关键颜色能否准确复现。应在约定的观看条件下比较实体样品，并在产品实际出现的照明下复查。

传统的单一 CRI/Ra 数值不能描述显色的所有方面。CIE 2025 年关于颜色质量指标的立场文件 [124]单独讨论了保真度指数 Rf 及单一平均值的局限。ANSI/IES TM-30-24 [125]提供更详细的指标，包括总体保真度 Rf、色域面积变化 Rg 及各色相区间的偏移。这些指标描述的是光源，并不保证顾客会喜欢某个具体包装。

三种样品的实验台

假设使用前文案例中的包装：哑光纸板上的青绿色印刷、喷漆塑料瓶盖及织物丝带。设计团队已在屏幕上确认 #075B55，但此 HEX 值并非三种材料的光谱规格。应准备实体样品和记录表。

样品	比较前记录	检查内容
印刷标签	承印材料、涂层、印刷方式、配置文件/条件、打样日期	色相偏移、暗部变深、纹理影响
塑料瓶盖	材料、色料、光泽、厚度、批次	眩光与旋转导致的外观变化
织物丝带	纤维、织法、染料、批次	视角变化造成的区域差异

将样品并排放在中性背景上。先在商定的参考光下评估，再分别在日光和常见零售照明下查看。不要上午看一件样品、傍晚凭记忆再看另一件。可以拍照存档，但不要通过 JPEG 判断实体色彩是否匹配：相机、图像处理和显示器又引入了一条颜色链路。

向灯具供应商索取什么信息

对颜色要求较高的空间，应索取灯具型号及版本、测量条件、相关色温、显色数据（若有 TM-30，应包含 Rf、Rg 和色相分区报告）、调光与模式切换信息，以及可能提供的光谱功率分布。不同方法的数据不能简单互换。若供应商只提供 Ra，就不要声称已知其他显色属性。IES TM-30-24 [125]公布了方法框架，但完整规范可能需要单独获取；本书的说明不能代替专业测量。

确认决策

确定优先标准。 两种材料上的标志可能最重视彼此接近；商品陈列则可能更重视版本区分及当地照明下的外观。这些标准不一定相同。
商定允差。 团队和生产方应预先确定如何测量或目视确认差异、哪一件样品作为标准，以及采用什么照明。不要给所有材料设同一个通用允差。
检查边缘情况。 观察眩光、倾斜角度和实际观看距离下的材料。荧光材料或光学增白材料对光照变化尤其敏感；应记录光源，不要根据一张照片作结论。
保留实体标准样。 标注材料、批次、日期和照明。下次下单时要对照此标准，而不能只对照旧 PDF。

哪些情况只需数字检查，哪些不行

初步选择方向、屏幕界面和准备配色变体时，数字检查通常足够。但若要求不同材料上的着色剂匹配、品牌商品颜色一致，或销售点外观稳定，就需要实体打样。无论 #075B55 还是高显色评分，都不能单独作出这类保证。最终规范应把样品 + 材料 + 光线 + 验收标准联系起来。

返回目录 ↑

专题

主题章节 XXXIX：数据中的颜色、不确定性与缺失值

顺序色阶表达数值的大小关系。但估算可能不精确，模型可能输出范围，也可能有部分数据缺失。如果把这些情况都编码为同一个色调，读者很容易把估算误认为精确测量。Korporaal、Ruginski 与 Fabrikant（2020） [126]在一项特定的选址任务中发现，显示不确定性会改变参与者的策略，但没有提高决策准确度。这并非支持某一种地图类型的普遍理由：作者研究的是特定情境和特定表达方式。

先说明究竟有什么未知

情况	含义	不应如何表示
估算范围	在指定模型或流程下可能出现的数值	将单点显示为无可争议的事实
区域间差异	组内实际观察值的分布	未作说明就标成仪器误差
预测值	在给定假设下的未来数值	当成已经观察到的结果
无数据	尚未获得或尚未发布数值	显示为零或最低区间
抑制显示的数值	因观察数太少等原因受到发布限制	表示为现象不存在

区间名称应符合数据方法：“情景范围”“置信区间”和“观察值分布”不能混用。设计师不能通过颜色推断统计可靠性；应与分析人员和数据源确认标注方式。

教学示例：选择高于阈值 21 的地区

下列数值均为虚构；范围只是指定的可能数值区间，不是置信区间，也不是真实指标。阈值同样仅供教学。

地区	估值	范围	相对于阈值 21 的结论
A	18	16–20	整个范围低于阈值
B	20	12–28	范围跨过阈值，无法给出单一结论
C	23	22–24	整个范围高于阈值
D	无数据	—	无法比较

若地图只用填充色，根据估值中心点分段时，B 可能与 C 颜色相近。这会掩盖重要差异：B 的区间跨过阈值，C 则没有。**改进方案：**顺序色阶表示估值；选中地区后在旁边显示数值和范围；用独立符号或标签标出结论不确定的地区。缺失数据采用单独的中性“无数据”标记，而不是最低区间的颜色。如果地图太拥挤，就将范围放在相邻表格或面板中，不要试图用一个色相同时编码两套数值尺度。

何时可以用颜色表达不确定性

Correll、Moritz 与 Heer（2018） [127]提出了 VSUP 调色板，在不确定性高时有意降低细节之间的可分辨度。实验中，与普通双变量地图相比，这种方法帮助参与者更多考虑不确定性。但不能把 VSUP 直接复制进医疗或金融仪表板：要先针对具体任务测试“弱化颜色”及图例的含义。

方法	适用条件	风险与检查
在数值旁显示范围	对象较少且重视精确估值	检查读者是否理解区间标签
明度表示数值，纹理表示不确定性	地图尺寸足以阅读	纹理不能遮盖边界和小字
不确定时降低饱和度	目的是避免夸大精确性	浅色不能同时表示“低”或“不可用”
另设面板或质量筛选	两种尺度让地图过于复杂	面板之间的对应关系必须清晰

单靠颜色编码并不够。WCAG 2.2 非文字对比度标准 [98]适用于理解图表所需的图形部分；边界、标记和标签都要针对相邻背景检查。灰度打印或有色觉差异时，数值大小、不确定性和“无数据”仍应通过标签或形状区分。

检查读者能否看出数据的边界

先不要解释图例，安排三项任务：(1) 找出能确定高于阈值的地区；(2) 指出结论模糊的地区；(3) 找出缺失数据的位置。除了正确与否，还要记录回答理由。如果参与者说“B 超过阈值，因为颜色很深”，就说明地图给出了过度确定的印象。先展示地图，再展示带区间的地图；分别比较决策变化和阅读时间。答案更快但错误时，不能说表现更好。

最终图表规范应包含数据来源与日期、单位、范围定义、区间边界、“无数据”的颜色与形状、更新方法和图例版本。这样，颜色才能诚实呈现我们知道什么以及知识的边界，而不只是装饰未知信息。

返回目录 ↑

专题

主题章节 XL：颜色与年龄——根据任务设计，不依据刻板印象

年龄本身既不能决定某人“喜欢什么颜色”，也不是视力诊断。不过，如果任务依赖细小色差，随着视觉和认知能力变化，完成任务可能更困难。Tamura 与 Sato（2020）的视觉搜索实验 [128]包括 24 名年轻观察者和 12 名年长观察者；年轻组中有一半佩戴滤镜，模拟老化晶状体的光谱透射率。作者比较了根据单一颜色通道及多个特征组合进行搜索的表现。这是实验室任务，并非可直接套用的界面调色板。另一项研究 Ferreira 等人（2025） [129]让三个年龄组的 60 名参与者在彩色噪声下完成亮度对比辨别任务。年轻成人组的阈值低于年长组，但不能据此推导出一种通用的“年龄 HEX”。

实际困难可能出现在哪里

设想一个药品、支付或医疗预约清单：重要项目用一颗很小的黄色圆点标示，相邻条目则只靠不同深浅的蓝色区分。问题不是“黄色的心理作用选错了”，而是标记面积太小、周围颜色接近、搜索负担大，并且只靠颜色传递含义。WCAG“使用颜色”标准 [60]要求提供其他信息线索；非文字对比度标准 [98]另行规范理解所需的图形提示。

较弱的方案	更稳妥的处理	仍需检查什么
表示“紧急”的小色点	加“紧急”标签和明显符号，颜色作为第三种线索	长列表中能否找到该项目
用相似色调表示两种状态	加“已就绪”/“等待中”文字及不同形状标记	不看颜色能否区分状态
浅色细边框标出输入框	使用明显边框并添加文字标签	真实设备上边框是否可见
只在照片上叠加警告	加不透明底板和文字	不同裁切下的对比度

模拟晶状体泛黄、“老年人视角”滤镜或灰度图可以提示风险，但无法复现一个人的完整体验。在视觉搜索研究中，滤镜只是实验条件之一，研究者同时还测量了真实参与者的表现。不能用滤镜截图取代目标用户测试。

与用户进行测试的流程

选择一项真实任务，例如“找到需要处理的预约并说明原因”。不能只问“你喜欢哪个颜色？”
在接近实际使用的尺寸和设备上展示完成后的界面。记录缩放比例、照明、反光以及参与者愿意说明的视力矫正工具。
观察查找时间、遗漏、错误选择和解释。另行询问究竟是什么线索帮助了他们：文字、形状、位置还是颜色。
比较内容和元素顺序相同的版本。如果颜色、尺寸和文字都同时改变，结果反映的是整体改版，而非单独的颜色影响。
不要把所有年长参与者都归为“60 岁以上”一个群体；个体差异可能大于群体平均差异。若错误后果严重，应邀请无障碍专家及具有代表性的用户参与。

检查矩阵

检查小尺寸/普通尺寸 × 浅色/深色主题 × 短列表/长列表 × 普通/困难照明。对每种组合分别查看文字、图标、边界和状态提示。通过 WCAG 阈值是重要底线，却不能证明每个人都能轻松搜索密集列表。本章的目标不是找到一种“适合某年龄的颜色”，而是避免让关键操作依赖单一且脆弱的色差。

返回目录 ↑

专题

专题 XLI：如何检验颜色假设，避免自我误导

“蓝色按钮比赤陶色按钮效果更好”含义模糊。“效果”是指更快找到、点击更多、理解更好、错误更少，还是购买更多？设计师应在比较方案之前定义可测量的结果。Elliot 与 Maier（2014） [109]及 Elliot（2019） [130]的综述强调了研究颜色效应的方法学难点。本节提供可复现的产品测试流程，并不承诺某种色相具有普遍作用。

一个问题，两种不同的检验

产品问题：两款现成按钮应选哪一款？A 为 #1D4ED8 配白字（6.70:1）；B 为 #B54708 配白字（5.43:1）。若结果不同，体现的是整组颜色及其情境的效应，不能证明仅由色相造成，因为明度和色度也不同。

**研究问题：**大致保持其他坐标不变、替换色相时会发生什么？同一 OKLCH L=0.55, C=0.12 的教学示例：色相 30° 转换并四舍五入为 sRGB 后是 #AC5346，色相 250° 是 #3275B4。配白字时，对比度约为 5.15:1 和 4.84:1。模型中的 L/C 坐标相同，但不同观察者看到的外观未必一致，WCAG 比率也仍有差异。这是更受控的比较，并非完美隔离“色相心理学”。

步骤	预先确定	可避免的错误
任务	“找到预约按钮并完成表单”	用“喜欢”取代任务表现
主要指标	无提示完成任务的比例	看过结果后挑选方便的指标
次要指标	用时、误点击、选择理由	混淆不同结果
方案	文案、尺寸、位置、背景和内容相同	把版式变化归因于颜色
分配	随机分配 A/B，或平衡呈现顺序	组间系统差异和顺序效应
停止规则	招募何时及按何规则结束	在偶然“好看”的结果出现时停止

实践：准备并执行测试

**写明假设及边界。**例如：“在此预约页面，A 能帮助用户更快注意到操作入口。”不要写“蓝色提升信任”，此处并未测量信任。
**选择设计。**线上 A/B 测试中，每位参与者只看一个方案；随机分配，并记录设备和页面版本。线下比较两个方案时要轮换顺序，否则先看到的版式可能影响对后者的判断。
**保持条件一致。**文案、尺寸、面积、邻近图像、位置和表单逻辑均相同。若要比较完整配色，明度对比差异就是比较的一部分。若要研究色相，则应尽可能控制明度与色度，并报告残余差异。
**先做试测。**确认说明易懂，且“任务完成”记录方式一致。流程更改后，不要悄悄把试测数据并入正式样本。
**按计划停止。**开始前与研究人员或分析师商定样本量和停止标准；颜色任务没有通用参与人数。不要仅凭最初几次随机点击宣布胜者。
**报告不确定性。**列出每组人数、主要指标结果、差异和适用的不确定区间；次要指标与排除情况另行报告。数据少时，应称结果为初步观察。

结果记录示例——不虚构“胜者”

报告字段	实际测试后填写
A/B 参与者	各组分配人数及完成测试人数
主要结果	完成任务比例、差异和区间
次要结果	用时、错误、评论，分别记录
条件	设备、线下测试照明、页面版本
偏差	故障、排除项及流程变更
决策	采用 / 修改 / 证据不足

没有统计上有说服力的差异，不等于“颜色永远没有影响”。反过来，两个页面的差异也不能证明色相有普遍作用。复现可能改变结论：例如 Steele（2014） [122]未能复现字谜任务中一项特定的颜色启动效应，但这并不推翻所有颜色研究。

测试后保存版式、HEX、条件、假设原文和结果。今后配色更改时，团队才能知道当时究竟检验了什么，而不是沿用“这种颜色已被证明更好”的传说。

返回目录 ↑

专题

专题 XLII：颜色的测量与验收——从标准样到批量生产

设计师在屏幕上批准了青绿色，印厂寄来打样，客户却说：“颜色不对。”没有共同的标准样和比较条件，双方都无法核实这一说法。印刷颜色不能只用 HEX 指定，而应结合实物样、材料、生产方式、测量与观察条件、验收规则。屏幕色 #075B55 可作为界面设计的起点，却不是反射表面的测量值。ICC 说明 [41]，屏幕打样受色彩配置文件、显示器校准和观察环境影响，不能替代实物打样。

究竟在比较什么

已批准的标准样与印刷样应在相同的指定条件下测量。印刷行业的 ISO 13655:2017 [131]说明了图文印刷品的测量及色度计算。纸张含荧光增白剂时，尤其要约定测量条件：M0、M1、M2、M3 不是不同的“准确度等级”。它们的测量条件不同，包括照明光谱、紫外成分处理和偏振；M3 使用偏振滤镜。ISO/TC 130 指南 [132]说明了条件选择及承印物的影响。不同条件或不同承印物测得的数值不能作为同一结果直接比较。

小色差常用 ΔE00，即 ISO/CIE 11664-6:2022 [27]中的 CIEDE2000 公式。它把一对 CIELAB 坐标转换为在规定条件下近似视觉判断的差异值。它不是匹配百分比、某人察觉差异的概率，也不是设计质量评分。CIE 142:2001 [133]讨论工业色差公式的使用条件；CIE 230:2019 [134]另行评估这些公式对小色差的适用性。单一 ΔE00 值不能替代对纹理、光泽、透明度及不同照明下颜色表现的比较。

示例：标签验收

假设一系列包装在哑光纸上印有青绿色色块。团队将签字确认的实物样作为合同标准。稿件包含目标印刷条件的配置文件，但最终验收以约定的打样为准。印刷前填写如下规格：

参数	项目记录示例
标准样	同种纸上的签字色样 04 号，存放于保护袋
生产	胶印；注明纸张、覆膜及目标印刷条件
测量	同一台约定仪器、校准、几何条件和孔径；M1；相同衬底
计算	按约定光源和标准观察者计算 CIELAB、ΔE00；在报告中注明公式参数
采样点	在均匀色块上标出三个位置；另检查边缘和折线区域
规则	本示例合同：三处 ΔE00 均 ≤ 2.0，且在约定光线下通过目视确认
重新打样	未达标时调整工艺并测量新样，同时保留两次记录

这里的 2.0 是演示流程用的合同示例容差，不是 ISO/CIE 要求，也不是通用的可感知阈值。不同材料、色块面积、印刷方式和产品用途可能需要另行商定规则。“平均 ΔE00 ≤ 2.0”也不同于每一点均须达标：明显缺陷可能被平均值掩盖。

假设这份虚构打样记录为 1.2、1.8、2.3。依预先约定的规则，该样不合格：第三点超过 2.0。即使三个值都在容差内，也不代表自动签字；仍须在约定光线下检查整体外观、网点均匀性、光泽，以及打样与实物之间可能存在的差异。反之，如果合同包含数值条件，“看起来差不多”也不能取消该条件。

仪器无法独自决定的事项

两种材料可能在一种光源下匹配，在另一种光源下却不同，这是同色异谱的一种情形。对于同一包装上的标签、瓶盖和织带，应在控制光源与常见商店照明下比较实物。聊天软件中的照片能记录整体构图，却不能充当颜色标准：相机、图像处理和显示屏都会引入转换。对于透明或光亮表面，应预先约定角度、背景和测量几何，否则被测物本身的外观就会变化。

测量只回答一个有限问题：按选定程序测得的两个样品相差多少？它无法回答包装是否会在货架上醒目、颜色是否符合受众预期，或印刷色块上的白字是否易读。这些问题要用其他方法检查：结合情境查看稿件、开展用户研究并评估可读性。良好的流程不会把实物与标准样的一致性和营销效果混为一谈。

随最终稿件交付的资料

除文件外，还应提供已批准样品编号、配置文件和目标印刷条件、材料与表面处理、约定的观察照明、测量条件及几何、公式与计算参数、测量点位置、验收规则和签样负责人。记录日期、批次号和测量值。再次下单时，团队就能把新批次与同一个可核验标准比较，而不是依赖对旧显示器颜色的记忆。

返回目录 ↑

附录

附录：颜色与证据地图

以下 HEX 是作者制作的 sRGB 屏幕示例，并非实验刺激的复现。“红色”和“蓝色”等类别包含许多不同刺激。对一般颜色词得出的结果不能自动推广到狭窄色相范围。

如何阅读本地图

有支持的关联指参与者回答中反复出现的联系。初步效应指特定实验测量到的结果。证据混合表示概括时须格外谨慎。无单独依据表示现有综述文献中存在空缺，并非证明效应不存在。这些状态不是颜色效力的数值等级。

情绪关联的主要依据是 Jonauskaitė 与 Mohr，2025 [62]：这是一篇系统综述，并非针对特定 HEX 效应的单项实验。文化方面见 Jonauskaitė 等，2020 [63]。其他来源列于下方专题矩阵。

20 个颜色家族与范围

家族 / sRGB 示例	综述文献中的情绪对应	状态	对设计师的限制
红 `#D92D20`	爱与愤怒；高唤醒	一般类别的有支持关联	不指定情绪方向或行动
酒红 `#7F1D1D`	此范围没有单独的概括结论	无单独依据	“红色”的结果没有具体说明酒红
橙 `#EA580C`	积极、高唤醒情绪	一般类别关联	不能证明 CTA 更有效
黄 `#F4C430`	积极、高唤醒情绪	一般类别关联	评价取决于明度和色度
赭黄 `#A16207`	此范围没有单独的概括结论	无单独依据	“自然感”是情境假设
绿 `#15803D`	积极、较低唤醒情绪	一般类别关联	不能证明治疗效果或降低焦虑
橄榄绿 `#65732F`	此范围没有单独的概括结论	无单独依据	军事或自然含义取决于用途
绿蓝 `#0F766E`	积极关联；满意与喜悦	综述中绿蓝类别的关联	低唤醒效应未获得与绿、蓝相同的统计支持
浅蓝 `#38BDF8`	不能自动从一般蓝色中分离出独特情绪特征	推广依据有限	语言中单独命名不等于独特行为效应
蓝 `#1D4ED8`	低唤醒；也出现平静与悲伤	取决于测量指标的一般类别关联	不保证信任或创造力
深蓝 `#172554`	没有单独的普遍特征	无单独依据	明度与色相同时改变
紫罗兰 `#7C3AED`	综述中 purple 类别与力量感相关	一般类别关联	purple 不等同于其他语言中的所有窄义紫色类别
洋红 `#A21CAF`	没有单独的普遍特征	无单独依据	不要把窄义光谱紫色的结论移植过来
粉 `#F472B6`	积极情绪	一般类别关联	不能证明性别偏好是先天的
棕 `#8B5E3C`	综述类别中较常出现负面关联	一般类别关联	不代表所有棕色物体都受负面评价
米色 `#D6C3A5`	此范围没有单独的概括结论	无单独依据	HEX 值无法推出“舒适”
白 `#FFFFFF`	总体汇总中为积极、较低唤醒情绪	一般类别关联	仪式象征与情境会改变解读
灰 `#667085`	消极、较低唤醒情绪	一般类别关联	不能证明灰色界面会降低效率
黑 `#101828`	消极关联与较强力量感（power）	一般类别关联	不应把力量感等同于唤醒度；地位与奢华需单独考察情境
金 `#D4AF37`	未确立平面屏幕色块的单独效应	无单独依据	金属外观还涉及光泽、纹理和定向反射

表中的情绪描述刻意简短；完整综述讨论的是多义关联，不能简化成单一属性。

注意、信任与行为的独立矩阵

问题	来源支持的结论	来源未能证明	依据
情绪是否只取决于色相？	实验也研究了饱和度和亮度，它们会影响评价	从 HEX 推出情绪的普遍公式	Valdez 与 Mehrabian，1994 [121]
注意	应用结论须考虑呈现条件、任务和邻近刺激	按醒目程度排列颜色的普遍榜单	Elliot，2015 [61]
唤醒	控制刺激时，评价和生理指标可能有差异	每个人都会有相同反应	Wilms 与 Oberfeld，2018 [64]
信任	品牌研究考察与品牌个性的关联	“能力 = 信任 = 购买”	Labrecque 与 Milne，2012 [67]
危险	情境理论允许同一颜色在不同任务中含义不同	对任何红色都有先天、普遍的反应	Elliot 与 Maier，2014 [109]
食欲	应区分预期味道改变与实际消费改变	对任何食物，“红色增加食欲”或“蓝色抑制食欲”	Spence，2011 [102]：跨感官对应的一般综述；此处未确立普遍直接的食欲效应
吸引力	元分析讨论结果异质性和相近复现失败	必然增强吸引力或导致实际性行为	Lehmann、Elliot 与 Calin-Jageman，2018 [135]
认知工作	红色的一般效应证据有限	普遍建议用红色吸引注意或用蓝色促进创造力	Gnambs，2020 [66]
文化	关联既有相似处，也存在与语言和地理相关的差异	固定不变的国家心理画像	Jonauskaitė 等，2020 [63]

返回目录 ↑

来源

编号对应正文引用。链接可能指向介绍、摘要或节选，并非均可公开访问全文。

阅读指南

简明词汇表

主题索引

第 1 章 作为现象的颜色

为什么本章从一只白杯子讲起

刺激与知觉

为什么不能把颜色完全归于物体

一个物体，三份记录

请记住

第 2 章 电磁辐射

波长、频率与能量

三个计算示例

为什么强度不等于光子能量

材料中发生了什么

给设计师的提示

第 3 章 可见光谱与颜色名称的边界

可见范围从哪里开始，到哪里结束

光谱连续，名称离散

为什么不存在通用的 wavelength → HEX 转换

光谱紫色与品红色

检查插图

第 4 章 光谱功率分布

颜色始于一个函数

如何阅读图表

看起来同样白，光谱可能不同

反射信号的教学模型

向供应商索取什么

第 5 章 反射与吸收

入射光去了哪里

表面颜色与高光

为什么颜料不会像光束一样相加

白色与黑色也是材料

第 6 章 透明、半透明与滤光片

光通过材料，不代表保持原样

两片滤光材料依次叠放

Alpha 通道与真实玻璃

如何向客户描述材料

常见错误

第 7 章 散射：蓝天与红色日落

光会改变方向

估算差异的量级

为什么天空照片不能充当光谱标准

散射与材料观感

如何检查说明是否准确

第 8 章 折射、色散与彩虹

为什么光线会改变方向

色散带来什么

棱镜不会给光“上色”

图像制作中的错误

练习

第 9 章 干涉与薄膜颜色

无色薄膜如何呈现颜色

为什么公式需要附带条件

颜色随角度变化

虹彩与无障碍设计

不能从示意图中推出什么

第 10 章 结构色

由材料结构产生的颜色

如何研究这种着色

设计任务书需要增加什么

屏幕示意与实物效果

为什么本章结束物理基础导论

第 11 章 为什么要测量颜色

从主观印象到可验证的条件

作者示例：一个品牌，三种媒介

记录精度与认知精度

最低限度的颜色记录

第 12 章 色度学

这门学科测量什么

从样品到坐标

实测、计算与转换

色度学不作什么保证

第 13 章 标准观察者

作为数学约定的观察者

为什么只写厘米还不够

比较错误如何产生

网站或研究中应注明什么

第 14 章 颜色匹配函数

为什么需要三条曲线

积分如何变成表格

第 1 章　作为现象的颜色

第 2 章　电磁辐射

第 3 章　可见光谱与颜色名称的边界

第 4 章　光谱功率分布

第 5 章　反射与吸收

第 6 章　透明、半透明与滤光片

第 7 章　散射：蓝天与红色日落

第 8 章　折射、色散与彩虹

第 9 章　干涉与薄膜颜色

第 10 章　结构色

第 11 章　为什么要测量颜色

第 12 章　色度学

第 13 章　标准观察者

第 14 章　颜色匹配函数

第 15 章　CIE 1931 XYZ

第 16 章　色度图

第 17 章　xyY

第 18 章　CIELAB

第 19 章　LCh

第 20 章　CIELUV

不要混淆 u、v 与 u′、v′

第 21 章　ΔE：色差

第 22 章　刚可察觉差异

第 23 章　孟塞尔色彩系统

第 24 章　自然色彩系统（NCS）

第 25 章　奥斯特瓦尔德系统

第 26 章　RGB

第 27 章　CMYK

第 28 章　HSL 与 HSV