新手学配色，看这篇《色彩设计原理》读书笔记就够了（一）

拉面Ramen Wu：本笔记主要摘录本书各章节的核心内容，作为复习旧知识的新目录和反复精读的索引。我希望你能从喜欢色彩搭配设计的人那里得到一些东西。

Chapter 1 色彩基础（Basic Knowledge of Color Rules）

1.1 色彩的构成

1.1.1 什么是色彩

印刷设计：颜色是可见光在物体颜料上去除被吸收的光后散射出来的光的颜色，是一种「反射色」

互联网设计：颜色是白色光通过电子屏幕后的颜色，是一种「透过色」

1.1.2 色彩的构成

色相：用于区分红色、黄色、蓝色等颜色的主要特征

纯度：纯度用于表现色彩的亮度和深度

亮度：亮度是指颜色的亮度或亮度

Tips：色相比较容易理解，但由于明度和纯度的概念比较抽象，为了便于理解，我们可以这样记忆:

接触过水粉画的朋友应该知道，在颜料中加入的水粉越多，纸上的水粉颜料的颜色厚度越薄，颜色越浅，所以我们可以理解颜色的纯度是纸上的水粉颜料的厚度（纯度越高，颜色越厚越亮；纯度越低，颜色越薄），颜料下的纸颜色可以理解为亮度（纸颜色越白，水粉效果越清晰，亮度越高；纸颜色越黑，水粉效果越浑浊，亮度越低）。

1.1.3 RGB与CMYK

RGB色彩模式:是工业界的一种色彩标准，通过红、绿、蓝三种色彩通道的变化及其相互叠加，获得各种色彩。

CMYK色彩模式：当阳光照射到物体上时，物体会吸收部分光线并反射剩余光线。反射光是 物体的颜色是人们看到的。

1.2 色彩的功能

1.2.1

颜色可以对人们的心理产生一定的影响，同一颜色在不同国家和文化背景下的印象也不同，更不用说过度期待这种颜色对心理的影响了。

例如，中国总部的红色代表“喜庆”、“热情”的意思，但在一些西方国家，红色和“财政赤字”（Be in the red）有关联。此外，红色还有“危险”。、“紧急”的意思就像Red Alert意味着“空袭”、暴风雨袭来的“警告声”。

1.2.2 冷色与暖色

根据心理感受，颜色分为暖色调(红、橙、黄)、冷色调(青、蓝)和中性色调(紫、绿、黑、灰、白)。

暖色被认为会增加血压和心跳次数，刺激自律神经系统，增强性欲和食欲；冷色有相反的效果。因此，许多餐饮行业或烹饪书籍更适合暖色，以使食物看起来更美味，刺激食欲。

虽然可以用「冷」、「暖」颜色系统来划分颜色，但配色的变化是千种多样的。通过颜色的组合，从「非常冷」到「凉爽」到「暖和」再到「炎热」色彩印象可以用不同的配色组来表现。

1.3 色彩印象坐标

1.3.1 印象地图

为了具体化一些难以用语言表达和不稳定的印象，并向他人解释，可以使用它们。「印象地图」的方式。

印象地图的制作过程：首先收集足够多符合印象的材料，然后将材料粘贴在纸或展板上。制作出来的成品看起来可能有点乱，但很容易理解，稍微拉开距离，或者尝试将其处理成马赛克效果。

1.3.2 单色印象坐标

仔细筛选出多个能表达人们对颜色感觉的形容词，然后用SD方法对不同工作和生活环境中的1000人进行相关测试。用于测试的颜色是色相&色调（Tue & Tone）表中有116种不同的颜色。“单色印象空间”是科学整理测试数据的结果。从结果中可以看出，当人们评估颜色时，最常用的四个形容词是“柔和”（Soft）”、“生硬（Hard）”、“动态（Dynamic）”、“静态（Static）。

将这两种印象的值分别作为二维坐标系上的横纵坐标值，得到的点的集合称为“单色印象空间”。

1.3.3 配色印象坐标

当我们设计网站或广告时，我们永远不会只使用某种颜色，通常需要使用多种颜色来获得更好的颜色匹配效果。为了评估各种颜色的混合使用，需要引入一种新的分析方法——颜色匹配印象空间。

给人静态柔和的感觉，通常是隐约柔和的颜色搭配；

动态柔和的感觉通常是明亮颜色之间的搭配；、

给人一种动态生硬的感觉，通常是亮色和浑浊暗色之间的搭配；

给人静态生硬的感觉，通常是灰色和冷色之间的搭配。

在“配色印象空间”中，距离较远的颜色之间的印象会有很大的差异，而距离较近的颜色之间的印象会相似，也就是说，颜色之间的距离与印象的差异成正比。

1.4 配色网站

LOL Colors（http://www.lolcolors.com）：该网站是一个非常简单和可爱的在线配色工具，将鼠标光标移动到颜色上方，颜色代码将显示在右侧（Hex Code），您可以在选择颜色后复制代码，并在您的设计项目中使用颜色。

