一、核心概念

1.1 色彩模型 (Color Models)

描述颜色的数学方法。

• RGB (Red, Green, Blue): 加色模型。光线叠加产生颜色，用于屏幕显示（显示器、手机、电视）。每种颜色通道取值范围 0-255。纯黑 RGB(0,0,0)，纯白 RGB(255,255,255)。
• CMYK (Cyan, Magenta, Yellow, Key/Black): 减色模型。油墨吸收光线产生颜色，用于印刷。每种油墨以百分比表示 (0%-100%)。理论纯白 CMYK(0%,0%,0%,0%)（白纸），理论纯黑 CMYK(0%,0%,0%,100%)（但实际印刷中常需要四色混合达到更饱满的黑）。
• HSB/HSL (Hue, Saturation, Brightness/Lightness): 直观模型，更符合人眼感知。
• 色相 (Hue): 颜色的基本属性（红、橙、黄、绿...），在色轮上以角度表示 (0°-360°)。
• 饱和度 (Saturation): 颜色的鲜艳/纯度程度 (0% 灰色 -> 100% 完全饱和)。
• 亮度 (Brightness)/明度 (Lightness): 颜色的明亮程度 (0% 黑 -> 100% 白)。Brightness 改变时会同时影响饱和度的感知，Lightness 更侧重于中性灰的亮度。
• Lab (Lightness, a, b): 与设备无关的颜色模型。基于人眼视觉。
• L: 明度 (0 黑 -> 100 白)。
• a: 绿-红轴 (-128 绿 -> +127 红)。
• b: 蓝-黄轴 (-128 蓝 -> +127 黄)。
• 优势: 色域最宽，能表示人眼可见的所有颜色。常用于高级色彩校正、锐化（在明度通道操作避免色晕）、在不同设备间转换色彩空间时作为中间桥梁。

1.2 色彩空间 (Color Space / Gamut):

特定色彩模型的具体实现范围。它定义了该模型下能显示或打印的所有可能颜色的集合。

• 关键点:
• RGB 色彩空间: sRGB (通用网络标准，色域较小), Adobe RGB (更广色域，适合摄影和高端打印), ProPhoto RGB (极广色域，专业摄影后期，需16位/通道处理), Display P3 (苹果设备常用，色域介于 sRGB 和 Adobe RGB 之间)。
• CMYK 色彩空间: US Web Coated (SWOP) v2 (北美标准商业印刷), ISO Coated v2 (ECI) (欧洲标准), Japan Color 2001 Coated (日本标准) 等。不同印刷标准和纸张类型对应不同 CMYK 配置文件。
• 色域差异: ProPhoto RGB > Adobe RGB > Display P3 > sRGB > 典型 CMYK。这意味着：
• 在广色域显示器上用 Adobe RGB 编辑的照片，转换为 sRGB 在普通显示器上看会丢失一些鲜艳度。
• 在 RGB 模式下设计的非常鲜艳的颜色，可能无法用 CMYK 油墨完全再现（称为“溢色”）。

1.3 位深度 (Bit Depth)

描述每个颜色通道存储的颜色信息量。

• 8位/通道: 每个通道 256 级 (2⁸)。这是最常用标准，文件大小适中。足够大多数屏幕显示和普通打印。
• 16位/通道: 每个通道 65,536 级 (2¹⁶)。文件大小是 8 位的 2 倍。优势：
• 在剧烈调整（如大幅提亮阴影、增加饱和度）时，能显著减少色阶断裂（banding） 和噪点。
• 提供更平滑的渐变。
• 编辑宽容度更高。强烈推荐用于专业摄影后期（尤其是 RAW 处理）和需要精细调色的项目。
• 32位/通道 (浮点): 主要用于 HDR (高动态范围) 图像处理、3D 渲染和高级合成。文件非常大。提供极高的动态范围和编辑精度，但日常使用较少。

1.4 RGB

RGB 色彩模式是由红 、 绿和蓝色调组成，这些色调组合在一起可创造比 CMYK 色彩模式的色域更广泛的颜色变化。此色彩模式仅存在于屏幕显示中，例如电脑屏幕、行动装置和电视屏幕等。

RGB 色彩模式使用 「加色法」 混合色光来产生颜色，而不是利用油墨来产生色调。这与「减色法」完全相反，例如混合色料或染料。全部的 RGB 三原色加在一起就会产生白色，如果少了这三原色则会产生黑色。你的屏幕上显示的颜色就是混合这些 RGB 基色调的结果。

当你试着印刷使用 RGB 色彩模式制成的设计时，印出来的设计品将制作出与屏幕预览不同的色调。 CMYK 色彩模式的色域比 RGB 色彩模式小，因此在印刷时，设计品中的颜色将试着找到相对应的 CMYK 颜色。这些对应色可能较浊或较不鲜明，最终会影响设计的整体基调。一定要掌握这个原则，在网路设计时只用 RGB 色彩模式以避免颜色变异。

1.5 CMYK

CMYK 色彩模式包含青色 、 洋红色 、 黄色和黑色（Key） ，这些颜色的组合产生了一系列色调。这种四色处理模式适用于各种类型的印刷机。当你把印刷图片放大时，你会看到四种颜色点叠加在一起，产生不同的色调和渐变。 解析度（dpi） 就是使用 CMYK 色彩模式印刷的结果。尽管所有的印刷机都是以 CMYK 印制，但效果可能因印刷机的款式和型号不同而异。

在 RGB 色彩空间中，所有的原色用加色法调配在一起产生白色。 CMYK 模式用减色法调配颜色，也就是把所有的原色用黑色遮盖来产生黑色调。油墨和染料的相互叠加，会减去纸中的白色。

CMYK 色彩模式产生的色域比 RGB 色彩模式更小，因此只有在设计印刷品时才会使用到此色彩模式。

1.6  印刷色

平版印刷最常用的方法是印刷色 。这些颜色是由青色、洋红色、黄色和黑色（Key）或 CMYK 油墨调配而成。每种印刷色都是由特定比例的青色、洋红色、黄色和黑色油墨组成。与特别色相比，印刷色提供的色彩范围有限。

彩色印刷又称四色印刷，非常适合需要多色油墨的图像或设计的印刷制程。每个印版都会以不同的角度印刷以印制出色彩浓厚的图像。

1.7 特别色

在平版印刷中，将单一油墨平涂印制而成的就是特别色 ，与网点叠色有所不同。特别色又称专色，是由纯油墨和混合油墨组成，无需使用网版或多色网点即可制成。

当印刷作业的色彩准确性和一致性很关键时，特别色就成了理想的选择。颜色不多的公司 LOGO 和颜色特殊的品牌元素应使用特别色印刷。

二、色彩学

注：本段落来自：https://simular.co/blog/post/color-theory

2.1 基础色彩学

2.1.1 色相

回到基本的色彩理论出发，先从色相 （Hue） 介绍起。 色相指的是在不同波长的光照射下，人眼所感觉不同的颜色。

「 色相」英文 Hue，是指颜色的属性外观，用来区分色彩的名称。例如：红色、蓝色、黄色等。

下图是一张基本的十二色相环，由瑞士设计师伊登所提出，又名伊登十二色环。

2.1.2 原色

所谓的「原色」指的是不能透过组合两种或多种颜色来创建，想像他们就像质数一样，质数不能透过两个数字相乘而产生。

传统色彩理论中的三原色，分别是「红」、「黄」、「蓝」，这其实跟常见的 RGB 或 CMYK 原色不一样，是来自传统艺术家颜料所定义出来的颜色，是三个无法用其他颜色混和出来的原色。 虽然他已经不等于现代光学定义的原色，但对于设计师配色来说，还是很好用的一套理论系统。

2.1.3 二次色 （Secondary）

二次色 （Secondary），是用原色混合成的三种颜色，分别是：

• 红色+黄色=橘色（Orange）
• 红色+蓝色=紫色（Purple）
• 黄色+蓝色=绿色（Green）

2.1.4 三次色 （Tertiary）

三次色 （Tertiary） 则是用原色与二次色混和出来的六种颜色

• 红色+紫色=红紫色 or 洋红色（Red-Purple）
• 红色+橙色=橘红色 or 朱红色（Red-Orange）
• 黄色+橙色=橘黄色 or 琥珀色（Yellow-Orange）
• 黄色+绿色=黄绿色 or 草绿色（Yellow-Green）
• 蓝色+紫色=蓝紫色 or 紫罗兰色（Blue-Purple）
• 蓝色+绿色=蓝绿色 or 青色（Blue-Green）

并不是每一种原色与二次色都能融的很协调，例如红色与绿色就无法融洽的组合在一起，蓝色与橘色混色也不好看，会产生难看的褐色。

2.1.5 色系

色系也可以称色温（不是物理上的色温），将颜色分成暖色与冷色两种，运用人类对颜色的视觉联想，产生不同的感受。

• 暖色系： 红、黄、橘等颜色，通常给人活泼、热情、明亮的感受。
• 冷色系： 蓝、绿、紫等颜色，通常给人冷静、安静、低调的感受。

2.1.6  明度（Value）

「 明度」Value 是指颜色的亮度或暗度。高明度的颜色较浅，看起来较为明亮。低明度的颜色较深，看起来较为暗沉。

普遍来说，黄色与黄绿色明度最高，红、绿、橘次之，蓝、紫最低。

透过调整明度，可以影响颜色的视觉效果，创造对比。例如：可以用亮色来吸引用户注意力，突出重要元素，而暗色则可以用来营造氛围。

此外，高明度的颜色通常给人一种清新、愉快的感觉，适合用于生活产品的设计。低明度的颜色则往往显得正式、神秘，更适合用在正式、高科技产品设计中。

透过控制色彩的明度，就能让设计有更多丰富的变化。

另外，明度也可以用混色来调整。

• 颜色亮度（Tint）： 又称含白度或浅色度，指的是一个颜色混入不同比例的白色后呈现的效果。
• 颜色暗度（Shade）： 又称含黑度或暗色度，指的是一个颜色混入不同比例的黑色后呈现的效果。

也就是说，明度越高，越接近白色，明度越低，越接近黑色。

2.1.7 彩度/饱和度/色度 （Saturation or Chroma）

「 彩度」Saturation 又称饱和度，是指颜色的鲜艳程度。

高饱和度的颜色纯度高，看起来鲜艳生动，低饱和度的颜色则因混有更多的颜色，显得较为沉稳。

高饱和度的颜色常用于活力、年轻的设计中，以吸引用户的目光，并刺激消费。而低饱和度的颜色则适合用于专业、高雅的高端品牌设计中。

饱和度的变化还可以帮助我们在设计中创造层次感，例如：使用低饱和度的背景色，来凸显高饱和度的元素，让设计更有层次对比。

在混色时，明度与饱和度通常是同时变动的。 例如：

• 红色加白色成为粉红色 （明度提高、彩度降低）
• 红色加黑色成为暗红色 （明度降低、彩度降低）

2.1.8   色相环用途

• 【了解不同颜色之间的关系】例如对比色、相似色、互补色等.. 搭配，这有助设计师组合出和谐、漂亮的配色。
• 【判断色彩适合度】色相环可以用来判断颜色是否适合放在一起，确保设计视觉上的和谐感。
• 【快速找出对比、相近色】色相环可以帮助我们更快速、直观地找到某颜色的对比或是相似色，提升工作效率。
• 【组合吸睛配色】通过色相环，我们能更轻松地选择、搭配各种颜色，创造出更吸引人的配色方案。
• 【评估配色对比度】色相环有助于评估元素之间的色彩对比度，确保在设计中使用的色彩是清晰、易读的，提供良好的视觉体验。

简单来说，色相环最主要的用途就是展示颜色与颜色之间的关系，通过色相环这个工具，可以帮助设计师更全面地了解色彩的关联，并在设计中更精准地使用颜色。

2.2 色相环七种常见配色方法

接下来，我们来介绍 6 种欧美常用的配色手法，这些配色方案给了你一种规则去群找适合自己的颜色，以避免在无数的颜色中迷茫。 这六种配色方案分别是：

• 单色组合 Monochromatic
• 近似色组合 Analogous
• 互补色组合 Complementary
• 分裂互补色 Split Complementary
• 三元组 Triadic
• 四色组合Tetradic

通常，建议您先选择好一个「主要颜色」，再搭配这七种方案，就能快速配出合适的颜色。

2.2.1 单色组合 Monochromatic

单色组合使用同一个颜色的不同色调来做组合，协调性非常高，对许多设计师来说也是非常安全的选择。

它以单一颜色为焦点，通常透过混合一个色相的浅色、色调和色度作搭配变化。这种配色表听起来可能很单调，但却提供了多元的色值，为你的构图增添趣味和多样性。

这种配色方案非常多变化，而且很美观。在设计中使用多种颜色通常会使观者眼花撩乱，并使设计的色调失去风采，但是单一色相的细微颜色变化有助于简化设计，使其不过于单调。

2.2.2  近似色组合 Analogous

相似色是在色轮上相邻的三色或四色的颜色组合。 「Analogous」（类似的）这个词的意思是「密切相关」，因此这些颜色的搭配有着类似于单色配色的和谐美感。

近似色组合是非常柔合的配色，仅次于单色组合，是合用在需要一点颜色变化，但又不能过度对比的情况下。 这种配色方案非常适合纯暖色（黄、橘、红）或纯冷色（紫、蓝、绿）系。

但用在信息图表或 UI 元素就非常不适合，因为所有颜色会混在一起。

2.2.3 互补色组合 Complementary

互补色视在色轮上面选择最大程度的对比色，以达到交互强调的效果。 使用这种色彩的风格会非常强烈，也不容易驾驭，但适合用在较为外放类型的设计。

互补色是色轮上位置相对的两色; 其中一色通常是原色，而另一色则为二次色。 主要的互补色是蓝橙、红绿和黄紫。

2.2.4  分裂互补色 Split Complementary

补色分割的配色看起来有点类似互补色，但这种组合混合了一种颜色和其互补色相邻的两色，例如黄色与蓝紫色和红紫色的搭配。

相较于对比极度强烈的互补色方案，分裂互补色取的是互补色的两个邻近色，它可以有效维持互补色的对比效果，但又没那么强烈，视觉风格会柔和一些。

2.2.5  三元组 Triadic

三元组使用等边三角形选择法，让颜色均匀分布在色相的范围中，在对比与柔和同时结合起来，但依然能够带来强烈的视觉感受。 如果希望设计带有强烈风格，可以三色都选原色或高彩度的颜色，如果希望柔和一点，就三色都选高明度或粉彩的颜色。 也有些人会选择一个高彩度，其他低彩度来做搭配。

这三种颜色在色轮上的位置彼此等距，形成如下所示的等边三角形。 三等分配色可包含三种原色、二次色或三次色。

三元配色很适合用在信息图表或 UI 元素，或是有多个相同重要性的重点要强调的场合。

2.2.6  四元组 Tetradic

四元组又称方形配色，四个颜色分布均匀，又属于相近色也属于互补色，没有一个颜色站主导地位，非常平均的一种配色方案。

互补色在本质上已经很强烈; 双重互补色，又称矩形配色使用两组互补色让效果加倍。

矩形配色使用了往往难以调和的丰富色值，如黄色和紫色搭配绿色和红色。 选择一个主色，并降低其他颜色的饱和度或强度有助于维持构图的平衡

另外四元组有一个变体是矩形配色，同样四种颜色，但其中两种的颜色较近似，与辅色的对比也没有那么强烈，是相对柔和的选择之一。

2.3 配色范例

新鲜的绿色植物和色彩缤纷的花朵让漫长的冬季过后的春天成为一个吸引人的景象。这个配色方案采用了==分裂补色== ，以红色为主体，另外绿与蓝没有这么强烈，让画面柔和许多。

充满生命力的大自然景象。此配色采用了==三元组或四元组== ，对比强烈且每个颜色的重要性一致，共同构成了整体画面。

非常标准的==单色组合==的使用，明度从高到低，虽然只有一个色相，但是藉由摄影造成的低彩度让画面依旧美丽。

使用==近似色的方案==组成的配色，成功带来非常暖色调的感受。已有研究证实暖色调可以成功刺激人们的食欲，因此用在饮食宣传上面非常有效。

更多配色范例请见 # 101 Color Combinations to Inspire Your Next Design + Free Swatch Download

2.4 配色工具介绍(色轮)

2.4.1 Canva Color Wheel

Canva Color Wheel 可以选择不同的配色方案，用滑鼠拖拉产生配色。配到喜欢的颜色后，可以一键前往搜寻介面寻找近似色的模板参考。

2.4.2 Figma 色轮

Figma Color Wheel 同样也有多种配色方案可以选择，特色是选到喜欢的颜色后，可以按下按钮将这组颜色建立成一个专案，并且自动产生配色档案。

2.4.3   帕莱顿

Platton 是个很有趣的色轮工具，同样也可以选择多种配色方案，它的色调工具较为灵活，配出来的颜色也较为多样化。另外，右下方还可以产生配色范例与色彩表供汇出。

2.5  颜色选择器

ColorPicker 也是一个色轮工具，但它的色轮比较简单，只有对比色可以用。取而代之的是它会用这个对比色帮妳计算出很多搭配用的颜色，并且网下滚之后，还有许多设计案例直接套上您的配色。

2.6 配色工具介绍(判断图片颜色)

2.6.1 图像选择器

Image Picker 可以上传照片，并且自动分析照片中的颜色，是和设计时用来搭配照片做颜色取样。

2.6.2 品牌文件夹调色板

Brandfolder Color Palette 也是一个抽取颜色的工具，只要拖拉上传图片就能分析图片中的色彩。

2.6.3 图像颜色选择器

2.7 配色工具介绍(色票)

2.7.1 Eva 设计系统

Eva Design System ，方便的配色工具，设定主颜色后，自动演算出成功讯息、一般资讯、警告讯息和危险通知颜色等推荐配色。按下「Export」即可轻松汇出当下配色的图档。

2.7.2 冷却器

Coolors 是简单好用的快速配色工具，按下空白键就能立刻产生一组新配色，产生的颜色都很舒适。免费版一次可以产生五组颜色，但无限制刷新次数。

2.7.3 Material UI 颜色和调色板

Material UI Colors & Palettes 是一个很实用的网站，可以快速取得许多框架预先调配好的色彩，包含 Material Design , Metreo, Tailwind 等等，不用花时间去处理 UI 配色问题。

2.7.4 色彩寻踪

Color Hunt 提供大量色票，这些色票都是人工配出来的，最早是由一群设计师进行分享，后来越来越多人加入分享他们自己常用的色票，因此形成了一个色票收藏库。网站上有方便的过滤器与选单，可以想要的用途、色调、风格等等，寻找所需的色票。

2.8   配色工具介绍(调色与开发工具)

2.8.1 色彩空间

ColorSpace 是多种渐层色工具整合成的网站，有渐层配色推荐、CSS 渐层产生器、与三色渐层产生器，让你用非常简单的界面，迅速取得需要的渐层语法。

2.8.2 设计 GUI

Design GUI 是一个浏览器外挂，可以方便的让您做各种色彩调配，储存管理色票噢 CSS 变数等资讯，同时也主打 AI 自动配色功能。

2.8.3 Google 内建调色工具

只要在 Google 搜寻 color picker 就会自动跳出简易调色版

三、 色彩情感

3.1 生理学机制

ounter(lineounter(lineounter(linegraph LR    光波波长 --> 视网膜锥细胞 --> 神经电信号 --> 大脑皮层视觉区    视觉区 --> 边缘系统(情绪中枢)

长波长色彩（红/橙）激发交感神经 → 心率加快 短波长色彩（蓝/绿）激活副交感神经 → 呼吸减缓

3.2 明度与饱和度法则

情感强度公式： 情绪强度 = (饱和度 × 0.7) + (明度对比度 × 0.3) 高饱和红色(S=100%) + 低明度(L=30%) = 奢华感（如爱马仕橙） 低饱和蓝色(S=40%) + 高明度(L=85%) = 科技感（如IBM蓝）

3.3 12核心色彩情感图谱

3.4 黑色

从色彩定义来看，黑色是亮度最低的非彩色,是经典的色彩，更是神秘的色彩

明度最低的颜色极具重量，有着庄重、严肃、高级、权力的感觉，所以许多正式场合都能看见黑色。服装或空间上运用黑色来展现权威、提升专业、低调奢华感。  身为最深色也是百搭色，广告广告牌中加上任何浅色，都能使色彩更鲜明。

因为黑色是夜晚的颜色，容易联想到不可见光、叛逆、死亡、悲伤、害怕等负面意象

黑色在设计运用过程中，经常给人传递的是一种庄重、神秘稳重、冷酷高端等等的一系列视觉感受，我们在用黑色作为主色调的时候，一定要慎重，黑色属于消极色彩，从心理学角度来看，会使人联想到神秘、黑暗等，还象征着悲哀、沉默、恐怖、罪恶、消亡等

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(linegraph TD    A[黑色情感] --> B[正向力量]    A --> C[负向压迫]    B --> D[权威/奢华]    B --> E[神秘/深邃]    C --> F[恐惧/死亡]    C --> G[压抑/空虚]

黑色的光学科学

CMYK印刷黑配方

• 丰富黑： [C=50 M=50 Y=50 K=100] → 避免漏白
• 暖黑： [C=40 M=50 Y=60 K=100] → 仿古书籍质感
• 冷黑： [C=70 M=40 Y=40 K=100] → 科技产品包装

跨文化情感映射

3.5 红色

大红色是光谱中最具活力和引入注目的颜色。它代表着兴奋、速度、力量、喜悦、危险和激情。 红色能立即吸引人的注意,并能凸显它所代表的物体或图片。红色会让人感到温暖。在红色杯子里盛放的咖啡要比在蓝色杯子里看起来要更烫些。

视觉最强烈的颜色，因为如火焰般鲜艳，所以能在人的心里留下强烈的情绪与感受。 例如：激情、热情、力量、兴奋、爱、性。 但也因为跟「血」的颜色一样，红色也会给人危险、战争、愤怒等意象。

另外，在东方文化及宗教中，红色代表着美满、喜庆、庄严、幸福和富贵。 如中华、日本及东南亚地区，许多寺庙、神社、鸟居甚至宫殿都是使用红色。

全球文化矩阵

工业级红色谱系

3.6 绿色

绿色是属于大自然的色系，是最常见的颜色，很容易让人活力、生命与希望等，这是其联想到清新、健康、青春、 他任何色彩都不能比拟的，作为眼睛最容易接受的色彩，它能起到改善视力的功效，亮绿色让人们想起春天、自然、生机勃勃和年轻活力，暗绿色与稳定和成长紧密相关，代表着经济稳定和成功。绿色在全世界范围内都被认为是“安全”的象征。绿色意味着允许通行。

大自然草木树叶的颜色，给人环保、生机、舒适的感觉。 草绿色如新芽、嫩叶一般，代表着年轻、新生、活力、清新。  在诺亚方舟的神话故事中，鸽子带回绿色橄榄枝代表大地恢复生机、一切和平。

绿色的负面意涵是内心失衡、竞争、压力。  在古希腊医学里，因为忌妒会使绿色的胆汁分泌过多，导致脸色偏绿，所以绿色也是忌妒的代表色。

视觉生理优势

专业级情绪映射表

跨文化象征体系

3.7 蓝色

天空的颜色，给人宽广、辽阔、和谐的感觉，浅蓝色运用在穿搭上可以展现夏季清爽感; 海洋、冰川的冷色，也会带来寒冷、冷静、稳定、洁净的意象。 深蓝色在视觉上加重分量，呈现稳定、理性、优雅。

因为蓝色也代表着理性、专业、沟通，国际组织、科技品牌常使用不同深浅的蓝色，也赋予蓝色几分科技感。

蓝色是所有色彩中被人喜欢最多的颜色，特别是男人最喜欢的颜色。

几乎所有与蓝色有关的联想都是积极的，这使得蓝色成为令人愉悦和安静的颜色。

海军蓝象征着尊敬,代表着忠诚、可信赖、忠贞和正直。蓝色能让空间看起来更大，并且在蓝色的环境下时间好像过得更慢些。

蓝色还给人美好的联想，如大海般包容，如天空般广阔，自由和理想等。

专业级情绪映射表

跨文化象征体系

空间设计情绪调控

3.8 紫色

同时有着红色的艳丽，又有蓝色的低调沉稳，给人性灵、神秘的感受。 常常运用在算命、塔罗牌、神秘科学等相关题材配色。 也因为早期紫色染料极其罕见，无法大量生产，所以全世界100多个国家中，没有一个国家的国旗使用紫色。 也因为紫色布料属于奢侈品，象征尊贵、华丽等身分地位，像是在古时候的日本，紫袍只能供最高级别的和尚穿戴。

紫色散发着经典、力量、激捂情、感性和奢华的魅力。

深紫红色一般是心灵的和神秘的象征,它有着严肃和庄重的特质。

薰衣草色和紫罗兰色有着独有的甜美、浪漫和怀旧的情怀。

在紫色的房间里，人们的工岙作效率会降低，因为紫色会褚让人容易做"白日梦”

3.8 黄色

从心理学角度讲，黄色在光谱中是让人感觉最幸福的颜色，它代表着温暖，乐观和快乐。

黄色视觉上像是“跳"到人面前一般，十分引人注目。这也是标识和产品包装通常选择黄色的原因。

黄色能激发人清晰的思维。一般在黄色背景色上使用黑色的字是能最具辨识度的组合，有助人保持深刻的记忆。

与其他色彩一起时，黄色能让它们看起来更具活力，它让暖色系的色彩看起来更光彩熠熠,而让冷色系的色彩变得更鲜活

如果对明黄色进行过渡曝光形成的颜色会给人不安定的感觉。

太阳与光芒的颜色给人明亮、积极、希望、乐观的感受，海报中用大面积的柠檬黄、月光黄能传递温暖及正能量。 金黄色、古铜色与黄金、钱币颜色相似，具有财富、辉煌，甚至贪心、贪婪的意思。

因为黄色是明度最高的色相，搭配明度最低的黑色达到醒目特性。 常常用于警示、警告的标示，像是交通信号、辐射设施等。

3.9 橙色

橙色是一种激励的、充满活力的颜色,它代表着友好、开朗、愉快和冒险。

亮橙色有着高识别度，使得它成为警示标志或引人注意的最好选择，即使是使用很少的量也会起到上面的效果。

橙色很容易被眼睛识别,代表秋天和辛辣的橙色是温暖的，异域的让人充满食欲的。

橙色的俏皮、活跃的特质，它是儿童、青少年和运动员的最爱

拥有红色的鲜艳及黄色的明亮。 淡淡的蜜橙色运用在花束、服装、空间中，给人温柔、有亲和力的感觉。 不温不火恰当好处温暖色调，展现出活力、热心等正面感受，延伸开朗、信任、坦率、亲切延伸的正面意象，适合用于社会服务相关的活动配色。

在大自然中，可以观察成熟的果实、纷飞的落叶都是橘色系，橘色就是秋天的代表色。 深橘色、柿子色带有刺激食欲的功能，是餐厅广告时常搭配的颜色。

3.10 灰色

灰色是位于黑色与白色之间的一种色彩，在无彩色系中大部分都是灰色，在现实世界中绝对纯度的黑色和白色是很少存在的，而灰色随处可见。

灰色可以大致分为深灰色和浅灰色两大类，灰色作为一种中性色系，其突出的性格特点是柔和、稳定和大方，它可以与任何彩色相搭配，并得到一种平衡的画面效果。

灰色的意义

灰色作为一种永恒的颜色，是展现不老画面最好的工具，其最主要的特点是能够让矛盾的画面变得随和，是平淡的组合具有无限的生机，它是既不抑制性格也不强调性格的色彩。

灰色是最被动的色彩，它的特性是由和他搭配的色彩决定的，当其搭配暖色时它就会表现出冷静的气质，而当他搭配冷色时则会表现出柔和的暖灰调。由于在视觉上和心理上的平淡，让人很容易接受，不会造成视觉上的喜爱，虽然它也有缺乏活力的弱点，但并不影响人们对他的喜爱。

因为介于白色与黑色间，有着无彩色优雅及沉稳的特性。 但也因为在两个极端之间，黑与白的比例不同就会造成明显的差异。 像是水泥、清水模的浅灰色，保有白色的梦幻明亮却不刺眼，给人内敛的感觉。 深灰色、炭灰色有着黑色的深邃庄严，但更为亲切。

灰阶的运用要注意，没有搭配好会产生黯淡无光、无精打采的感觉。

灰色的表现意象

灰色，多用来表现诚恳、沉稳与理智，同时也常常作为多种色擦搭配时的调和色彩，它的加入会让画面变得更加和谐，灰色有着黑色的沉稳和白色的经验，是一种非常重要的过渡色。

正面意象： 柔和、细致、细腻、含蓄、大方、沉稳、安宁、自然和典雅。负面意象： 乏味、寂寞、忧郁、无激情、无兴趣、枯燥和沉闷

3.11 白色

白色在色光混合中是所有色光相加的结果，是光明、神圣、纯洁、优雅的象征色。现代设计中，白色具有纯洁、高雅的象征，是高科技产品的代言色，是服装色彩中永恒的主题。白色在食品包装中具有清洁卫生的寓意，也是医院中常用的色彩。白色常使人联想到雪、婚纱、纸张，以及整洁、高冷、优雅、神圣等。

属于无彩色，给人干净洁白、简约、人性、和平的形象。 常用于救护医学使用之外，延伸意涵像是新娘的白色婚纱就是象征纯洁与纯真。 白色也是雪花冰晶的颜色，平面设计中与冷色系搭配就能营造沁凉感。
在西方文化中，白色容易跟神圣、光明连结在一起; 但在东方文化中，白色也有着冰冷、哀伤之意。

四、 主色、副色、点缀色

4.1 主色

任何一个设计版面中通常都要有一个最主要和突出的颜色作为画面的主角，其他作为辅助或衬托的颜色则会作为配角按照各自关系和强度呈现，而这个在色彩中占据主角地位的我们就称之为主色。

4.1.1 如何界定主色

我们用饱和度高的青色和明度高的黄色来举例，在二者面积相等的情况下，饱和度高的青色会显得重一些、力量更大一些。

当我们扩大黄颜色的面积时，按照面积原理黄色将作为主色，但是需要注意当明度高的颜色作为主色时画面会产生不稳定感，会受到饱和度高的颜色的干扰。

相反我们将饱和度高的青色面积放大，这样就可以起到稳定画面的效果，而黄色便自然而然的成为了副色。

而当两种颜色的基调相同时那么所占的面积就起决定作用了，毋庸置疑谁的面积大谁就是主色。这些技巧都是需要在实际应用中注意的。

4.1.2 主色的功能

设计中的主色就好比人的面貌，是区别人与人的重要因素，同时也影响带给他人的第一印象，因此主色的确定可以为设计奠定一个基调，这个基调也影响着作品所要传达的信息和风格。而主色在色彩非常鲜明的情况下也可以起到吸引眼球的作用。

4.1.3 小贴士

当两种颜色处于力量感相当的情况时，会让人很难判断出究竟谁才是主色，对于这一点其实没有必要纠结，因为色彩是应用科学而非理论科学，设计亦是如此，色彩本身就是主观和客观相结合的产物，每个人对色彩的感受都各不相同，对色彩的敏感度也就不一样。这里给大家提供一个参考：哪种颜色最先进入你的视野、给你感官的刺激最大或者当你的视线离开时脑海中最先回忆起哪个颜色，那么对你来说它就是主色。

4.2 副色

在学习副色之前我们需要为大家阐述一个原则性问题，如果在一个设计当中只用一种颜色就能够完美呈现所要传达的效果，那么其实也就没有必要添加任何其他辅助色彩了，但是这只是过于理论化的东西， 因为毕竟单色会给人单调的印象，除非你的设计有此特殊需求。

4.2.1 如何界定副色

4.2.2 副色的功能

在设计当中，副色最主要的作用就是突出主色以及更好的体现主色的优点，在完成传达信息的同时又使得整个画面更加饱满。副色在强调和突出主色的同时，也必须符合设计所需要传达的风格，如此才能最大化的体现出副色的作用和意义。

4.3 点缀色

从点缀色的名称上就不难理解点缀色就是为了点缀画面而存在的，和副色一样，点缀色可以是一种色彩也可以是多种色彩，但是不及副色对主色作用那么强，点缀色可以装饰版面并为画面增添丰富的效果。

4.3.1 如何界定点缀色

4.3.2 点缀色的功能

点缀色的特点主要是面积小、色相清晰、醒目突出，由于点缀色自身的特点所决定它的功能通常体现在细节上，对于配色有如画龙点睛的作用，可以使得整个画面的效果更加生动不呆板，而针对文字信息量较大的版面，点缀色可以起到引导阅读的作用。

4.3.3 小贴士

当你在进行实际的色彩分析中你会发现并不是所有的设计都能套用主色、副色、点缀色的色彩功能去划分，这是因为主色、副色、点缀色主要是基于三色配色或者多于三色的情况，并且你也会发现当我们在分析主色、副色、点缀色时并没有一个绝对的固定标准，往往是从不同角度思考综合考量的结果。总之对于主色、副色、点缀色的划分并不需要严丝合缝，在分析他人作品时做到心中有数就可以了，最重要的还是在设计中如何去运用。

4.4 主角&主色

  很多时候，大家都会认为主角的色彩就一定是主色调，通过主色调能把主角的形象表现得丰富更突出，其实不然，主角和主色是两个不同的概念。主角，是画面中最突出的主体或者是想要突出的主体，所占的面积不一定很大但却非常重要（图中主角：人物）。而主色，则是画面中最主要的颜色，所占的面积通常都比较大（图中主色：背景色）。主角色，实际上是主体人物的颜色（图中主角色：红色帽子），所以主色、主角和主角色是不同的概念。

这里的主角色，我们在色彩搭配中称之为“副色”和“点缀色”，一个整体画面为什么需要明确主角呢？因为配色都是从最主要的色彩开始的，无论是主色还是主角都是如此，配色之前先确定主角的位置，后面的配色才会有章可循，并且也可以从配色的角度突出主体。 如何通过配色强调主角，为大家分享3种简单的方法，分别是：

• 通过增大色相差异衬托主角
• 通过提高纯度差异衬托主角
• 通过提高明度差异衬托主角

4.4.1 通过增大色相差异衬托主角

说白了就是色相对比，色相对比法则是我们经常配色用到的，但是很少有人专门为了衬托主角而去使用，其实色相对比对于主角的衬托有着非常大的影响，比如同样的主角和背景使用对比色、互补色和使用同类色、近似色得到的效果完全是不一样的。

色相差有强弱之分，与色相对比一样在色相环上彼此的距离越远对比就越强差异也就越大，也就是说主角的色相与其他色相的差异越大主角的地位就越突出。

这个海报的主角很明显就是立体的英文，而这里正是通过较大的色相差来衬托主角的，浅绿色的文字在蓝色的背景上十分明显。如果主角的颜色换成与背景差异不大的色相就没那么突出了。

这个海报的主色是大面积背景色，而主角是身穿绿色的两个儿童，绿色与红色形成强烈的互补关系，所以增大色相差可以很大程度的衬托出主角。

这个海报的主角与背景使用了对比色红色和蓝色，也是通过色相差来衬托主角，并且主角和背景也形成了很好的冷暖对比，如果主角使用同类色就会显得非常弱了。

4.4.2 通过提高纯度(饱合度)差异衬托主角

当我们想要强调主角时除了拉开色相差也可以通过提高纯度，让主角更加突出和稳定。

无彩色黑白灰是没有纯度的，而有彩色中纯度最高的就是纯色，但并不是说主角就得使用纯度高的颜色，只要让主角和其他颜色的纯度有较大的落差，主角自然就会得到相应的突出。

海报的主角使用了鲜艳的黄色，与背景的低纯度色形成鲜明的对比，让主角非常引人注目。如果将主角的纯度调整成和背景色相同，可能看上去色调更加一致了，但同时主角却被淹没和平庸化了。

这个海报不仅使用了色相差的方法而且还运用了纯度差，我们将主角的红色降低纯度就可以看出来了，虽然通过色相差还是能够分辨出主角，但是并没有高纯度时那么明显。

4.4.3 通过提高明度差异衬托主角

纯度可以形成差异那明度当然也可以，无彩色中白色和黑色的搭配效果是最醒目的，因为它们之间的明度差最大。而在有彩色之间不同的明度差所带来的视觉效果也是不一样的，如果想要主角突出醒目提高主角与其他色彩的明度差也是不错的方式。

无彩色中明度最高的是白色，最低的是黑色。无论是无彩色还是有彩色只要明度差大主角就会更加鲜明，而明度差小相反主角就会显得不够清晰不够引人注目了。

海报的配色使用的都是无彩色，整个画面由黑白灰组成，从颜色上来看主角已经很明确了就是版面中心的白色字母，黑色和白色的明度差是最大的，所以黑底白字当然也就非常显眼了。而如果将白色降低明度变成灰色虽然也能分辨出主角，但是整体却变的模糊甚至带有脏兮兮的感觉。

海报的主角显然是红色的鸡头，而背景和文字都用了明度较高的颜色，这就让明度较低的红色异常醒目。而如果将红色的明度提高到与背景色的明度相近，整体的色调是统一了但是对于想要突出和强调主角这就不是很好了。

4.5 4种确定主色调的方法

4.5.1 方法 1：品牌基因定位法(依据企业形象用色)

在激烈的市场竞争中，为了突出企业形象，提升产品的附加价值和识别度，以企业形象的形象色为主色调进行设计，使设计的画面具有统一的色彩，是最直接的配色方式。

核心逻辑： 主色调 = 品牌 VI 核心色

ounter(lineounter(lineounter(linegraph LR    A[品牌Logo] --> B{提取主色}    B --> C[Photoshop取色]

适用场景：

• 企业海报
• 产品包装
• 官网设计

PS 操作步骤

1. 打开品牌 Logo 文件
2. 用 吸管工具 (I) 点击 Logo 主色区域
3. 记录色值：查看 前景色方块 或 信息面板 (F8)
4. 存入色板：窗口 > 色板 > 点击新建图标

4.5.2 方法 2：内容主导法（根据主体用色）

根据主体本身的颜色，选取同类或相邻色相做为主色，使画面更统一协调。这个方法能很好的与主体色相呼应，视觉上产生相关联。

核心逻辑： 主色调 = 画面中占比＞50%的视觉元素颜色PS 取色技巧：

4.5.3 方法 3：情绪板决策法（依据色彩情感用色）

色彩能够渲染气氛和引起联想，是最能影响观众情绪，引起读者的心理共鸣的视觉元素。在主色很清晰、很明确的情况下，可以最快速、最简单的把画面气质表。

核心逻辑： 主色调 = 情绪关键词对应的色彩心理学代表色PS实现流程：

ounter(lineounter(lineounter(lineounter(lineflowchart TB    A[确定情绪词] --> B[收集意象图]    B --> C[Adobe Color 分析]    C --> D[生成主色]

操作路径：

1. 在 PS 打开情绪板拼贴图
2. 窗口 > 扩展 > Adobe Color
3. 点击 从图像创建 → 选择 “色彩情绪” 模式
4. 拖动取色点锁定主色（通常为中央色标）

情绪-色彩对应表

4.5.4 方法 4：行业惯例法（依据行业、商品属性用色）

每一类别的行业、商品在消费者的印象中都有着根深蒂固的“概念色"、“形象色"、“惯用色"，人们凭借色彩对行业、商品性质进行判断的视觉习惯。这一视觉特点是由于人们长期感情积累，并由感性上升为理性而形成的特定概念，它成为了人们判断行业、产品的一个视觉信号，因而它对色彩设计产生着重要的影响。 比如在站酷网搜索“科技”，会发现大量优秀作品都使用深蓝色为主色调。因为蓝色代表智慧和知识，很符合科技、互联网、数码等需要表达技术性的行业。

核心逻辑： 主色调 = 该领域用户心智中的默认认知色

4.5.5 终极决策工具：四象限评估法

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(linequadrantChart    title 四象限评估法    x-axis "辨识度 低" ---> "高"    y-axis "契合度 低" ---> "高"	quadrant-1 "淘汰区：高辨识+低契合"	quadrant-2 "优选区： 高辨识+高契合"	quadrant-3 "备选区： 低辨识+高契合"	quadrant-4 "风险区： 低辨识+低契合"

4.5.6 总结：4 法核心要点

5.6 三种确定副色/点缀点方法

知道了配色的步骤通常是从确定主色开始，再选择与之搭配的副色，最后根据造型、排版等方面调整增加多个点缀色。

如果说主色相对容易建立，那么副色和点缀色的创建就比较有难度了，难在设计师要对色彩语言有深入的了解，同时要有深厚的色彩搭配能力。

副色在强调和突出主色的同时，也必须符合设计所需要传达的风格，在完成传达信息的同时又使得整个画面更加饱满。如果想让画面显得更丰富、热闹，可以添加点缀色，点缀色可以装饰版面并为画面增添丰富的效果，

给大家推荐选择副色和点缀色的三种实用方法:

• 运用色相环
• 使用配色网站
• 借鉴优秀作品

4.6.1 运用色相环

色彩搭配不只是需要设计师具备一定的色感能力，也需要设计师理解色彩之间的关系，合理有效的运用它们达到和谐平衡关系。

色相环是我们认识颜色关系的重要工具。

12 色相环由12 种基本的颜色组成。首先包含的是三原色，即蓝、黄、红。原色混合产生了二次色，用二次色混合，产生了三次色。

我们选取其中某一种色相做为基准色相，通过色相环可以很容易了解到基准色和其他五种色相之间的关系，色相离得越近搭配越柔和，相隔越远对比越强烈。

色彩之间的搭配大体上可以分为两种：

1. 对比柔和的配色
2. 对比强烈的配色

在主色调选取中曾说过大自然的颜色是无穷无尽的，对于新手设计师只需记住六种基础色相即可。比如选取蓝色为基准色，通过色相环可以知道与之最接近的颜色为紫色和绿色，对比比较柔和。与之距离较远的是红色和黄色，对比比较强烈;橙色是距离蓝色最远的颜色，所以对比最强烈。了解这些关系之后，配色实践就变得简单多了。

【对比柔和配色】单色搭配

在同一色相上进行纯度、明度变化，搭配上并没有形成颜色的层次，但形成了明暗的变化，单色搭配可以产生低对比度的和谐美感，给人协调统一的感觉。

采用单色对比，需要通过纯度和明度的变化拉开画面层次。

【对比柔和配色】相似色搭配

色相具有较强的相似色因素，但也存在适度的对比，是是既有对比又协调统一的色彩基调。这也是新手设计中用到最常用而不容易出错的一种配色

蓝色和紫色、绿色是距离最近的颜色，既有相似色因素

又存在着适度的对比，视觉效果比较柔和。

对比柔和的配色特点

• 优点：对比比较柔和，容易把控
• 缺点：冲击性弱，运用不得当会单调、缺少视觉层次感。需要通过纯度和明度的变化拉开画面层次，避免产生单调、呆板的感觉。

【对比强烈配色】对比色搭配

对比色对比是指在色相环中相距120°左右的色彩所产生的对比。对比色对比由于色彩差异比较大通常产生的视觉效果强烈而鲜明。

蓝色和黄色、红色属于对比色，具有强烈的对比。 视觉效果丰富、富有动感。

【对比强烈配色】互补色搭配

在色轮上直线相对的两种颜色，是对比最强的搭配，因此在视觉上会产生极大的隔离作用，它们组合在一起，会产生相互衬托、相互抗衡、相互排斥的感觉，并使各自的色相更显突出，更为艳丽，具有强烈的视觉冲击力。

蓝色和橙色是互补色，对比性最为强烈，高亮的橙色可以很好的缓解深蓝色的沉闷，增加画面的愉悦气氛。

对比强烈的配色特点

• 优点: 视觉冲击力强，层次丰富、富有跳跃性
• 缺点: 容易产生不协调、杂乱刺眼的感觉，比较难把控:
• 
  
• 
  
• 
  
1. 黑白灰是万能的调和色，可以在画面加入黑白灰缓冲其强烈的对抗性3、
1. 可以降低明度、饱和度，调和其对抗性;
1. 要控制好画面的色彩比例，选出一方作为主色调，另一方作为辅助色或者点缀色;

4.6.2 使用配色网站

目前有大量的配色网站可以用来辅助配色，对于配色基础薄弱的新人会有很大的帮助。在这里给大家推荐的是Adobe公司出品的一款极为高效的在线配色工具:Adobe Color。我们可以使用其“色轮”、“从图像撷取”、“探索”、“趋势"四大核心功能来辅助配色。(网址:color.adobe.com)

从“色轮”创建颜色

可以选择一个基础颜色利用七种不同的调色规则创建颜色主题。在设置了基础颜色之后，另外四个关联颜色会自动生成。然后使用色盘、亮度以及不同颜色模式的滑块来建立颜色。

调色规则7种模式从上到下分别为:类比、单色、三元群、补色、复合、浓度、自定

接下来使用Adobe Color进行配色示范

选择橙色为基础颜色，会自动生成四个关联颜色,把生成的颜色配置到设计好的画面中

从图片创建颜色

可以从本地上传图片，选择规则后，会自动从图片中提取颜色。调色规则有彩色、亮色、柔和、深色、暗色、自定。

比如我们上传一张摄影图片，选择规则“彩色"，把获得的五种颜色运用到我们的设计中，就可以做出新的配色方案:

从“探索”创建颜色

从“探索"菜单中可以得到来自于全球各地设计师的配色方案，还可以在此之上进行进一步编辑，或者将该配色下载、保存到“我的主题"。

从“趋势”创建颜色

此功能是从 Behance 和 Adobe Stock的创意社群，获得以下几个类别的色彩趋势

时尚: 透过流行时装探索色彩;图形设计: Behance 上最佳平面设计作品的色彩趋势:插图: 从 Behance 插图收藏馆方案中所撷取的调色盘，建筑: 从室内设计到未来城市风貌，一应俱全，游戏设计: 探索Behance游戏设计师的最新色彩趋势;荒野: 运用自然界的动态调色盘寻找色彩灵感:风味: 透过美食摄影中的最新趋势，探索丰富的色彩旅行: 透过旅游图像中所收集的调色盘

总结

可以看到利用Adobe color可以很轻松做出多个设计方案，但是配色是复杂思考、反复调整的过程配色方案只是给设计师一个参考，更需要根据具体的版面进行调整。虽然通过配色工具可以获得大量的配色方案，但并不是每一组配色方案都适合我们的设计，最终还是要根据客户的需求、受众的喜好、产品的特点去考虑，

4.6.3 借鉴优秀作品

初学者学习设计都是从模仿开始的，模仿优秀的版式，模仿优秀的字体设计等，当然还包括模仿优秀的配色，这是新手最简单、最有效的配色方法。

通过多看多分析优秀作品中的配色，可以提高自己的色彩敏感度，并训练自己调色以及分析作品的能力，这是快速提升配色水平的有效方法。

要注意并不是任何优秀作品的颜色都适合你所设计的作品，只是照搬颜色并不能保证做出好的设计。设计之前要对设计作品所要传达的内容进行仔细的思考和分析，然后观察作品中的色相、色调、明度、气质、氛围等等是否适合自己的设计，更要加入主动性创作.

配色常常从确定主色开始，根据作品主题和视觉诉求的需要，选择一种居于支配的色彩作为主调色彩，构成画面的整体色彩倾向。然后选择副色，添加点缀色，按照色彩组合的原则，颜色平淡可加入适当对比色来使页面产生变化;颜色凌乱可以适当加入同类色、类似色或者黑白灰进行调和。

五、配色应用

虽然配色从理论上来说并没有数量限制，但是你只要能将单色配色、双色配色和三色配色做好，其他四色、五色即使再多的色彩，只要掌握一定的技巧和规律都能够轻松驾驭，因为它的根基和原理是不变的。

5.1 单色

单色配色指的是使用同一种颜色为基调，使单色配色看起来不单调的秘诀在于：使用不同的颜色深浅，微调明度、冷暖、饱和度，调整该颜色的亮度和饱和度，就能够出来有层次感的单色配色，给视觉效果带来统一和和谐，同时也能表现出清新和简约的风格。

单色配色并不是狭义上的只使用一个颜色，而是广义上的单色，使用起来比较简单，并且很容易产生和谐的配色效果。

5.1.1 彩色+黑白灰

最明显、最直接的单色配色就是一个有彩色加上黑白灰。 可能有的人会想，这怎么能算单色啊，明明好几个颜色呢？

因为当有彩色作为背景的时候，多数情况下上方的文字色都是无彩色，所以这种情况的无彩色可以忽略不计不算做颜色，因为毕竟这个画面给人最强烈的感觉就是有彩色的属性，黑白灰只是为了让人识别信息。

比如这个海报就是有彩色粉色作为背景，上方配上黑色的文字，非常简单直接。

这个海报就是有彩色蓝色作为背景色搭配黑白灰。

这个海报相反是以灰色为背景，上方的元素使用了有彩色加白色。

5.1.2 彩色+不同纯度

第二种形式就是一个有彩色搭配这个颜色的不同纯度。

这种同色相不同纯度的搭配整体效果非常和谐，但是需要注意的一点就是纯度的跨度值不能太接近，因为如果太接近的话文字的识别度就会降低。

这个海报的背景色使用的是纯度较高的粉色，上方叠加的文字使用的就是降低纯度之后的颜色。

这个海报的背景色就是由四个由深到浅不同纯度的颜色形成的色块，整体为蓝色调。这个海报的背景是纯度较低的绿色，上方梯形的颜色纯度相对要高一些。

5.1.3 彩色+不同明度

第三种形式的单色配色就是有彩色和它自身不同明度的搭配。

这种搭配效果跟同一颜色的不同纯度看上去差不多，也是需要注意两种色彩之间的明度关系，不能过小以免影响识别。

这个海报上层的色彩使用的就是明度高的黄色，下层带肌理的黄色明度偏低。

这个海报中人物的剪影虽然带有微弱的渐变，但是整体还是明度较低的，而文字的蓝色明度较高。

这个海报的背景色是低明度的深绿色，上方的信息除了非常少的白色就是明度较高的绿色。

5.1.4 彩色 + 不同色调

还有一种形式就是有彩色加不同色调。 在具体配色的时候通常不需要去单独调整纯度明度，可以直接调整色调，更加方便快捷。

使用同一个色相的不同色调往往作性更强，因为限制比较少可能性会更多。 可以根据版面的配色效果来调整纯度和明度，但是需要注意的是具体使用什么色相，这个要根据你的设计内容和气质来决定。

这个海报就属于单色配色的形式，整体为绿色调，通过不同色调来丰富画面的层次。

这个海报同样也是，插图和图片使用的都是黄色的不同色调。

这个海报单色的效果更明显，使用的是蓝色的不同色调。

5.2 双色

双色的配色方法指的是使用两种颜色进行配色的方法。在进行双色配色时，可以选择两种相邻的颜色、两种互补的颜色或两种构成三角形顶点的颜色。此外，还可以通过调整颜色的深浅度来达到更好的配色效果。例如，在双色配色中，如果选择了蓝色和黄色，可以使用深蓝色和浅黄色进行搭配，从而营造出一种清新、明朗的感觉。

5.2.1 黑白

最简单的双色就是白加黑，相信很多人在做设计的时候通常都是先用黑白来代替，最后再配色

黑白没有太多的情感属性，更多的就是白色和黑色自身的特质，至于整体的感觉是什么那就要看是黑色的面积大一些还是白色的面积大一些了。

这个海报就是黑底白字，上方的元素通过黑白来展现层次，没有使用其他颜色。

这个海报也是黑色背景，人物图片也处理成黑色调，结合白色块和交替的黑白文字来丰富画面。

这个海报使用的就是纯白色背景，上方黑色文字，可以说非常纯粹了。

这个和上一个差不多也是白底黑字，只不过文字的数量比较多而已。

5.2.2 同类色

而有彩色的双色可以根据色相关系来划分，如果大家看过我们之前的教程应该都耳熟能详了。

对比最弱的双色搭配就是同类色，也就是在色相环上距离15°左右的颜色。 虽然是最弱的双色搭配，但是可以通过拉开纯度和明度的差异来增强对比。

这个海报就是同类色双色搭配，背景色为橙黄色，上方人物图形为黄色。

这个海报也是同类色双色搭配，但是背景看上去跟上方的深色对比很强，这是因为调整了纯度和明度。

这个海报的文字色并没有使用同一个色相的不同色调，而是在色相上稍微有些差异，也就是同类色

5.2.3 近似色

比同类色对比稍强的双色搭配就是近似色，也就是在色相环上位置大约在45°左右的颜色。

近似色所产生的配色效果相对来说也是比较和谐统一的。

这个海报的背景色和上方的线条色使用的就是近似色，只不过线条的黄色降低了明度增加了对比，但是线条的形态又适当的减弱了对比。

这个海报的背景色是橙色，上方的文字色是黄色，保证了识别度的同时又让整体的效果协调统一。

这个海报和上一个海报类似，也是红黄两色的搭配，但是这里又使用了不同色调。

5.2.4 中差色

然后是中差色，也就是选取在色相环上位置大约在90°左右的两个色彩。

中差色的对比强度位于中间位置，属于比较中性、安全的双色搭配，既有足够的色彩对比，又不会过于刺激强烈，还具有一定的和谐性。

这个海报中图形的绿色和背景的蓝色就属于中差色对比，上方文字的深蓝色是在背景蓝色的基础上通过增加纯度降低明度所得到的，这也是一个双色配色的小技巧。

这个海报的配色也是中差色对比，在大面积深蓝色背景上使用绿色，由于是中差色对比并且还有无彩色白色做调和让整个版面的配色美观协调。

这个海报也是蓝色和绿色的中差色。 其实大家不难发现，并不是色彩越多就越好，只要配色合理都可以得到很美观的效果。

5.2.5 对比色

接下来是对比色，也就是在色相环上大约120°左右的色彩。

对比色的对比效果强烈，属于使用较多的双色搭配，最常见的就是红配绿，还有就是红配蓝也是典型的对比色。

这个海报的标题文字使用的就是对比色，只不过调整了纯度和明度。 所以大家不要一想到对比色就是那种大红大绿的，完全可以通过调整来减弱对比。

这个海报通过紫红色和蓝色的对比色关系以及相等的面积对比来强调色彩印象。

这个海报同样也是使用了对比色。

5.2.6 互补色

最后是对比最强的双色搭配，也就是互补色配色，互补色在色相环上的距离大约在180°左右

互补色的对比效果最强烈，形成的配色效果非常刺激并且具有冲击力，合理的运用在相关的设计内容上可以极大的引起注意力，给人眼前一亮的感觉。

这个海报使用的配色就是红色和青色的互补色对比，但是降低了纯度，背景的白色空间起到了缓冲作用，互补色的叠印又丰富了画面的层次。

这个海报使用的双色也是互补色关系，通过纯度和明度的调整也可以产生很和谐的效果。

这个海报的图片色是黄色，上方的文字色使用的是蓝色，也是一种互补关系。

5.3 多色

多色的配色方法指的是使用 3 种或 3 种以上的颜色进行配色的方法。在进行多色配色时，可以选择一种主色（主要颜色），并使用与之搭配的两种或两种以上的次色（次要颜色）。例如，在多色配色中，如果选择了蓝色作为主色，可以选择绿色和红色作为次色，从而营造出一种自然、和谐的感觉。

在进行多色配色时，可以参照60:30:10的分布比例来选择颜色。这种分布比例可以让设计看起来更有层次感，并且很少出错。60%的颜色通常是中性色或主色，用作设计的基色；30%的颜色是次要颜色，与主色搭配使用；10%的颜色是点缀色或强调色，用来突出某些部分或强调某种氛围。总之，使用60:30:10的分布比例来进行配色，可以让设计看起来更加和谐美观。

5.3.1 黑白灰

首先第一种就是黑、白、灰。理论上来讲黑白灰的配色可以看作是单色，也可以看作是双色，也可以看成三色，都对，为了便于大家理解这里给它们划分的更具体了一些。

如果说黑白配色给人的印象是强烈、直接，那么黑白灰的配色会缓和许多，给人更多的是一种层次感和递进关系。如果说黑白配色给人的印象是强烈、直接，那么黑白灰的配色会缓和许多，给人更多的是一种层次感和递进关系。

这个海报整体分为三个层次，最底层是黑色，然后是灰色，最上层是白色。

这个海报跟上一个差不多也是黑白灰配色，只不过背景换成了白色。

这个海报的黑白灰不像前两个那么直接，而是通过图形和图像的色调来表现的，但是整体上也是黑白灰配色。

5.3.2 近似三色

然后是有彩色的第一种三色形式，近似三色。

顾名思义，近似三色就是三个近似色组合在一起的色彩搭配，比如画面中的这几组配色都是近似三色。

这个海报的背景是绿色，上方插图的颜色使用了红色和黄色，整体的配色属于近似三色。

这个海报中的图形使用的也是近似三色，既能很好的区分色块同时又能达成整体协调统一的效果。

这个海报属于纯文字版式，通过色块来增加变化，使用的配色类型也是近似三色。

5.3.3 对比三色

然后是对比三色，也是使用比较多的三色搭配。

三个对比色组合在一起对比效果强烈鲜明，通常给人的第一印象很抢眼。但是当色彩使用数量从三色往上开始，我们就要注意一个我们之前讲过的色彩概念了，就是调和，因为对比强烈，所以色彩的纯度和明度就显得格外重要。

这个海报中使用的三个颜色就是典型的对比三色红绿蓝。

这个海报也是红绿蓝的对比三色，但是跟上一个海报相比色调要更亮一些。

这个海报有些复古的感觉，颜色上也是使用的对比三色，有些鬼魅的感觉，跟主题也是相符的。

5.3.4 分裂补色

然后是分裂补色，前面我们讲过互补色就是在色相环上距离180°左右的色彩，而分裂补色就是一个颜色和它对应的补色两侧相邻的颜色搭配。

这种配色既有补色的对比同时又通过分裂出的补色来缓和这种对比，可以起到适当的中和作用，通常配色效果都很好。

这个海报使用的三个颜色就是分裂补色，整体色调统一配色效果非常和谐。

这个海报的背景使用了灰色，在上方使用了分裂补色的有彩色，通过面积的分布来做调和。

这个海报虽然使用了不同色调，红色的纯度和明度比较高，但是整体分裂补色的配色特征还是有的。关于单色、双色、三色的几种最常见的形式已经介绍完了，这些都是最基本、最实用的方法，至于四色、五色、甚至更多的色彩，其实已经跟色相的关系不大了，更多的是使用色彩调和，通过色相的对比以及调和的缓冲来达成协调美观的配色效果。

5.4 案例

最后我们来看看案例演示。这次我们设计一个品牌时装的网页首屏，首先创建版面拉出网格，这里我们使用的十六栏网格。

先用黑白灰创建版面，填充色块。

然后将文字内容编排到版面上方，根据网格约束摆放位置，提取关键信息放大处理编排到版面下方。

因为要使用到图片，所以要留出图片的空间，先用色块来代替大致的摆放位置。

然后向下移做一些出血处理，并且增加图片的大小对比，打破版面呆板的布局。

然后将图片填充到色块位置。

下方底层文字由于被图片遮挡影响识别，所以我们可以在空白处做一个重复编排。

最后将其余信息依次编排进来，这个版面就设计完成了，这个黑白效果还是不错的。这里教大家一个小技巧，就是你在设计的时候先用黑白灰来填充颜色，如果这个版面在黑白灰的状态下看上去都很美观，那么其实你之后的配色只要不是太差基本上都不会出问题，而如果你的版面在黑白灰的状态下看上去都很别扭，那么一方面可能是色彩面积和布局的问题，另一面可能就是版式的问题，这个小技巧可以帮助大家做自我检查。

版式我们设计完了，接下来我将本期教程中的所有配色方法都用在了这个版式上，首先是单色中的第一种方法，有彩色加黑白灰。

然后是有彩色加不同纯度。

有彩色加不同明度。

有彩色加不同色调。

然后我们再来看双色，首先是黑白配色。

然后是同类色。

近似色。

中差色。

对比色。

互补色。

最后是三色，首先是黑白灰。

然后是近似三色。

接下来是对比三色。

最后是分裂补色。

六、如何化解互补色之间的冲突

互补色对比性强烈，因此在视觉上会产生极大的隔离作用。但由于色相对比过大，配色难度也最大。如何化解互补色之间的冲突感，是用好互补色的关键。可以通过以下三点做好配色：

• 通过面积比来达到平衡；
• 调整明度与饱和度来减弱色彩冲突；
• 加入中性色缓冲其强烈的对抗性。

6.1 互补色的定义

互补色分为“光学互补色”和“印刷（色料）互补色”两种。 光学互补色：两种色光以适当的比例混合，能产生白光时，则这两种颜色就称为“互为补色”。 本文主要探讨的是印刷（色料）方面的互补色：在色相环上相对180°角的两种颜色，这两个颜色混合会得到灰色。

互补色由于在色环上相距最远，色彩差异最大，色彩对比很强烈，合理的搭配往往会产生强烈的视觉冲击力。

虽然从色环上来看，互补色可以有很多组，但最常用的互补色有3组，分别是红和绿、蓝和橙、紫和黄。

由于红色和绿色在色相上缺乏共性，放在一起会造成极强的视觉反差，搭在一起容易有格格不入、扎眼的感觉，容易出现散乱、土气的感觉。

要取得好的视觉效果，则需要使用一些调和手段，可以在明度、饱和度上中和两种色彩的突兀，使其形成和谐统一的对比。

蓝橙是一组经典的冷暖互补色，温暖的橙色在与偏冷的蓝色搭配时，更加醒目，活泼的橙色可以很好的缓解深蓝色的沉闷，增加画面的愉悦气氛，可以很好的营造出画面的层次感。

紫色和黄色不论是色相还是明度差异都非常大，因此黄色与紫色的搭配容易产生相当高的视觉强度。

互补色对比性强烈，因此在视觉上会产生极大的隔离作用。由于色相对比过大，配色难度也最大，如何化解互补色之间的冲突感，是用好互补色的关键。

6.2 通过面积比来达到平衡

如果使用面积相近的互补色的搭配，具有强烈的冲突感，产生的视觉效果强烈而鲜明，情感浓烈，令人记忆深刻。非常适合夸张的、张扬的情感表达。

大多数情况下，我们会选择一种颜色作为主色调，大面积的色相占据主导位置，再用小面积的互补色去点缀画面。这样才能表现出主次关系和丰富的色调效果，色彩对比强烈却又不违和。

6.3 调整明度与饱和度来减弱色彩冲突

高明度与高饱和的互补色搭配，对比强烈，在视觉上会产生极大的隔离作用，它们组合在起，会产生相互衬托、相互抗衡、相互排斥的感觉，并使各自的色相更显突出，更为艳丽，具有强烈的视觉冲击力。

可以考虑降低互补色的明度与饱和度，来减弱冲突，既保留了对比色搭配的特点，同时降低了过强的视觉刺激。

6.4 加入中性色缓冲其强烈的对抗性

互补色鲜艳热烈，而中性色（黑白灰）则刚好相反，它们毫无情绪感，中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。通过中性色的调和，既保持了互补色所带来的丰富的层次感，也避免了互补色之间强烈的冲突。

七、Photoshop 中的关键色彩工具和面板

7.1 拾色器 (Color Picker)

• 点击前景色/背景色方块打开 (D 恢复默认黑白， X 切换前景背景)。
• 选择颜色的核心界面。支持多种模型 (HSB, RGB, Lab, CMYK) 输入。
• 重要区域:
• 色域警告 (Out of Gamut for CMYK): 小立方体图标。点击后会将当前 RGB 颜色替换为最接近的可印刷 CMYK 颜色，并显示警告三角。
• Web 颜色警告 (Not Web Safe): 小立方体图标。点击后将颜色限制在 Web 安全色 (已过时，现代显示器基本不需要)。
• 颜色库 (Color Libraries): 可访问 Pantone 等专色系统。

7.2 颜色面板（Color Panel）

• 快速调整和选择前景/背景色。
• 可切换滑块模式 (RGB, HSB, CMYK, Lab, Grayscale)。
• 底部的色谱条可直接取色。

7.3 色板面板 (Swatches Panel)

• 存储、管理和应用常用颜色（包括专色）。
• 可载入系统预设或自定义色板库。
• 添加颜色：将前景色拖入面板空白处或点击 新建 图标。
• 应用颜色：直接点击色板。

7.4 调整图层 (Adjustment Layers): 非破坏性编辑色彩的核心！

• 位于图层面板底部 fx 图标旁边的半黑半白圆图标，或 图层(Layer) -> 新建调整图层(New Adjustment Layer)。
• 在图层上方添加一个调整层，影响其下方所有图层（或通过剪贴蒙版只影响一个图层）。
• 核心色彩调整图层:
• 整体或针对特定颜色范围（下拉菜单或手动吸管取样）调整 色相 (颜色轮转)、饱和度、明度。
• 着色 (Colorize): 将整个图像转换为单色调（类似添加颜色滤镜）。
• 自然饱和度：智能提升较低饱和度颜色的鲜艳度，保护肤色等已饱和颜色不过曝。
• 饱和度： 等量提升所有颜色的饱和度。
• 色阶 (Levels): 调整图像的阴影、中间调和高光。通过黑、灰、白滑块控制输入/输出色阶。直方图是重要参考。
• 曲线 (Curves): 最强大精细的调整工具。通过曲线控制图像从暗到亮各个亮度区域的对比度和颜色（可分别调整 RGB 总合或 R, G, B 单独通道）。S 形曲线增加对比度。
• 曝光度 (Exposure): 主要针对 HDR 图像，调整“曝光度”、“位移”、“灰度系数校正”。
• 自然饱和度 (Vibrance) / 饱和度 (Saturation):
• 色相/饱和度 (Hue/Saturation):
• 色彩平衡 (Color Balance): 在阴影、中间调、高光区域分别添加或减少青色/红色、洋红/绿色、黄色/蓝色。快速纠正色偏。
• 黑白 (Black & White): 将图像转换为灰度，并可精细控制不同颜色区域转换为灰度后的明暗程度（模拟滤镜效果）。
• 照片滤镜 (Photo Filter): 模拟在镜头前加有色滤镜的效果（加温/冷却/自定义颜色）。
• 通道混合器 (Channel Mixer): 通过混合不同颜色通道（R, G, B）的百分比来创建特殊效果或高质量的黑白转换。
• 颜色查找 (Color Lookup): 应用预设的 3D LUT (Lookup Table) 文件快速获得电影级调色效果。
• 可选颜色 (Selective Color): 针对图像中的特定颜色（如红色、黄色、绿色、青色、蓝色、洋红、白色、中性色、黑色）中的 CMYK 四色油墨比例进行调整。非常精细，常用于高端印刷调色和修图。
• 渐变映射 (Gradient Map): 将图像的亮度信息映射到指定的渐变色上，产生戏剧化或艺术化的色调效果。

7.5 信息面板 (Info Panel)

• 实时显示光标下方像素的颜色值（可设置显示不同模式如 RGB, CMYK, Lab, HSB, 灰度）。
• 显示选区的大小（W, H）。
• 校样颜色 (Proof Colors) 模式下 (Ctrl+Y / Cmd+Y)，信息面板会同时显示当前 RGB 值和转换后的目标 CMYK 值，是印刷前检查溢色的重要工具。

7.6 直方图面板 (Histogram Panel)

• 图形化显示图像中像素的亮度分布（0-255）。
• 重要参考：
• 左端 (阴影): 像素集中在左边？图像可能曝光不足。
• 右端 (高光): 像素集中在右边？图像可能过曝。
• 中间 (中间调): 分布形态决定对比度。
• 两端溢出 (撞墙起墙): 图像有纯黑（左端溢出）或纯白（右端溢出）区域，可能丢失细节。
• 选择 扩展视图 和 全部通道视图 查看更多信息（如各颜色通道直方图）。

7.7、色彩工作流程与最佳实践

1. 设定正确的色彩设置： 项目开始前，根据最终输出目标 (编辑 -> 颜色设置cmd+Shift+K）) 设定好工作空间和管理策略。这是所有色彩工作的基础！
2. 处理 RAW 文件： 如果是摄影，尽量使用 Camera Raw (ACR) 处理 RAW 文件。ACR 提供强大的原始数据调整能力（白平衡、曝光、HSL、曲线等）且是非破坏性的。在 ACR 中设置好色彩空间和位深度（推荐 Adobe RGB + 16位/通道）。
3. 使用调整图层： 尽可能使用调整图层进行色彩编辑，而非直接应用 图像 -> 调整 菜单下的命令（后者是破坏性的）。调整图层可随时修改、隐藏、删除或修改不透明度/混合模式。
4. 利用图层蒙版： 结合调整图层的蒙版，将色彩调整精准地应用到图像的特定区域。
5. 利用剪贴蒙版： 让调整图层只影响其下方紧邻的一个图层。
6. 非破坏性饱和度调整： 用 自然饱和度 调整图层代替 饱和度，效果更自然不易过饱和。
7. 利用曲线进行精细调整： 掌握曲线工具是专业调色的标志。可分区调整亮度/对比度，也可在单独颜色通道中校正色偏或创造风格化色调。
8. 检查溢色 (Gamut Warning) (Shift+Ctrl+Y / Shift+Cmd+Y):
• 在 RGB 模式下工作，但最终需要 CMYK 印刷时，务必开启校样颜色 (Ctrl+Y / Cmd+Y) 并选择目标 CMYK 配置文件。
• 然后开启溢色警告 (Shift+Ctrl+Y / Shift+Cmd+Y)。无法被 CMYK 准确再现的 RGB 区域会以灰色（默认）覆盖显示。
• 使用 色相/饱和度 或 可选颜色 等调整图层，配合蒙版，降低这些区域的饱和度或轻微调整色相，使其进入 CMYK 色域。同时观察信息面板中的 CMYK 值变化。
9. 转换为 CMYK 输出： 所有编辑完成后，最后一步才将图像转换为 CMYK 模式 (图像 -> 模式 -> CMYK 颜色)。转换时选择正确的目标 CMYK 配置文件和转换意图（通常 可感知 或 相对比色）。转换后检查颜色变化，可能需微调。
10. 软打样 (Soft Proofing) (Ctrl+Y / Cmd+Y): 在屏幕上模拟最终输出设备（如特定打印机+纸张）的色彩效果。在 视图 -> 校样设置 中选择目标设备配置文件。结合信息面板查看模拟后的颜色值。这是印刷前极其重要的验证步骤。
11. 为 Web 优化： 最终输出为 Web 时：
• 确保图像模式为 RGB。
• 将色彩空间转换为 sRGB (编辑 -> 转换为配置文件...，目标空间选 sRGB IEC61966-2.1)。
• 使用 文件 -> 导出 -> 导出为 或 存储为 Web 所用格式 (旧版)，选择 JPG 或 PNG，并注意勾选 嵌入颜色配置文件 (虽然现代浏览器基本都支持色彩管理，但嵌入更保险)。
• 检查文件大小和视觉质量的平衡。

7.8、调色必备 4 个面板

30 秒总结口诀

1. 选模型：RGB 做屏，CMYK 做纸，Lab 做高端。
2. 定模式：8 位够用，16 位防色带。
3. 挂 ICC：拍摄/设计/输出全程带 ICC，颜色不乱跑。
4. 软打样：印刷前必做，灰色遮罩就是溢色区。 掌握「模型-模式-空间-管理」四连击，Photoshop 任何与颜色相关的按钮都不再神秘。

八、 参考文献

 配色技巧全攻略，基础色彩学与14 个配色网站(工具)介绍

用颜色勾住你的心-不可不知的色彩心理学

【色彩学重点入门】一次搞懂对比 / 互补色、彩度明度、色相环的重要观念设计配色完整攻略：色彩意义、色彩理论、色彩心理学让您一次拥有！

UI设计师，你真的会用色吗？

浅谈色彩功能——主色、副色、点缀色

3种常用的色彩搭配方法

# 所谓配色达人，就是一次出48个方案

设计时有哪些配色技巧？3种配色逻辑优劣势

张姆斯知乎回答：如何学习配色？

听说这是最难的配色 互补色搭配