January 1, 2020

色彩设计方法论：从感性美学到理性系统

如果说设计是一门语言，那色彩就是其中最有感染力的词汇。

你有没有想过：

• 为什么快餐店大多用红色和黄色？
• 为什么科技公司偏爱蓝色？
• 为什么奢侈品喜欢用黑白金？
• 为什么医院总是白色和浅蓝色？

这不是巧合。色彩背后，有一整套心理学、生理学、文化学的逻辑。

好的配色，不是"我觉得好看"，而是"用得对、用得准、用得有效"。

这篇文章，我们从色彩基础理论出发，一路聊到专业的色彩系统搭建。

色彩的底层认知：为什么颜色会影响我们？

在讲配色之前，我们先搞清楚一个问题：颜色到底是什么？它为什么能影响我们的情绪和行为？

颜色不是客观存在的？

说出来你可能不信——颜色，其实是我们大脑"脑补"出来的。

客观世界里，只有不同波长的电磁波，没有"颜色"这种东西。 是我们的眼睛接收到这些电磁波，然后大脑把它们"翻译"成了各种颜色。

• 波长 700nm 左右 → 大脑翻译成"红色"
• 波长 550nm 左右 → 大脑翻译成"绿色"
• 波长 450nm 左右 → 大脑翻译成"蓝色"

所以严格来说，"颜色"是一种主观感受，不是客观属性。

但正是因为它是主观的，它才能直接作用于我们的情绪和心理。

色彩的生理影响

色彩对人的影响，有一部分是生理性的——是写在我们基因里的。

比如红色：

• 看到红色，心跳会加快，血压会升高
• 注意力会更集中，反应会更快
• 这是因为红色和"血"、"火"、"危险"联系在一起——我们的祖先看到红色就会警觉

比如蓝色：

• 看到蓝色，心跳会减慢，人会更平静
• 会让人联想到天空、大海——开阔、自由、平静
• 所以医院、办公室喜欢用蓝色，能让人放松

比如绿色：

• 绿色对眼睛最友好，是最"舒服"的颜色
• 会让人联想到大自然、植物——生命、健康、放松

这些都是人类进化了几百万年形成的本能反应，不受理性控制。

色彩的心理影响

除了生理反应，色彩还有心理影响——这部分更多是文化和经验塑造的。

比如：

• 红色 = 热情、喜庆、危险、停止
• 黄色 = 阳光、快乐、警告
• 蓝色 = 信任、专业、冷静、科技
• 绿色 = 自然、健康、安全、环保
• 紫色 = 高贵、神秘、浪漫
• 黑色 = 高端、严肃、神秘、死亡
• 白色 = 纯净、简洁、医疗、婚礼
• 金色 = 奢华、财富、品质

这些联想，不是天生的，而是我们在生活中一点点学到的。 但因为大家都在同样的文化里长大，所以这些联想就成了"共识"。

好的设计师，就是利用这些"共识"，通过颜色来传递信息、调动情绪。

色彩的文化差异

注意，色彩的含义不是全球通用的——不同文化里，同一种颜色可能有完全不同的含义。

比如：

• 白色：在西方是纯洁、婚礼；在中国传统里是丧葬、哀悼
• 红色：在中国是喜庆、好运；在西方也有爱情、危险的意思，但没有中国这么强的"喜庆"含义
• 紫色：在西方是高贵（因为古代紫色染料很贵）；在有些文化里是死亡
• 黄色：在中国古代是皇家专属，最尊贵的颜色；在西方更多是阳光、快乐，也有警告的意思

做面向全球用户的设计时，一定要注意这些文化差异。 但如果主要是面向国内用户，那按照我们的文化习惯来就好。

色彩基础理论：设计师的基本功

要做色彩设计，得先搞懂一些基础概念。

色彩三要素

任何一个颜色，都可以用三个维度来描述：色相、明度、饱和度。

这就是色彩三要素（HSL / HSV）。

1. 色相（Hue）

• 就是我们平时说的"红橙黄绿青蓝紫"
• 是颜色的"种类"
• 色相环上 0-360 度，每个角度对应一种色相

2. 明度（Value / Lightness）

• 就是颜色的"明暗程度"
• 越亮越接近白，越暗越接近黑
• 0% 是黑，100% 是白

3. 饱和度（Saturation）