详细介绍本网站，请参考：“在线配色网站+谷歌免费MATERIAL风格图标”

Chapter 2 协调配色（Harmonious Color Configuration）

2.1 色彩属性一致的配色

2.1.1 色相一致的配色

同色配色是指主色和辅色均在统一色相上，这种配色方法往往给人一种页面非常一致的感觉。

同色搭配色容易营造出更梦幻的感觉，但因为比较简单，不容易引人注目，会给人一种单调的感觉。

如果你想在颜色变化中融入一点微妙的变化，你可以尝试在色环中选择两侧相似的颜色，这样颜色层次丰富，统一感不会改变，称为“相邻的颜色匹配”。

相邻的颜色是指颜色环中相邻的两种颜色。相同的颜色匹配和相似的颜色匹配通常会给人一种安静和整洁的感觉。例如，当绿色被用在蓝色旁边时，它肯定会给人一种更和谐和整洁的感觉。

2.1.2 明度一致的配色

亮度是指颜色的亮度。与“纯度”和“色相”相比，亮度使眼睛更容易感受到“变化” 颜色属性，所以无论使用什么颜色，只要颜色的亮度相结合，都能表现出一种统一感。

从图中可以看出，色彩本身就有明度的特征，很难被人眼判断，但更容易被察觉。

通过分析上述过滤饱和度的色带，我们也可以看到很多有趣的信息，但这里没有具体说明。

为了有效地匹配明度一致的颜色，可以用灰色代替颜色，并利用灰色手稿之间的明度差来明确元素之间的差异。

亮度一致的配色不会有强弱对比，不适合需要引人注目的广告用途。但通常设计中不会使用所有亮度一致的配色，但在某些部分添加一些变化是个好主意。

2.1.3 配色纯度一致

纯度表示颜色的亮度。与“亮度”和“色相”相比，纯度更容易影响人们的心理印象。其中，纯度越高，就越令人兴奋（图1）；纯度越低，越平静(图2)；高低纯度混合配色难以统一(图3)。

在高纯度配色中，色彩数量的增加会给人一种活泼愉快的印象；如果颜色数量减少，会有强烈而强烈的印象。

在低纯度配色中，由于色相变化小，颜色数量不能有效影响人们的印象。

Chapter 3 强调设计配色（The Color Co-ordination for Pair Designed）

在设计构思的过程中，请时刻记住“在想要它突出的部分使用对比”的标准。

所谓“对比”（Contrast）它指的是几个设计元素之间的“差距”状态，不仅指颜色，还指图片设计或文本的组合。

