设计师色彩理论：优秀配色方案背后的体系
面向专业设计师的色彩理论：色彩轮、色彩和谐、感知、心理学、可访问性，以及现代设计系统如何将所有这些转化为最终产品。
色彩理论的教学方式如同艺术史概论，而实践方式却如同建筑工程。色轮、和谐色、互补色。冷暖色调。
“红色代表激情。”这些是大多数设计师在学校里接触到的理论，但几乎没有一项能在实际产品界面中得到应用。
真正需要的是一套完整的理论体系。一个层层递进的系统，从人眼如何感知色彩开始，经过色轮及其和谐色，深入到对比和层级关系，再到心理学和文化因素，最终构建出色彩方案，并最终应用于交付作品的元素和设计系统。如果跳过任何一个环节，色彩方案在 Figma 中看起来不错，但在生产环境中却会彻底崩溃。
本文就是这套完整的理论体系。每一层都有其对应的 Brainy 论文进行更深入的探讨。本文将它们连接起来。
色彩理论真正需要你解决的问题
色彩理论并非一套美学规则，而是一套视觉、感知和系统性思维的体系，所有这些要素必须协同运作，才能最终交付出一个完整的色彩方案。简而言之：人类的视觉很奇特，色彩是物理的，设计师必须创作出能在数百种设备和数十种场景下，让数百万用户都能正常使用的作品。理论是我们用来思考这个问题的词汇。它不是一套教条，而是一套共享的概念，能帮助你从“感觉不对劲”发展到“强调色和背景色冲突，14pt 的对比度不够”。
图层是特意分层设计的。每一层都回答一个不同的问题。
| 图层 | 它回答的问题 |
|-------|-------------------------|
| 感知 | 眼睛在实际环境中是如何感知这种颜色的？ |
| 色轮 | 这些颜色之间的色调关系是什么？ |
| 和谐度 | 这些颜色感觉协调还是冲突？ |
| 对比度 | 这个图案是否清晰易读、易于辨认、易于点击？ |
| 调色板 | 这个品牌或产品有哪些常用颜色？ |
| 系统 |这些颜色在大规模应用中如何保持一致？|
| 可访问性 | 系统中的每种颜色组合是否都适用于所有用户？|
每一层都至关重要。缺乏感知思考的调色板设计在实际应用中会失效。缺乏可访问性的系统构建在审核中会失败。
缺乏调色板逻辑的色彩搭配在大规模应用中会失效。各层叠加，这也是为什么正确配色能带来复利效应的原因。
色轮、色彩搭配及其用途
色轮 是色调关系的模型，而色彩搭配则是选择人眼认为相关的颜色组合的快捷方式。
大多数设计师学习色轮时只将其理解为原色-二次色-三次色三角形，之后便不再使用。这实在是一种浪费。色轮是判断哪些颜色搭配和谐、哪些颜色相互冲突的最快捷径，这在每次向调色板、图表或标记中添加新颜色时都至关重要。
四种配色方案在产品和品牌设计中都发挥着重要作用。
互补色
色轮上相对的颜色。例如蓝色和橙色、红色和绿色、紫色和黄色。互补色能够最大程度地增强两种色调之间的视觉张力。
这对于瞬间冲击力（例如海报、主图、运动服）非常有效，但对于长时间的界面使用则非常不利，因此你几乎看不到纯粹的互补色产品配色方案。在用户界面设计中，互补色会被柔化：一种色调占据主导地位，另一种色调则作为低调的点缀出现。
邻近色
色轮上相邻的颜色。例如天蓝色、蓝色、蓝紫色。邻近色配色方案给人以和谐宁静的感觉。
它们是大多数现代设计的基础。品牌系统 但它们也存在一个问题：如果色调之间的明度对比度不足，邻近色配色方案可能会显得单调乏味。将 色彩调色板 视为一个整体，而非彼此对立的竞争对手，才能真正发挥相似配色的作用。
三色配色和分裂互补色配色：被低估的配色组合
互补色和相似色配色在设计院校中备受关注。接下来的两种配色方案却鲜为人知，但对于职业设计师而言，它们往往更加实用。
三色配色
色轮上均匀分布的三种颜色。例如，红-黄-蓝，橙-绿-紫。三色配色给人以活泼灵动、充满活力的感觉，因此常用于儿童品牌、体育和娱乐领域。
在产品设计中，纯粹的三色配色并不常见，因为它难以平衡。而受三色配色启发的配色方案（一种主色调，两种辅色调）则随处可见。
分裂互补色配色
一种颜色加上与其互补色相邻的两种颜色。例如，蓝色加上黄橙色和红橙色。分裂互补色保留了互补色的大部分对比度，同时减少了对比度带来的紧张感。这种被低估的和谐感，在你仔细观察许多优秀的品牌系统时都会发现。
和谐感是工具，而非答案。你不会仅仅因为说“我们来做三色组合”就选择品牌色调。你应该运用和谐感来推理各种组合方案，并找出那些已经奏效的组合。
感知永远胜过理论
同一个按钮上的红色，在中性页面上会显得很紧急，在橙色页面上会显得很嘈杂，而在深红色页面上则会显得难以辨认，而这些差异都无法用颜色轮盘来解释。
语境是色彩的倍增器。颜色本身并没有固定的含义、亮度或可读性。它与它周围的元素、屏幕上前一秒的内容、用户正在观看的显示器以及照射到显示器上的光线都息息相关。脱离感知的理论只是空洞的理论。
三种值得了解的感知效应。
同时对比。同样的灰色，在黑色旁边看起来更浅，在白色旁边看起来更深。这意味着：你在白色工作室背景下选择的品牌颜色，放在深色背景上会呈现出完全不同的效果。你必须在实际生产环境中测试颜色，而不是孤立地测试。
色适应。眼睛会在500毫秒或更短的时间内适应环境颜色。如果一个页面在暖橙色背景上停留了五秒钟，然后滚动到中性内容区域，那么用户会感觉该内容区域的颜色比实际颜色略冷。用户的感知在不知不觉中发生了变化。
明度聚类。眼睛会将亮度相近的元素归为一组，将暗度相近的元素归为一组。这就是层级结构的运作方式。优秀的设计会更多地利用明度对比而非色相对比，因为明度是视觉系统首先处理的信息。
色彩心理学：证据与迷信
色彩心理学是真实存在的，但大多数所谓的色彩心理学都是老生常谈的谬论，因此设计师需要区分证据和民间传说。
关于洛约拉大学品牌认知度研究（色彩驱动高达 80% 的品牌认知度）、饱和度对感知紧迫性的影响、对深色模式偏好的影响以及文化色彩联想等方面的研究都是有价值的。这些研究很有价值。但同时，也有大量博客文章声称“红色能提高 21% 的转化率”，这些说法经不起推敲。这些文章毫无用处。
快速检验：任何不包含语境、文化或受众的色彩心理学论断都是迷信。色彩的含义始终与语境相关。在美国金融科技领域，绿色代表金钱；在健康领域，绿色代表自然，这两种解读在各自的语境中都是正确的。
要全面了解什么是真实色彩、什么是回收利用的色彩，以及如何在品牌和产品设计中真正应用色彩心理学，请参阅 设计中的色彩心理学 文档，它提供了基于实证的框架。
为什么比例规则在产品层面失效
60-30-10 法则 及其类似方法解决的是单一表面的问题，而产品设计并非单一表面。
室内设计发明了 60-30-10 比例来回答“每种颜色在墙壁、家具和装饰物上应该占多少比例”。这可以清晰地映射到一个房间。但它并不适用于拥有数百个表面、数十种状态、浅色模式和深色模式，以及使用各种设备的用户的数字产品。
现代产品色彩不再遵循比例，而是根据角色来区分。表面、内容、装饰、状态、语义。每个角色都有一个 设计代币，每个主题对应一个不同的原始值。这是 60-30-10 的替代方案，也是唯一可扩展的方案。
关于比例失效的原因以及基于角色的标记系统在实践中的具体应用，请参阅 60-30-10 规则被打破 论文。
可访问性现已成为色彩理论的一部分
WCAG 和 APCA 将可访问性从“QA 最后审核的内容”提升为色彩系统本身的属性。
长期以来，可访问性一直被视为一个独立的话题。设计师选择调色板以追求美观，QA 最后检查比例，进行一些调整，然后大家继续进行下一个项目。这种工作流程无法扩展。现在，每个发布的设计系统都在标记层编码了可访问性，这意味着调色板本身必须从一开始就根据 对比度 和感知阈值进行设计。
简而言之：WCAG 2.2 AA 是合规性最低标准（主体 4.5:1，大文本和非文本 UI 3:1）。APCA 是一种感知算法，它与实际可读性更相关，并被提议用于 WCAG 3。实际产品会同时追求这两个标准。
如需了解设计师对 WCAG 比例、APCA 以及设计系统如何标记对比度的完整理解，请参阅 易于理解的色彩对比度 论文，该论文对此进行了全面阐述。
构建调色板：设计师的工作流程
一个能够交付并可扩展的调色板是逐层构建的，而不是一蹴而就的。
有效的流程是按部就班进行的。每一层都对下一层有所约束，这样才能保持调色板的连贯性，而不是沦为一系列零散的颜色组合。
-
从中性色阶开始。 构建 8 到 12 个灰色（或接近灰色，通常略微偏向品牌色温）色阶。大多数实际界面都使用中性色。这是所有其他层级的基础。
-
选择品牌强调色。 选择一种锚定色，即读者单独看到时会联想到该品牌的颜色。关键在于克制。将强调色层级留给品牌时刻、主要操作和高信号元素。
-
添加语义颜色。 成功、警告、关键、信息。这些颜色是功能性的，而非装饰性的，它们需要在浅色和深色模式下都能正常工作，并且不会带有品牌个性。将它们视为实用功能，而不是装饰。
-
扩展到状态层级。 悬停、聚焦、按下、禁用、选中。这些颜色通常源自其他层级（例如，悬停时使用较深的强调色，禁用时使用柔和的中性色），但它们是独立的标记。
-
所有内容都进行标记化。 每个发布的配色方案都需要一个角色名称。例如：
text-on-accent、bg-subtle、border-default。如果设计师无需标记就能直接使用原始颜色，那么调色板就已经存在泄露风险。 -
测试时要注重感知，而不仅仅是数学计算。 首先是 WCAG 比例，其次是 APCA 评分，然后是实际应用测试：灰度模式、斜视测试、低光预览，以及非品牌相关人员的五秒钟反应测试。
-
将深色模式作为一套独立的标记集发布。 不是滤镜，也不是反转。而是一个真正的独立调色板，能够将相同的标记解析为不同的值。
按顺序构建，而非一次性完成
顺序至关重要，因为中性色在任何页面上都扮演着举足轻重的角色。如果设计师一开始就使用强调色，最终可能会围绕一个可能站不住脚的决定来构建整个调色板。先从柔和的底色开始，最后再添加鲜艳的底色。
设计系统作为色彩理论的应用
如今，色彩理论的最佳参考资料并非教科书，而是那些大规模发布产品的品牌所公开的设计系统文档。
这些系统将色彩堆栈的每一层都融入了默认设置中。它们也是免费、开源的，并且由每天参与产品色彩开发的人员维护。
Material Design 3
Material Design 3 对色彩理论的应用阐述最为清晰明确。每个角色都有一个对应的 on- 元素（位于该角色之上的文本/图标），其色阶基于色相-色度-色调而非 HSL 色彩空间，整个系统旨在根据单一源颜色动态调整主题。
从中可以学到什么：on- 模式。当设计师为按钮选择 primary 时，系统已经知道该按钮上的文本应该是什么颜色。可访问性和对比度理论已融入命名之中。
Radix Colors
Radix 为每个色相提供 12 个色阶，每个色阶都对应一个特定的角色（应用背景、柔和背景、UI 元素、悬停、聚焦、激活、纯色、文本、高对比度文本）。它实际上是一个与对比度阶梯相结合的 色彩和谐 参考。当设计师需要高对比度文本，并且知道它能通过AA级对比度测试时，他们会选择第11级。
从中可以学到什么：编号阶梯。赋予等级中的每一级一个角色，就能消除每次设计评审中“我应该用哪种灰色”的争论。
Adobe Spectrum：尺度上的感知一致性
Material 和 Radix 在角色层面解决了颜色问题。Adobe 更进一步，基于感知模型构建等级本身，从而确保色调变化时对比度关系保持不变。
请访问 spectrum.adobe.com 查看实时画面。
Spectrum 使用感知均匀的等级，因此具有相同等级编号的两个标记在所有色调中都具有相同的视觉权重。这意味着一个主题可以从蓝色旋转到橙色而不会破坏对比度，因为感知关系在等级层面上是锁定的。
从中可以学到什么：感知一致性。如果你的色彩尺度基于 OKLCH 或 HSLuv 等感知模型，那么可访问性就能跨品牌主题通用，而无需针对每种新颜色重新验证。
常见问题解答
作为一名设计师，我该如何真正学习色彩理论？
从上到下阅读色彩理论框架（感知、色轮、和谐、对比、调色板、系统），然后按顺序将其应用到实际项目中。没有实践的理论会在一周内遗忘。而将理论应用于已发布的调色板则能牢记于心，因为反馈立竿见影。首先阅读 Josef Albers 的《色彩的相互作用》来学习感知，花一个下午的时间研究 Radix Colors 的文档来学习应用对比阶梯，然后使用上述框架构建一个实际的调色板。
我需要了解科学原理吗？还是只需要使用工具？
即使不了解光的物理原理或视锥细胞的生物学原理，你也可以发布产品。但如果你不了解感知、对比和基于角色的系统思维，你就无法发布产品。
工具负责计算，设计师负责判断。完全依赖工具的设计师无法判断工具何时出错（这种情况经常发生，尤其是在 WCAG 2 计算方面）。
新手设计师在色彩方面最常犯的错误是什么？
先选强调色。强调色是调色板中最醒目的颜色，围绕一个醒目的颜色来构建调色板几乎总是会导致整个调色板都显得杂乱无章。
从中性色开始。让强调色成为你最后确定的元素。如果其他颜色搭配合理，你随时可以更换强调色。
色彩理论并非可有可无，而是不可或缺
色彩理论是设计中一个不容置疑且人人都在应用的部分，无论他们是否意识到这一点。
设计师选择“这个珊瑚色，感觉很合适”就是在应用色彩理论。产品经理询问“我们能让按钮更醒目吗？”就是在提出一个色彩理论问题。用户抱怨“这个页面感觉很杂乱”就是在反映明度对比度的问题。
理论早已存在。问题在于，你是有意识地运用它，还是事后才做出反应。
运用技术栈，让无形的事物变得清晰可见。你不再只是挑选颜色，而是开始设计调色板。你不再只是选择色调，而是开始设计系统。你不再只是猜测可访问性，而是开始交付。
回报是成倍增长的。通过技术栈设计的调色板能够轻松实现品牌重塑、轻松过渡到深色环境、轻松扩展，并顺利通过审核。而仅仅凭感觉选择的调色板则无法做到这些，并且每次需要用到这些功能时，都会浪费团队的时间。
学习技术栈。运用技术栈。交付技术栈。
想要一个真正能够端到端发挥作用的颜色系统吗？Brainy 从感知到标记构建调色板，并内置了可访问性。
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