• 就是颜色的"鲜艳程度"
• 饱和度越高，颜色越纯、越艳
• 饱和度越低，颜色越灰、越"脏"
• 0% 是纯灰色，100% 是最纯的颜色

理解了这三个维度，你就能精准地描述和调整任何一个颜色了。

比如：

• "亮一点" → 提高明度
• "艳一点" → 提高饱和度
• "偏蓝一点" → 调整色相往蓝色方向

色环与色彩关系

把色相按顺序排成一个圈，就是色环（Color Wheel）。

色环是配色的基础工具——不同颜色在色环上的位置关系，决定了它们搭配起来好不好看。

常见的色彩关系：

1. 同类色（Monochromatic）

• 同一个色相，不同的明度和饱和度
• 比如：浅蓝、天蓝、深蓝、藏蓝
• 特点：非常和谐、统一，但可能有点单调

2. 邻近色（Analogous）

• 色环上相邻的 2-3 个颜色
• 比如：红 + 橙、蓝 + 绿、黄 + 黄绿
• 特点：和谐、舒服、有层次感，是最容易配好看的

3. 互补色（Complementary）

• 色环上正对面的颜色
• 比如：红 + 绿、蓝 + 橙、黄 + 紫
• 特点：对比强烈、有冲击力、很跳
• 注意：用不好会很土、很刺眼

4. 分裂互补（Split Complementary）

• 一个颜色 + 它互补色两边的颜色
• 比如：红 + 蓝绿 + 黄绿
• 特点：有对比，但比互补色更柔和、更好控制

5. 三角色（Triadic）

• 色环上呈等边三角形的三个颜色
• 比如：红 + 黄 + 蓝、橙 + 绿 + 紫
• 特点：色彩丰富、有活力、平衡感好
• 注意：控制不好会很乱

6. 四角色（Tetradic）

• 色环上呈矩形的四个颜色
• 特点：颜色最多、最丰富，但也最难控制

这些色彩关系，是配色的"套路"—— 不知道怎么配的时候，从这些套路里选，一般不会太差。

色彩模式：RGB vs CMYK vs HSL

做设计的时候，经常会遇到不同的色彩模式。它们是什么意思？什么时候用哪个？

1. RGB

• R = 红，G = 绿，B = 蓝
• 是"加色模式"——颜色越叠加越亮
• 用于：屏幕显示（电脑、手机、电视）
• 数值范围：0-255，或者 0%-100%

2. CMYK

• C = 青，M = 品红，Y = 黄，K = 黑
• 是"减色模式"——颜色越叠加越暗
• 用于：印刷（纸张、海报、包装）
• 数值范围：0%-100%

3. HSL / HSV

• H = 色相，S = 饱和度，L/V = 明度
• 不是用来输出的，是用来"调颜色"的
• 设计师调颜色的时候，用 HSL 比 RGB 直观得多

4. 十六进制（HEX）

• 比如：#FF0000（红色），#FFFFFF（白色）
• 本质上还是 RGB，只是写法不同
• 用于：CSS、网页设计

怎么选？

• 做屏幕设计 → RGB / HEX
• 做印刷设计 → CMYK
• 调色的时候 → HSL

注意：RGB 的色域比 CMYK 大——有些在屏幕上很好看的颜色，印刷是印不出来的。所以做印刷品的时候，一定要在 CMYK 模式下调色。

配色的底层逻辑

知道了基础理论，那具体怎么配色呢？

好的配色，不是碰运气，而是有方法的。

60-30-10 法则

这是最经典、最实用的配色法则。

60% 主色 + 30% 辅助色 + 10% 强调色 = 舒服的配色

什么意思？

• 主色（60%）：画面中占比最大的颜色，决定了整体的色调和氛围
• 辅助色（30%）：用来搭配主色的颜色，增加层次感和丰富度
• 强调色（10%）：用来点缀、突出重点的颜色，面积很小但很醒目

为什么是 60-30-10？

• 60% 的主色，保证了整体的统一和和谐
• 30% 的辅助色，增加了层次，不会太单调
• 10% 的强调色，画龙点睛，有视觉焦点

这个比例不是绝对的，但大概是这个感觉。 新手配色，按照这个比例来，基本不会出大错。

主色的选择

主色是配色的灵魂。选对了主色，整个设计就成功了一半。

怎么选主色？

从品牌调性出发 不同的颜色，传递不同的感觉。你的品牌是什么调性，就选什么颜色。

常见的品牌主色选择：

• 蓝色：科技、信任、专业、稳定 → 金融、科技、企业
• 红色：热情、活力、喜庆、刺激 → 餐饮、零售、娱乐
• 绿色：自然、健康、环保、安全 → 健康、农业、环保
• 橙色：活力、温暖、友好、年轻 → 电商、社交、教育
• 紫色：高贵、神秘、优雅、创意 → 美妆、文创、艺术
• 粉色：甜美、可爱、浪漫、女性 → 美妆、母婴、少女向
• 黑色：高端、严肃、酷、极简 → 奢侈品、高端品牌
• 白色：纯净、简洁、医疗、科技 → 医疗、科技、极简品牌

从目标用户出发 你的用户是谁？他们喜欢什么颜色？

• 年轻人 → 鲜艳、活泼的颜色
• 高端人群 → 低饱和度、高级感的颜色
• 儿童 → 明亮、多彩的颜色
• 女性用户 → 粉色、紫色、柔和的颜色
• 男性用户 → 蓝色、黑色、深色

从行业特征出发 每个行业都有一些"默认配色"——

• 科技 = 蓝
• 医疗 = 白 + 蓝 + 绿
• 餐饮 = 红 + 黄
• 环保 = 绿
• 金融 = 蓝 + 金

这些"行业色"不是必须遵守的，但它们是用户的"心智预期"——你用了，用户就会觉得"对，这就是这个行业的感觉"。

当然，反其道而行之也可以——比如一个科技公司用粉色，反而更容易跳出来。但这需要勇气，也需要匹配的品牌策略。

辅助色的搭配

主色选好了，接下来选辅助色。

辅助色的作用是：

• 增加色彩的丰富度
• 让画面更有层次
• 辅助传达信息（比如成功是绿色、警告是黄色、错误是红色）

辅助色怎么选？

方法一：从主色衍生

• 调整主色的明度和饱和度，得到几个深浅不同的版本
• 最简单、最不会出错的方法
• 适合：简约、统一的风格

方法二：邻近色搭配

• 选主色旁边的 1-2 个颜色作为辅助色
• 和谐、舒服、自然
• 适合：想要和谐、不想要太强对比的设计

方法三：互补色点缀

• 选主色的互补色作为强调色（注意是强调色，不是辅助色）
• 对比强烈，很突出
• 注意：面积一定要小，不然会很刺眼

辅助色的数量： 一般 2-4 个就够了。 太多了会乱，太少了会单调。

中性色的重要性

很多人配色的时候，只关注彩色，忽略了中性色。

但实际上，中性色才是配色的基石。

什么是中性色？

• 黑、白、灰
• 以及各种"带颜色的灰"（比如暖灰、冷灰、米灰）

中性色的作用：

1. 衬托彩色：彩色放在中性色上，才会显得好看、突出
2. 提供呼吸感：全是彩色会让人很累，中性色能让眼睛休息
3. 保证可读性：文字一定要用中性色（黑、深灰），才好读
4. 提升高级感：越高端的设计，中性色用得越多

高级感的秘诀： 很多人觉得"高级感"是玄学，其实很简单—— 低饱和度 + 多中性色 + 高对比。

• 颜色不要太艳
• 大面积用黑白灰
• 重点的地方用高对比

就这么简单。你去看那些奢侈品的设计，几乎都是这个路数。

色彩对比的三种类型

配色离不开对比。没有对比，就没有层次，就看不清重点。

色彩对比主要有三种：

1. 色相对比

• 不同色相之间的对比
• 比如：红 vs 绿，蓝 vs 橙
• 对比越强，视觉冲击力越强

2. 明度对比

• 颜色明暗的对比
• 比如：白 vs 黑，浅蓝 vs 深蓝
• 这是最重要的对比——可读性主要靠明度对比

3. 饱和度对比

• 颜色鲜艳程度的对比
• 比如：艳红 vs 灰红，纯蓝 vs 灰蓝
• 鲜艳的颜色会往前跳，灰的颜色会往后退

怎么用对比？

• 想突出什么，就提高它的对比（明度对比、饱和度对比）
• 想弱化什么，就降低它的对比
• 整个画面要有对比的节奏——有强有弱，有主有次

其中，明度对比是最重要的。 因为即使是色盲，也能感受到明度的差异。 而且，文字的可读性，几乎完全取决于明度对比。

品牌色彩系统搭建

个人作品配色，可以靠感觉。 但品牌配色，必须靠系统。

一个专业的品牌色彩系统，不只是"选几个好看的颜色"，而是一整套可以复用、可以落地、可以保证一致性的色彩规范。

什么是品牌色彩系统？

品牌色彩系统，就是把品牌用到的所有颜色，整理成一套有规则、有层级、有使用规范的系统。

它包括：

• 核心色板：主色、辅助色、强调色、中性色
• 语义色板：功能色（成功、警告、错误、信息）
• 色彩层级：每个颜色用在哪里、用多少比例
• 使用规范：什么地方用什么颜色、什么地方不能用什么颜色
• 无障碍规范：对比度要求、色盲友好

为什么需要系统？

• 保证一致性：不管是谁做设计，用出来的颜色都是对的
• 提高效率：不用每次都想"用什么颜色"，直接从系统里选
• 方便落地：开发可以直接用色值，运营可以直接按规范做图
• 可扩展性：新增场景、新增产品，都能从系统里找到对应的颜色

主色（Primary Color）

主色是品牌最核心的颜色，是品牌的视觉标志。

主色的要求：

1. 符合品牌调性：颜色传递的感觉，要和品牌一致
2. 有识别性：最好能和竞争对手区分开
3. 适用性广：在各种场景下都能用（背景、文字、图标……）
4. 延展性好：可以调出深浅不同的版本

主色的变体： 一个主色，通常会衍生出多个版本——

• 主色：标准的、最常用的版本
• 浅色版本：用于背景、hover 状态
• 深色版本：用于深色模式、强调文字

比如，蓝色主色可以衍生出：

• 主蓝：#1677ff
• 浅蓝：#e6f4ff
• 深蓝：#0958d9

这样，在不同场景下，都有合适的蓝色可以用。

辅助色（Secondary Color）

辅助色是用来搭配主色的颜色。

辅助色的数量： 一般 2-4 个就够了。 太多了会乱，太少了不够用。

辅助色的作用：

1. 丰富色彩层次：让设计不单调
2. 区分不同功能/模块：比如不同的产品、不同的功能模块，用不同的辅助色
3. 表达情绪和状态：比如成功用绿色，警告用黄色

辅助色怎么选？

• 和主色要有一定的对比，但对比不能太强
• 可以是邻近色，也可以是分裂互补色
• 饱和度最好和主色差不多，保持整体风格统一

中性色（Neutral Color）

中性色是使用频率最高的颜色，但也是最容易被忽略的。

中性色包括：

• 白色
• 各种深浅的灰色
• 黑色
• 以及带色相的灰色（暖灰、冷灰、米灰）

中性色的层级： 中性色不是只有"黑、白、灰"三个——它是一个连续的色阶。

通常会定义 5-10 个灰色色阶：

• 白色：#ffffff
• 很浅的灰：#fafafa（背景）
• 浅灰：#f5f5f5（分割线、浅背景）
• 中灰：#d9d9d9（边框）
• 深灰：#8c8c8c（次要文字）
• 更深的灰：#595959（正文文字）
• 接近黑的灰：#262626（标题文字）
• 纯黑：#000000

为什么要这么多灰色？ 因为不同的场景需要不同深浅的灰——

• 背景用最浅的灰
• 边框用中灰
• 次要文字用深灰
• 正文用更深的灰
• 标题用接近黑的灰

层次感，就是这么来的。

暖灰 vs 冷灰： 灰色不是只有"纯灰"——还可以偏暖或者偏冷。

• 暖灰：带一点黄色/橙色，温暖、亲切、有温度
• 冷灰：带一点蓝色/青色，冷静、科技、高级

选暖灰还是冷灰？看品牌调性——

• 温暖、亲切的品牌 → 暖灰
• 科技、理性的品牌 → 冷灰

功能色（Functional Color）

功能色，也叫语义色——就是用来表达"含义"的颜色。

常见的功能色：

• 成功色：绿色 → 成功、通过、正确、安全
• 警告色：黄色/橙色 → 警告、注意、提醒
• 错误色：红色 → 错误、失败、危险、删除
• 信息色：蓝色 → 信息、提示、链接

这些颜色的含义，是用户的"心智共识"——你不用解释，用户一看就懂。

功能色的使用原则：

1. 含义固定：成功永远是绿色，错误永远是红色，不要乱换
2. 只用在功能场景：功能色是用来"表达状态"的，不是用来装饰的
3. 和品牌色协调：功能色也要调整得和品牌整体风格协调，不要太突兀

比如，同样是绿色成功色——

• 活泼的品牌，可以用鲜艳一点的绿
• 高端的品牌，可以用灰一点、高级一点的绿

色彩层级与使用规范

颜色选好了，还要规定每个颜色用在哪里——这就是色彩层级。

典型的色彩层级：

主色（Primary）

• 用在：主按钮、选中状态、重点强调、品牌露出
• 占比：约 10-30%（根据设计风格调整）

辅助色（Secondary）

• 用在：次要按钮、标签、分类、装饰性元素
• 占比：约 10-20%

功能色（Functional）

• 用在：状态提示、消息通知、表单反馈
• 占比：很少，按需使用

中性色（Neutral）

• 用在：文字、背景、边框、分割线
• 占比：约 60-80%

看到没有？和 60-30-10 法则是对应的—— 中性色是 60% 的基底，主色 + 辅助色是 30%，强调色/功能色是 10%。

暗色模式（Dark Mode）配色

现在越来越多的产品需要支持暗色模式。 暗色模式的配色，不是简单地"把白色换成黑色"——它有自己的逻辑。

暗色模式配色要点：

1. 背景不要用纯黑

• 纯黑（#000000）太暗了，对比度太高，眼睛很累
• 一般用深灰色作为背景，比如 #141414、#1f1f1f

2. 文字不要用纯白

• 纯白（#ffffff）在深色背景上太刺眼
• 一般用浅灰色文字，比如 #f0f0f0、#e5e5e5
• 标题可以亮一点，正文可以暗一点

3. 主色要调整

• 在亮色模式里的主色，放在深色背景上可能太艳、太刺眼
• 需要调低饱和度、或者调整明度
• 让它在深色背景上既清晰又舒服

4. 层级靠"亮度"区分

• 亮色模式里，层级靠"阴影"区分
• 暗色模式里，层级靠"亮度"区分——越亮的越靠上，越暗的越靠下
• 比如：卡片背景比页面背景亮一点，浮层比卡片再亮一点

5. 对比度要达标

• 暗色模式更容易出现对比度不够的问题
• 一定要检查文字和背景的对比度，确保可读性

做好暗色模式，不是"反转一下颜色"那么简单——它需要一整套对应的色彩系统。

色彩系统的工程化实践

在设计系统里，色彩不能只是"一堆色值"——它需要工程化，需要和开发对接，需要能方便地使用和维护。

设计令牌（Design Tokens）与色彩变量

设计令牌（Design Tokens）是设计系统的核心概念之一。 简单说就是：把设计属性（颜色、字号、间距……）变成变量，在设计和代码里共用。

色彩是最适合用 Design Tokens 来管理的。

比如，不用直接写 #1677ff，而是写：

• --color-primary：主色
• --color-success：成功色
• --color-text-primary：主要文字颜色
• --color-bg-page：页面背景色

这样做的好处：

1. 语义化：看名字就知道这个颜色是干嘛的
2. 易维护：要改主色，只需要改一个变量，所有地方都跟着变
3. 一致性：设计和代码用的是同一套变量，不会出错
4. 支持多主题：亮色/暗色模式、不同品牌主题，只要换一套变量就行

色彩 Token 的分层

专业的色彩 Token，通常分三层：

第一层：基础色（Base Color）

• 就是原始的色值
• 比如：--blue-500: #1677ff
• 是"颜料"，不直接用在具体场景

第二层：语义色（Semantic Color）

• 给颜色赋予"含义"
• 比如：--color-primary: var(--blue-500)
• 把基础色和语义绑定起来

第三层：组件色（Component Color）

• 每个组件具体用什么颜色
• 比如：--button-primary-bg: var(--color-primary)
• 最细粒度的变量

为什么要分三层？

• 灵活：想换主色，只要改语义色的绑定，不用改每个组件
• 可扩展：新增一个主题，只要换一套语义色就行
• 好维护：每层有每层的职责，不会乱

色板生成的自动化方法

以前调颜色，全靠设计师的眼睛和感觉。 现在，有很多工具和方法，可以自动化地生成色板。

常见的色板生成方法：

1. 线性插值

• 从最浅到最深，均匀地生成 5-10 个色阶
• 简单直接，但有时候中间的颜色会"脏"

2. HSL 调整

• 固定色相，调整饱和度和明度
• 比线性插值更可控
• 但有时候需要手动微调

3. 贝塞尔曲线调色

• 用贝塞尔曲线来控制颜色的变化轨迹
• 可以生成更自然、更好看的色阶
• 工具：ColorBox、Palettte.app

4. 基于感知的调色

• 考虑人眼对不同颜色的感知差异
• 生成"感知上均匀"的色板
• 工具：OKLCH 色彩空间

推荐的工具：

• Ant Design Colors：蚂蚁的配色工具，可以一键生成色板
• Palettte App：可以调整色板的曲线
• Coolors：快速生成配色方案
• Color Hunt：收集了很多好看的配色
• OkColor：基于 OKLCH 的调色工具

现在的趋势是：越来越多的设计系统开始用 OKLCH 色彩空间来生成色板——因为它更符合人眼的感知，生成的色板更均匀、更好看。

无障碍色彩规范

好的色彩系统，不只是好看——还要能用。

什么叫"能用"？

• 视力不好的人也能看清
• 色盲的人也能分清
• 在各种屏幕上、各种光线下都能看清

这就是色彩无障碍（Color Accessibility）。

1. 对比度要求 文字和背景之间，必须有足够的对比度。

WCAG 2.1 的标准：

• 正文文字：对比度 ≥ 4.5:1
• 大字号文字：对比度 ≥ 3:1
• UI 组件（比如按钮边框）：对比度 ≥ 3:1

AA 级是基本要求，AAA 级是更高要求。

怎么测对比度？

• 工具：WebAIM Contrast Checker、Contrast
• Figma 插件：Contrast、A11y - Color Contrast Checker

2. 色盲友好 世界上大约 8% 的男性是红绿色盲（女性很少）。 如果你的设计只靠颜色来区分信息，色盲用户就会看不懂。

怎么做到色盲友好？

• 不要只靠颜色传递信息，还要加图标、文字、形状
• 比如：错误状态不光是红色，还要有个红色的叉或者感叹号
• 比如：图表不要只用颜色区分，还要用不同的形状或图案

怎么测试？

• 工具：Color Safe、 Coblis
• Figma 插件：Color Blind
• 把设计转成灰度模式，看看还能不能分清

3. 不要用纯黑纯白

• 纯黑（#000）文字在纯白（#fff）背景上，对比度太高了，长时间看会累
• 建议文字用深灰色（比如 #333、#222），背景用白色或极浅的灰
• 既保证了可读性，又更舒服

无障碍不是"加分项"，而是"必选项"—— 它不只是为了障碍人士，也是为了所有用户。 毕竟，谁都会有老的那一天，谁都会有视力下降的那一天。

经典案例分析

案例一：安特卫普六君子之——Dries Van Noten 的色彩美学

Dries Van Noten 是比利时著名的服装设计师，安特卫普六君子之一。 他的设计以大胆的色彩和印花著称。

他的配色有什么特点？

1. 丰富但不杂乱 Dries Van Noten 的设计里颜色很多——

• 各种花
• 各种图案
• 各种颜色叠在一起

但你不会觉得乱，为什么？ 因为他的颜色虽然多，但明度和饱和度是统一的—— 要么都是灰调的，要么都是亮调的。 有统一的基调，再多颜色也不会乱。

2. 意外的色彩组合 他经常用一些"按理来说不好看"的颜色搭配——

• 粉 + 绿
• 橙 + 紫
• 红 + 蓝

但他就是能配得很好看。

秘诀是什么？

• 调整饱和度和明度
• 比如粉 + 绿，把粉色调灰一点、绿色也调灰一点，两个"灰扑扑"的颜色放在一起，就高级了

3. 面料和质感的加持 服装的配色，不只是颜色本身——还有面料和质感。

• 同样是红色，丝绸的红和棉布的红，感觉完全不一样
• 光泽、纹理、透明度……都会影响色彩的呈现

给设计师的启示：

• 颜色多不可怕，只要有统一的基调就好
• 没有不好看的颜色，只有不好看的搭配
• 色彩的质感，和颜色本身一样重要

案例二：iOS 系统色彩——功能与美学的平衡

苹果 iOS 的配色，是系统级配色的典范。

它好在哪里？

1. 语义清晰 iOS 里的颜色，含义非常明确——

• 蓝色 = 可点击、链接、主操作
• 绿色 = 成功、通话、健康
• 红色 = 删除、错误、警告
• 橙色 = 提醒、注意
• 紫色 = 创意、App Store

用户不用想，一看颜色就知道是什么意思。

2. 系统色板的一致性 iOS 有一套标准的系统色板——

• 每个颜色都有亮色和暗色版本
• 每个颜色都有对应的"浅色版本"和"深色版本"
• 在亮色模式和暗色模式下，都很好看

3. 动态的色彩 iOS 的色彩不是静态的——

• 按钮点击的时候会有透明度变化
• 滚动的时候会有毛玻璃效果
• 暗色模式下颜色会自动调整

色彩是"活"的，不是死的。

4. 无障碍优先 苹果在色彩无障碍上做得非常好——

• 所有文字对比度都达标
• 支持"降低白点值"、"色彩滤镜"等辅助功能
• 色盲用户也能正常使用

iOS 的配色告诉我们：好的系统配色，首先是"能用"，然后才是"好看"。

案例三：马蒂斯的色彩——野兽派的色彩革命

亨利·马蒂斯（Henri Matisse）是野兽派的代表人物。 他的画，以大胆、强烈、主观的色彩著称。

他的色彩理念是什么？

1. 色彩不是模仿自然，而是表达情感 在马蒂斯之前，绘画的色彩是"写实的"——天空是蓝的，树叶是绿的，皮肤是肉色的。

但马蒂斯说：颜色不是用来画"看起来是什么样"，而是用来画"我感觉到是什么样"。

所以他的画里——

• 树叶可能是蓝色的
• 人脸可能是绿色的
• 天空可能是粉色的

他不管"对不对"，他只管"有没有感觉"。

这是一场色彩的革命——色彩从"写实的工具"，变成了"情感的语言"。

2. 平面化的色彩 马蒂斯的画，没有透视、没有阴影、没有立体感。 颜色是平涂的，像装饰画一样。

但正是这种平面化，让色彩本身的力量被释放出来了——

• 颜色和颜色之间的对比
• 颜色和颜色之间的和谐
• 颜色本身的情感力量

3. 装饰性与美感 马蒂斯说："我梦想的艺术，是一种平衡的、纯粹的、宁静的艺术，没有令人不安或沮丧的主题……它就像一把好的扶手椅，让人放松。"

他的色彩，就是为了美感、为了愉悦、为了让人舒服。

给设计师的启示：

• 色彩的终极目的，是传递情感和感受
• 不要被"真实"束缚，要敢用色、善用色
• 好的色彩，本身就是一种享受

案例四：蒙德里安的几何抽象——红黄蓝的极致

皮特·蒙德里安（Piet Mondrian）是荷兰风格派的代表人物。 他的画，就是那些著名的"格子画"——黑色的线条，白色的底，几块红黄蓝的颜色。

看起来很简单？但它影响了整个 20 世纪的设计。

他的色彩理念是什么？

1. 简化到极致 蒙德里安把色彩简化到了极致——

• 只有三原色：红、黄、蓝
• 加上无彩色：黑、白、灰

没有中间色，没有渐变色，没有多余的颜色。 每一块颜色，都是必不可少的。

2. 秩序与平衡 虽然只有几种颜色，但蒙德里安把它们安排得非常有秩序——

• 水平和垂直的线条
• 大小不一的色块
• 看似随意，实则精心计算的比例

每一块颜色的位置、大小，都是经过反复推敲的。 多一点太多，少一点太少。

3. 普世的美 蒙德里安相信，这种几何抽象的美，是普世的——

• 不受文化限制
• 不受时代限制
• 是一种纯粹的、本质的美

一百年过去了，他的设计还是很流行——

• 服装、建筑、家具、平面设计……到处都能看到蒙德里安的影子

给设计师的启示：

• 少即是多——颜色越少，力量越强
• 好的配色，关键不是"选什么颜色"，而是"怎么安排颜色"
• 秩序和比例，比颜色本身更重要

色彩的文化与情感

色彩的情感联想

我们常说"这个颜色感觉很温暖"、"那个颜色感觉很冷"—— 这些感觉，不是凭空来的。

常见的色彩情感：

红色

• 正面：热情、活力、爱情、喜庆、勇气
• 负面：危险、愤怒、暴力、警告
• 身体感受：心跳加快、血压升高、食欲增加

橙色

• 正面：温暖、友好、快乐、活力、创意
• 负面：廉价、浮躁、吵闹
• 身体感受：刺激食欲、让人兴奋

黄色

• 正面：阳光、快乐、希望、智慧、年轻
• 负面：警告、嫉妒、懦弱
• 身体感受：最显眼的颜色，最先被注意到

绿色

• 正面：自然、健康、和平、安全、环保
• 负面：嫉妒、生涩、没经验
• 身体感受：最放松的颜色，对眼睛最友好

蓝色

• 正面：信任、专业、冷静、科技、自由
• 负面：冷漠、忧郁、距离感
• 身体感受：心跳减慢、让人平静、降低食欲

紫色

• 正面：高贵、神秘、优雅、创意、浪漫
• 负面：忧郁、诡异、不真实
• 身体感受：最有"灵性"的颜色

粉色

• 正面：甜美、可爱、温柔、浪漫、女性化
• 负面：幼稚、软弱、俗气
• 身体感受：让人放松、有安抚作用

黑色

• 正面：高端、严肃、酷、神秘、力量
• 负面：死亡、悲伤、压抑、邪恶
• 身体感受：收缩感、沉重感

白色

• 正面：纯净、简洁、干净、神圣、开始
• 负面：空洞、冰冷、单调
• 身体感受：开阔感、轻盈感

灰色

• 正面：中性、稳重、高级、专业
• 负面：无聊、压抑、没有个性
• 身体感受：中立、不刺激

了解这些情感联想，你就能更有目的地选颜色—— 想让用户信任你，就用蓝色； 想让用户开心，就用黄色橙色； 想让用户觉得高端，就用黑白灰； 想让用户吃东西，就用红色橙色……

色彩，就是不用说话的沟通。

流行色的秘密

每年，潘通（Pantone）都会发布"年度流行色"——

• 2024：柔和桃（Peach Fuzz）
• 2023：洋红万岁（Viva Magenta）
• 2022：长春花蓝（Very Peri）
• 2021：极致灰 + 亮丽黄（Ultimate Gray + Illuminating）
• ……

很多人觉得"流行色"是玄学——为什么是这个颜色？谁定的？

其实，流行色不是"拍脑袋"定的。它是社会情绪的反映。

比如：

• 经济不好的时候，流行色会偏保守、偏沉稳（比如灰色、大地色）
• 经济好的时候，流行色会更鲜艳、更大胆
• 疫情之后，流行色偏向治愈、温暖、希望
• 科技发展快的时候，流行色偏向金属感、未来感

潘通的色彩专家，会观察全球的文化、艺术、时尚、社会事件……然后预测下一年的"情绪颜色"。

当然，流行色也有商业运作的成分—— 时尚品牌、美妆品牌、设计行业，都会跟着流行色走。 大家都说"这是今年的流行色"，它就真的成了流行色。

设计师怎么看流行色？

• 可以参考，但不要盲目追随
• 品牌的核心色不要轻易换，那是品牌资产
• 可以在营销活动、季节限定、周边产品里尝试流行色
• 保持品牌核心的同时，又能跟上潮流

流行是风，品牌是山。 风可以吹，但山不能动。

---

写在最后

色彩，是设计里最感性、也最理性的部分。

感性在于——它直接触动人的情绪和感受，好的配色让人一眼就喜欢上。 理性在于——它背后有一整套系统、规则、方法，专业的配色是算出来的，不是碰运气。

刚学设计的时候，我也觉得配色是"靠感觉"—— 这个颜色好看，那个颜色不好看，全凭直觉。

但做得越久，越觉得：真正的高手，都是"用理性做设计，用感性做检验"。

• 先靠方法和系统，把颜色选对、配准
• 再靠感觉和审美，做最后的微调

没有方法的感觉，是飘忽不定的——今天觉得好看，明天可能就觉得不好看了。 但有了方法和系统，你的设计就是稳定的、可复制的、可传承的。

当然，方法是死的，人是活的。 所有的规则和系统，都是为了"做得更好"，而不是"束缚创造力"。

真正的大师，是在精通规则之后，又能打破规则—— 就像马蒂斯，就像蒙德里安，就像那些改变了我们对色彩认知的人。

但在打破规则之前，先学会遵守规则。 先把基础打牢，再谈创新和突破。

愿我们都能成为—— 既懂理性系统，又有感性温度的设计师。