色彩对比是指色彩组合时产生的“差距”的大小。在设计过程中，只要在色彩的某个元素上添加差距，就可以产生不同的组合方式，如明度对比、纯度对比、色相对比等。(明度对比 > 纯度对比 > 色相对比）

3.1 对比形成的颜色属性

3.1.1 明度对比

由于人眼对明度差异的敏感度高于任何其他对比度，因此明度之间的对比度非常强烈。

设计的“识别度”(易于识别元素的指数)和“可读性”(指文本的易读性)可以通过良好的明度对比来提高。

3.1.2 纯度对比

由于人们的眼睛很容易被鲜艳的颜色所吸引，高纯度的颜色可以用来强调作品的一部分。

高纯度的色彩组合很容易形成一种奇特的感觉，所以明亮的作品需要使用高纯度的颜色来突出某一部分，同时降低周围元素的色彩纯度，然后考虑如何引导视线如何进行排版。

低纯度的配色可以给人一种平静或怀旧的感觉，但当与高纯度的颜色结合在一起时，它将使设计作品几乎具有戏剧性的效果，适用于追求戏剧张力的设计，如电影海报或小说封面。

3.1.3 色相对比

色相对比是将不同色相的颜色组合在一起，借助不同的颜色创造对比效果。

在色环中相聚较远的配色组合效果较强；相反，它就越弱。（值得注意的是，在高纯度的互补色组合中，由于视觉图像和颜色边界的“光晕”现象，会使读者眼镜疲劳，文本难以阅读）

当组合不同颜色的颜色时，颜色的感觉也会有所不同。例如，同样的橙色，如果与红色并排组合，看起来会有一些与红色相反的颜色（如黄色和绿色）；相反，如果它与黄色或绿色并排组合，它看起来会变红。

Chapter 4 配色方法（Method of Color Co-ordination）

接下来，我们将根据三大类配色方法，结合一些案例，分析页面中颜色的应用方法：

4.1 色差形成的配色方法

在色差形成的配色中，我们主要研究具有主导色差的配色，这是由一种色相组成的统一配色。也就是说，如果不是相同的色相，色环上相邻的相似颜色也可以形成相似的配色效果。当然，也有一些颜色差距很大的做法，比如对比色，或者是否有颜色对比，但这里首先是关于主导颜色的配色案例。

根据主色与辅色的色差，可分为以下类型：

1. 同色系配色

2. 邻近色配色

3. 类似色配色

4. 中差色配色

5. 对比色配色

6. 中性色配色

7. 配色多色

4.1.2 同色系配色

同色系:指色相性质相同，但色度分为深度。(是色相环中的15。°夹角内的颜色)如深红色和深红色。

同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人一种页面非常一致的感觉。

Twitter 的案例：

Twitter的整体蓝色设计给人留下了统一的印象。颜色的深度分别承载不同类型的内容信息，如信息内容模块。白色背景代表用户内容，浅蓝色背景代表回复内容，深蓝色背景代表可回复操作。颜色主导信息水平，保持Twitter的品牌形象。

4.1.2 邻近色配色

相邻颜色:相邻颜色在色带上，如绿色和蓝色，红色和黄色是相邻颜色。

相邻配色方法比较常见，搭配比同色系略丰富，色调柔和过渡也显得十分和谐。

ALIDP案例：

高纯度的颜色基本上用于组件控制部件和文本标题的颜色。每个控制部件使用相邻的颜色，使页面不那么单调，然后降低颜色饱和度，以划分不同的背景颜色和模块。

观点：基于品牌颜色的相邻颜色应用，灵活应用于各种控件。

4.1.3 类似色配色

类似颜色：在色轮上90度角内相邻的颜色统称为类似颜色。例如，红色－红橙－橙.黄－黄绿－绿.青－青紫－紫等是相似的颜色

类似的配色也是常用的配色方法，对比度不强，给人一种平静和和谐的感觉。

BENMAPT案例：

红色和黄色的主页，颜色基本上用于不同组的控制性能，红色用于导航控制器、按钮和图标，但也用作辅助元素的主要颜色。用橙黄色代替品牌颜色，用于内容标签和背景搭配。

观点：基于品牌颜色的类似颜色的使用，主要用于页面的各种控件和主要内容。

4.1.4 中差色配色

中差色：中差色对比是色相环上90度角的颜色组合。它介于类似颜色和对比色相之间。由于色差明显，色彩对比效果明显。即红橙、橙黄、黄绿、绿蓝、蓝紫、紫红等。中差色对比度相对突出，色彩对比度明快，容易呈现高饱和度的色彩。但很容易产生一种沉闷的感觉。

facebook案例：

色彩深度创造了一种空间感，但也有助于内容模块层次的划分，统一的深蓝色系统应用，传播品牌形象。中间色绿色按钮在丰富页面颜色方面发挥了作用，但也突出了绿色按钮的最高任务水平。深蓝色天花板导航通过整个车站路径，并指导用户向下阅读。

观点:利用色彩对比突出按钮任务优先级，增加页面氛围。

4.1.5 对比色配色

对比色:色相环中每种颜色对面(180度对角)的颜色称为“对比色(互补色)”。把对比色放在一起会给人强烈的排斥感。如果混合在一起，会调出浑浊的颜色。比如:红与绿，蓝与橙，黄与紫对比色。

YouTube案例：

红色的活泼反映了丰富多彩的内容。品牌红色赋予组件控制颜色和可操作任务，贯穿整个网站的可操作提示，并能反映品牌形象。红色代表导航指南和类别分类，蓝色代表登录按钮，默认用户头像和标题，显示用户生成的内容信息。

观点：针对系统操作和用户操作的区别，红蓝反映了不同交互和信息的可操作性。

4.1.6 中性色配色

以一些中性色彩为基调搭配，常用于信息量大的网站，突出内容，不受不必要的色彩干扰。这种过度配色更通用，非常经典。

Bechan案例：

黑色突出了网站导航和内容模块之间的区别。品牌蓝色主要用于可点击的操作控制器，包括用户名称和内容标题。与大规模使用品牌颜色的技术相比，它可以突出内容和信息，适用于以内容为王的通用和平台网站。

观点：以大面积中性色为主色，品牌色在这里起到画龙点睛的作用，用于一些需要突出重点的场景，强调交互状态等。

4.1.7 多色搭配下的主导地位

主色与其它搭配色之间的关系会更加丰富，可能会有类似的颜色、中差色、对比色等搭配方式，但有些颜色会占主导地位。

Google案例：

对于产品线丰富的谷歌来说，根据一定的纯度比，无色黑白灰可以搭配不断变化的配色方案，让品牌感觉非常统一。在大多数页面上，蓝色将作为主导颜色，其他三种颜色将作为辅助颜色，并设置不同的任务属性。黑、白、灰主要用作辅助颜色。对于平台网站，多色主导具有很好的延展性。

观点：谷歌在界面中设置了四种品牌颜色，通过主次、合理的比例应用，并在不同的交互状态下合理分配功能任务。

经典的谷歌色彩搭配，一直延续到各种产品。

4.2 色调和谐形成的配色方法

4.2.1 配色有主色调

这是由相同颜色组成的统一配色。类似的颜色搭配，如深色和深色，也可以形成相同的配色效果。即使有多种颜色，只要颜色保持一致，图片也可以呈现整体统一。

根据色彩的情感，不同的色调会给人不同的感受，大致分为以下几类: