别以为，色彩的知识你全懂了之基础知识篇——色彩系列第 01_01 篇

目录

一、学习目的及概述

二、基础知识

(一)色彩的基本特征

• 1、色系
• 2、色彩三属性
• 3、色调
• 4、色彩混合
• 5、色环及色彩对比
• 6、色彩模式

(二)色彩的情感表现

• 1、色彩的心理
• （1）色彩的冷暖
• （2）色彩的轻重
• （3）色彩的空间变化
• （4）色彩的软硬
• 2、色彩的知觉
• （1）后像
• （2）恒常性
• （3）同化与异化现象

三、尾巴

 

一、学习目的及概述

人脑对于色彩的记忆度要高于形态，可以回想一下我们熟悉的品牌，想到小米，你首先想到的是橙色，想到支付宝，你会联想到蓝色，而想到微信，你自然想到的是绿色，以上品牌的 logo 形态你可能会思考一会儿才能想得起来，但品牌色你会脱口而出，这就说明了色彩对于占领用户心智的重要性以及我们学好色彩的必要性。

在正式开始这篇文章之前，我们需要明白我们学习色彩是在学习什么？先从色彩的定义开始，色彩是人眼对不同频率光线(可见光)的不同感受，色彩既是客观存在的，又是主观感知的，地域、文化的不同，会导致不同群体之间产生色彩的认知差异，而我们学习色彩的过程既要掌握人类对色彩认知的共性，也要掌握不同地域文化对不同群体产生的特异性，把复杂的色彩现象还原为基本要素，组合这些不同的基本要素产生目标效果，这里的目标效果分      两部分：

第一部分：在目标用户的情感与色彩审美（目标用户）之间建立桥梁，让二者无缝衔接。例：我们可能都有切身体会，对于室内装修，父母跟我们之间的审美差异很大，像我的装修风格是以黑白灰为主，但我父母就喜欢色彩更丰富一些，不说审美高低，如果室内设计的目标用户是我父母这辈人，或我们这辈人，选色用色上一定是不一样的，对不同类型的用户要达到不同的目标效果，这才是设计；

第二部分：色彩的选择与信息优先级的匹配，例：我们知道了暖色是前进色，冷色是后退色之后，我们会将优先级更高的元素设置为暖色，而将次要元素设置为冷色或无彩色系，让用户先看到更重要的部分。

如果没有扎实的色彩基础知识，想要让色彩在设计上达到目标效果，只靠感觉会很困难，不啰嗦了，开始正文吧。

 

二、基础知识

 (一)色彩的基本特征

1、色系

（1）无彩色系

顾名思义，无彩色系就是没有彩色，是指黑色、白色或由这两种色彩调和形成的各种深浅不同的灰色组成的色系。（见下图 1-1.1.1）

注：在下文讲述的色彩三属性当中，无彩色系色彩只具有明度这一种色彩属性。（对此下文会有详解）

 

（2）有彩色系

有彩色系是指除无彩色系以外的色彩，即红、橙、黄、绿、青、蓝、紫等。（见下图 1-1.2.1）有彩色系色彩具有色彩的三个基本特征——色相、明度及纯度。（下文会有详解）

 

2、色彩的三属性

我们用眼睛和科学观测方法能够看到和辨别清楚的色彩多达750余万种，但他们（不包括无彩色系色彩）之间都有共同的三个属性：色相、明度及纯度（饱和度），这三个属性是我们在选色用色中主要的考量方式之一，它们的结合可以让我们随时随地的记忆和再现色彩。

 

（1）色相：指色彩的相貌，反映了色彩与色彩之间的差别所在。

从光学角度来说，由于光之间波长的（波长（wavelength）是指波在一个振动周期内传播的距离。）不同，在人眼中产生的色彩也就不同，即使是同一色相，也会产生成百上千种色彩。（见下图 1-2.1.1）

为了区分不同的色彩，我们为色彩定出了名称，而每个名称对应一个特定的色彩印象，红橙黄绿青蓝紫，每一种都有特定的色彩印象。

色相会有倾向性，如下图所示，这是从蓝色到红色的渐变过程，中间区域色彩的色相倾向性是不明确的，这种不明确是我们在选色用色中需要避免的，不明确的色相倾向，意味着不明确的情绪，这种“暧昧”意味着你的色彩“什么都不是”，进而无法占领用户心智。

 

（2）明度：指色彩的明暗程度。在无彩色系中最亮的是白色（#ffffff），最暗的是黑色（#000000），在有彩色系之中，也有明度差异,色彩明度从大到小依次是黄色＞绿色＞青色＞橙色＞红色＞品红色＞蓝色。（见下图 1-2.2.1）

明度的高低变化可以理解为在色彩当中加入黑色（降低明度）/白色（提高明度）。

 

（3）纯度（饱和度）：指色彩的纯净程度。该色相的纯色（纯色是指一种不混有其他色彩的色彩）在该色彩倾向之上所占的比例既是纯度，例:浅红色是属于红色色相的色彩，但与大红色相比，浅红色中红色的成分相对较低，即纯度较低。（见下图 1-2.3.1）

注解：对纯度的称谓，有艳度、彩度、饱和度等多种叫法，我个人更倾向于纯度这个称谓，因为这个称谓有助于概念的理解，纯度是指色彩够不够纯（纯色所占比例），比较合理，而艳度是指够不够艳？彩度是有彩色的比例够不够多？以上都不够直观，饱和度这个称呼虽然没太大问题，但不如纯度容易理解。

 

（4）困惑过我的疑问：明度和纯度一方的变化，会怎么影响另外一方?

1）明度变化对纯度的影响

如果我们控制色彩三属性中的色相不变（在 HSB 模式中的色相数值不变），那么纯度越高，明度越低。

明度越高的色彩，意味着加入了白色，也就意味着纯度下降（白色的加入导致原色彩纯色比例下降）；明度越低的色彩，则是加入了黑色，纯度同样会下降（黑色的加入导致原色彩纯色比例下降）；这就意味着明度与纯度的关系是无论明度上升或者下降纯度都会下降。

 

2）纯度变化对明度的影响

如果我们控制色彩三属性中的色相不变（在 HSB 中的色相数值不变），那么纯度越高，明度越低。（见下图 1-2.4.1）

纯度越高的色彩，意味着加入了更多纯色，也就意味着明度下降（白色的比例下降）；纯度越低的色彩，意味着减少了纯色，也就意味着明度会提高（纯色比例下降，导致白色占比增加。）。

 

3、色调

色调是整体的色彩倾向。在色彩的色相、明度及纯度三属性当中，只要保持 1 至 2 个属性一致，变化其他属性，整体色调就能保持一致，这可以成为我们把控整体风格一致性的重要实现方式。

通过色相的冷暖变化，我们可以营造暖色调、冷色调及中间色调，从而通过冷暖变化来传递情绪。

同理，固定色相，让明度与纯度变化，可以将色调分为如下 10 种（见下图1-3.0.1），而每种色调对应不同的情感属性，我们可以根据情绪来选择相应的色调，从而在整体上调整色彩，为我们选色提供一个切入角度。

色彩的选择过程中，有理性也有感性，虽然我们可以确定这 10 种色调，但你很难明确它们的分界线，也就是说很难界定明确的数值，只能提供一个大致的范围，在选色用色时，需要结合我们的审美，进一步去判断。

在如下的分析中，我是将色彩的情感属性分为正负两个层面进行分析，但没有不好的色调，我们需要做的是让正确的色调出现在正确的地方。

分析顺序：纯色调→白色调→明色调→浊色调→灰色调→暗色调→黑色调（即 “S” 型曲线）

 

（1）纯色调

纯色调是指画面整体色彩组合纯度较高的情况。

正面关键词：积极、活力、健康、浓厚等

解释：某种程度上，色彩的纯度与明度的高低就如同人的精气神，纯度与明度越高的色彩精神头越足，能够传递出更多活力。如下图西红柿和香蕉所示，很多植物在成熟时的色彩都接近于纯色，使得纯色与积极、健康等相关联，也因此纯色调常常出现在儿童产品上，去传递积极、健康的情绪。（儿童本身可能并不喜欢纯色，只是父母喜欢。）

如下图所示，以纯度较高的蓝色作为背景，通过高饱和度红色圆形将人们的注意力集中到人物之上，这种红蓝的搭配既是冷暖对比，二者又是对比色，让整个海报显得活力十足。

如下图所示，麦当劳的 banner 以纯度较高的红色渐变为背景，西红柿上的水珠，将蔬菜的新鲜表现得恰到好处，刺激着观者的食欲（反正我看了之后就想吃）。

负面关键词：粗俗、肤浅、花哨等。

活力太充足也会传递出肤浅的观感，很多时候纯色调展现的粗俗是由于色彩之间关系不和谐，无主次，搭配生硬等多方面原因造成的。如下图所示，这是大家熟悉的花哨典型案例，你们可以分析下，这个配色显得“土”的原因是什么。

 

（2）白色调

白色调不仅仅是指白色，也包括在白色附近的较浅的色彩，白色调是所有色调当中明度最高，纯度最低的色调，像一杯很淡的清茶。

正面关键词：干净、清新、纯洁

白色调是视觉重量最轻的色调，能够让我联想到婚纱、百合的纯洁、轻盈，如果说品牌，我回联想到无印良品，如下图所示，来感受下白色调的轻盈和纯洁。

负面关键词：平淡、虚无、距离感

有彩色的减少，会使整体色调偏于平淡，更像一个戒掉情绪的成年人，没有了冲动，这也就让人产生了距离感。如下图所示，从衣着来看，显然左侧模特的纯白婚纱装，暗色背景，严肃表情，与观者之间有很强的距离感，而右侧模特接近于浊色调的红绿色搭配，外加模特本身甜美的微笑，显得亲和力十足。

 

（3）淡色调

淡色调是在明色调的基础上，将明度提高，纯度降低。

正面关键词：柔软、淡雅、温柔甜美等

温柔淡雅来自纯度的降低，明度的增加，淡色调相对纯色调的饱满、力量感，也自然会产生柔软的印象。如下图所示，淡色调会让画面更柔和，给人一种幸福甜美的感觉。

负面关键词：消极、个性不足。

明度提高，纯度降低使得色彩的个性主张进一步淡化，当你用淡色调去展现视觉冲击或者力量感时，它显然是不能胜任的，会显示出个性不足的劣势。

如下图所示，两种色调对比，哪一种更能表现小女孩的无助和孤单，答案是很显然的吧。

 

（4）明色调

明色调相对纯色调，色彩明度较高，纯度较低。

正面关键词：明快、清新、干净、朴素、阳光等

明度提高意味着色彩更加清爽明快，相比纯色调而言，整体视觉重量轻了，适用于表达纯洁、干净的情绪，如下图所示，整个海报使用明色调将矿泉水的纯净、干净以及晶莹剔透的感觉表现得很到位，背景的雪山也暗示了水源来自大自然，红色部分（品牌色）立刻吸引了观者眼球，让整幅海报有了落脚点。

负面关键词：浮躁、没有深度、软弱。

明色调相比纯色调而言，纯度下降意味着色彩饱满、充沛感下降，使得整体会有“飘起来”的感觉，这种饱满感的减少，也使整体力量感缺失。

如下图所示，页面色彩纯度高低变化使画面信息传递效果受到影响，右侧的色彩纯度更高，情绪表现更到位。

 

（5）浊色调

顾名思义，浊色调是看起来相对浑浊的色调，原因在于明度降低，看起来像加入了灰色，低沉而浑浊。

正面关键词：高级、沉着、稳重、有格调等

明度的降低让色彩显得更加深沉，体现内敛与克制，进而产生高级感，下图是坚果手机的落粟配色（来自日本传统色卡），相对明色调及淡色调，浊色调会显得更加成熟稳重，更有文艺感。

负面关键词：保守、迟钝。

因为纯度、明度的降低，会让色彩活力下降，不恰当的选色配色，可能会让整体色调显得“脏”，这点是我们需要注意和避免的。

下图是锤子科技的同款坚果手机的不同配色，左侧是标准版，右侧是文青版，大家可以感受下二者的区别，明显左侧标准版更能彰显活力。

 

（6）淡浊色调

顾名思义，淡浊色调相对浊色调而言，整体更“淡”，明度更高，纯度更低。

正面关键词：优雅、有格调等

顾名思义，相比浊色调而言，淡浊色调更淡，色彩纯度下降了，但依然保持了浊色调的优雅以及格调，只是情感不如浊色调的充沛。下图是造作的床品4件套藕粉色，跟上文坚果手机的落粟配色相比，依然保持着文艺感，但没有那么深沉。

负面关键词：活力不足、保守

可能文艺感与活力是相对的，如下图所示，都是造作的床品四件套，活力大小高下立辨。

 

（7）暗色调

暗色调是 9 个色调当中明度最低的色调之一，但即使是最暗的色调，有彩色的加入也让整体有别于黑色调的情绪。

正面关键词：深沉、稳重

相比浊色调，暗色调的情绪更加低沉，仿佛城府很深的一位中年男性，深沉而稳重，就像下图的胡桃木色家具一般。

负面关键词：压抑、阴暗

这就是事物两面性很好的展现，当然也不排除某些设计需要营造压抑的氛围，我们“因地制宜”选择色彩就好。如下图所示，暗色调能够传递这种近乎让人窒息的压抑感。

我们熟悉的无印良品的品牌色就属于暗色调，你可以看看色调的变化对品牌调性的影响。（见下图1-3.7.3）

 

（8）淡暗色调

淡暗色调是在暗色调的基础上提高明度，自然深沉感（压抑感）也就被削弱了。

正面关键词：深沉、素气

单从上文图中（ 图 1-3.0.1）红色的变化来看，红色的淡暗色调色彩接近于棕色，相比浊色调而言，由于纯度的下降，使淡暗色调更显素气。如下图所示，画面整体的基调是淡暗色调，但也恰好与模特白皙的皮肤显现强对比，突出了模特本身（主角）。

负面关键词：阴暗、无趣

在色彩中，纯度与明度都不低的色调，自然会有活力，但凡一方（纯度与明度）比较低，就走向了“无趣”。

 

（9）黑色调

黑色调是明度最低的色调，当然同白色调一样，黑色调也不仅仅包括黑色，但总体是靠近黑色的色彩，主要突出黑色基调。

正面关键词：严肃、庄严、高端

在西方社会的葬礼上，参加葬礼的人都是一袭黑色西装，来表示对死者的尊重及表达沉痛的心情。我们可以观察一些品牌的高端产品通常也只用无彩色系来表达高端感，例：苹果的 MacBook Pro、iMac Pro等。

负面关键词：黑暗、压抑、消沉

同上文中对白色调的分析，黑色调同样是戒掉情绪的人，只是这个人更加的深沉和严肃，如下图所示，我们可以感受到那种沉重感穿过画面到达我们的内心，黑色调的压抑是在暗色调的基础上又增加了一个量级，更能够传递出那种不能呼吸的压抑感。

 

4、三原色及色彩混合

（1）概念

原色：原色是不能由其他色彩组成的基本色，同时它们也是构成其他色彩的基础。

原色分为色光和颜料（色彩）三原色，如下图所示。色光的三原色是红（red）绿（green）蓝（blue），也就是这三种色光不能通过其他色光混合的方式得到，颜料三原色是青（cyan）、品红(magenta)、黄(yellow)，同理，这三种颜料也是不能由其他颜料混合得到。

色彩混合：顾名思义，色彩混合就是两种或两种以上色彩混合成另外一种色彩的过程。

色彩混合的本质是在人眼视网膜上的同一部位同时射入两种或两种以上的色光刺激，感觉出另一种颜色的现象，无论是下文的加色混合还是减色混合，本质上都是色光射入人眼，区别在于一个是直射（加色混合），一个是反射（减色混合），从这个角度来说，色彩混合探讨的就是光(色光)的混合问题。

加色混合：指两种或两种以上色光之间叠加，色彩明度会增强的情况。

从色光的角度来说，光(色光)和光(色光)的叠加，会导致亮度增强；从色彩的角度来说，观察上文色彩混合原理图会发现，三原色(色光)两两混合都会产生明度更高的色彩。综合以上两点可能是加色混合之所称作加色混合的原因。

注解:亮度与明度是有区别的，亮度是指单位面积光通量的大小，而明度是色彩的明暗程度，也就是明度最高是白，而亮度取决于单位面积通过的光的量。

减色混合：指两种及两种以上颜料等本身不发光的物体(液体)彼此混合，色彩明度会降低的情况。

观察上文色彩混合原理图会发现，三原色(颜料)两两混合会产生明度更低的色彩，这也是减色混合之所以称作减色混合的原因。

注解:

假设颜料混合后表面积没有变化，红蓝绿(RGB)都是纯色，加入比例都是1。

青色=反射蓝(1)，绿(1)；吸收红(1)=2。

品红=反射蓝(1)，红(1)；吸收绿(1)=2。

青色+品红=反射蓝(2)；吸收红绿(2+2)=2。

我们可以发现色彩的混合并没有让光通过的单位面积的量增加，但随着色彩变为明度更低的色彩，颜料的混合会越混合明度越低。

通过以上我们会发现本质上我们研究的都是光的问题，对色光来说，因为是直射的关系，你要呈现某种颜色，用红绿蓝三种去组合就可以，而对颜料而言，因为是反射，你要呈现的色彩是被反射的，也就是你得用红绿蓝的互补色—青品红黄才能组合出你要的色彩。

 

5、色环及色彩对比

如下图可见光光谱及色环所示。可以发现，色环是将可见光谱首尾相连组成圆环，通过色环我们能够了解各色彩之间的关系。

如下是几种色彩关系，我们先以结论的形式呈现，再去分析原因。

（1）互补色：指的是在色环上 180° 相对的一对色彩。互补色呈现的色彩感觉是最具刺激性的，最张扬的。

（2）对比色：指在色环上相隔 120° 至 180° 的色彩，相对而言，对比色在保持了色彩刺激感的同时，又有一定平和的加入，能够体现适度的对立感。

（3）邻近色：色环上任意两个连续的色彩都是临近色彩。邻近色营造的是平和的感觉，没有冲突感。

以上结论可能大家可能都知道，但为什么会呈现这样的效果？我们来说道说道，其实可以用基因来类比，你跟你父母长得像是因为你的基因是你父母各提供一半组成的，如果你们相同的基因越来越少，那么你们可能会长得越不像，如果把色光中的红绿蓝（因为它们是构成其他色光的基础）这三种色彩含量比作基因，越接近的色彩在彼此中对方的成分越多，当在色环处于相对位置的时候( 180° 相对)，彼此之中几乎再无对方的“基因”，因此二者差异最大，以红色与青色这对互补色来举例:蓝色+绿色=青色。如果以 1:1 的比例，青色是蓝绿“基因”各占一半，相当于蓝绿色彩的“孩子”，自然青色无论与蓝色还是绿色搭配都会很和谐。而红色与青色可以说完全没有共同基因，因此是互补色。反之，在色环中越接近，彼此中对方“基因”越多，以色彩组合呈现的时候给人的视觉冲击感越小，类似于红与橙，蓝与青。

 

6、色彩模式

(1)概念

色彩模式:在数码设备（PC、智能手机等）呈现色彩的算法。

 

（2）RGB与CMYK色彩模式

RGB 色彩模式指的是以红绿蓝三种色光来组成其他色彩的模式，色彩混合模式属于加色混合。适用于发光体(PC、智能手机)，当然这也是我们面向屏幕设计的 UI 设计师常用的色彩模式。

RGB模型可以看做以红、绿、蓝为 x、y、z 轴的三维立体模型，每个轴分为 0-255 表示256级，每种色彩都可以由(x，y，z)坐标构成，(255，255，255)表示白色，(0，0，0)表示黑色。（见下图1-6.2.1 ）

CMYK色彩模式指的是以青、品红、黄三种颜料组成其他色彩的色彩模式，色彩混合模式属于加色混合，适用于印刷媒介(书籍、海报)，是平面设计师常用的色彩模式。

注解:RGB 是 red(红)，green(绿)，blue(蓝)；CMYK 是 cyan（青色），mangeta（品红），yellow（黄色），black（黑色）。

以下是两个关于 CMYK 色彩模式你可能会困惑的问题

（1）为什么CMYK中的“K”是“K”，而不是“B”(black首字母)？

主要原因在于RGB当中已经有“B”了，为避免混淆就用了末尾的字母“K”，当然使用哪个字母没那么重要，重点在于我们对它的理解。

（2）既然CMY可以合成“K”（黑色），为什么还要加入“K”（黑色）？

主要有如下三个原因:

• 第一，理论上可行，但由于生产技术的限制，目前CMY可以合成的“K”还不够理想，因此加入了黑色油墨来单独呈现黑色部分；
• 第二，黑色在印刷上使用量较大，CMY合成“K”过于浪费油墨；
• 第三，考虑到纸张质量，避免多层油墨叠加。

（3）HSB 色彩模式

HSB(即HSV)色彩模式是通过色彩的色相、明度、纯度三属性去呈现色彩的模式。我们具体来看看”H””S””B”分别代表什么。

• H（hues）表示色相，在 0~360° 的标准色环上，按照角度值标识，0° 为红色，60° 为黄色，120° 为绿色，180° 为青色，240° 为蓝色，300° 为品红色（见下图1-6.1.2）。从下图（1-6.1.2）我们可以看出三个轴分别代表色相、明度、纯度。
• S（saturation）表示纯度，用 0%（灰色）~100%（纯色）的百分比来度量。
• B（brightness）表示明度，通常是从 0（黑）~100%（白）的百分比来度量的，如下图（1-6.1.2）所示，在色立面中明度从上至下逐渐递减，上边线为100%，下边线为0% 。

HSB 色彩模式是从人类视觉的角度出发，人眼在看色彩时，不会将色彩拆分成 R、G、B 或C、M、Y，而是以色彩三属性来看待色彩，这也就是 HSB 和 RGB 以及 CMYK 模式之间的区别。

 

（二）色彩的情感表现

1、色彩心理

（1）色彩的冷暖

根据人类来自生产生活中的心理感受，将色彩分为冷色、暖色及中性色彩。

如下图所示，冷色系是指青色、蓝色等，冷色系色彩给人以大海的冰冷感觉。

 

如下图所示，暖色系是指红色、黄色、橙色等，暖色系色彩带给我们的是类似太阳与火的温暖感觉。

 

如下图所示，紫色、绿色及无彩色系属于中性色彩，没有明显的冷暖倾向。

色彩冷暖的相对性：我们要知道的是，色彩的冷暖是相对的，在暖色系当中，会有偏冷的暖色系（当然是相对偏暖的暖色系来说），如下图（2-1.1.4）所示，你可以比较一下，哪种红色更冷?在冷色系当中，会有偏暖的冷色系色彩（当然是相对偏冷的冷色系来说），如下图（2-1.1.5）所示，你也可以比较一下，哪种蓝色更暖?

实际上为了提升我们设计的细节，更好的平衡色彩选择，我们不能仅满足于冷暖平衡，而要更进一步，如下图插画（2-1.1.6）所示，虽然红色和蓝色已经是冷暖搭配了，但作者更进一步，用冷红搭配暖蓝，你可以对比一下图2-1.1.7（经过我调整的，主要是为了说明问题，请原作者见谅。）你可以看看哪种视觉效果更好，显然第一张图更柔和，第二张冲突性更强，更加冷峻，这就是色彩冷暖相对性在设计中的应用，这部分我会在随后的色彩系列文章中进一步深入，敬请期待。

 

（2）色彩的轻重

色彩的轻重指从视觉上给人们以心理的重量感受。(不是指物理上的重量。）

如下图所示，同等面积下黑与白和黄与蓝（均为纯色），明显明度高的色彩显得轻，明度低的色彩显得重。

纯度对色彩重量的影响不是线性的(不是纯度越高越重，纯度越低越轻)，如果纯度对色彩重量的影响是线性的，那么单从纯度来考虑，纯红色与纯蓝色应该一样重，但实际上视觉重量并不一样，纯蓝色更重(明度上的考虑)，我们在考虑色彩重量时主要从明度入手。

色彩重量是版式设计中构建平衡需要考虑的，如下图（2-1.2.2）和图（2-1.2.3）的比较，是不是图（2-1.2.3）舒服了很多，图（2-1.2.2）色彩重量的不平衡在版面上带来的是不稳定的感觉。

通过上图我们也可以知道，在构建色彩重量平衡时，我们需要给“轻”的色彩增加面积，“重”的色彩减小面积，这样才能维持二者视觉重量上的平衡。

在平面设计当中，我们可能会使用下重上轻的方式去构建稳重的页面排版。在室内设计当中，我们可能会选择深色的地板或者瓷砖，避免头重脚轻的情况发生，给人们带来不安定感。（见下图2-1.2.4）

 

（3）色彩的视错觉

物理面积相等的两个圆，会因为色彩的不同而导致视觉面积不同，空间距离感也会不同。

前进色(膨胀色)与后退色(收缩色):暖色系色彩是前进色(膨胀色)，冷色系色彩是后退色(收缩色)，顾名思义，前进色(膨胀色)相比后退色(收缩色)而言，从视觉上来说更靠近我们(物理距离是一致的)，且看起来更大(在原本物理面积一致的情况下)。

这里我们要结合上文的色彩冷暖相对性来看，相对更暖的色彩就是前进色(膨胀色)，相对更冷的色彩是后退色(收缩色)。

我们再来说道说道，是什么原因给人们这样的视错觉？这里主要与光线的波长相关，如下图所示，我们会发现暖色系的色彩波长更长，冷色系的波长相对较短（当然属于中性色的紫色的波长最短）波长更长的色彩，它的焦距也更长，波长短的色彩焦距也更短，这就意味着不同波长的光不会聚焦在一个视网膜的同一平面上，长波长的暖色影像更显模糊，而波长较短的冷色影像更清晰。（波长关系见下图2-1.3.1）

波长与焦距关系的证明：

• f=1/((n-1)*(1/r1-1/r2))（f代表波长，n代表折射率，r1.r2是球面两侧镜面曲率）

我们假设其他变量固定，只考虑折射率与焦距的关系，二者呈反比关系，折射率越小，焦距越长。

• λ’=λ/n（λ’表示光在介质中的波长，λ表示光在真空中的波长，n表示介质的折射率。）

回到以上公式，光在介质中波长与折射率的关系也是呈反比的，即折射率越小，波长越长。

以上两个公式我们可以推导出波长与焦距的关系是成正比的，即波长越长，焦距越大。

例:我们在看黄色的白炽灯光时，并不会看到一个轮廓很清晰的灯，而总是能看到他周围的模糊，放到色彩上同理，明度高的色彩也会有光渗效应 ，让面积显得更大，这种膨胀感也会让色彩感觉离你更近。

如下图（2-1.3.2）所示，两个面积一样的圆，一个白色一个黑色，你觉得哪个离你更近，哪个更大?以上说明明度也对色彩的视错觉会有影响，但是你可以自己试试，明度对前进（膨胀）与后退（收缩）的影响更多是对无彩色系而言。而波长对有彩色系色彩视错觉的影响（前进（膨胀）与后退（收缩）的）大于明度对其的影响(因黑白灰本身不属于光的范畴，没有波长的概念)，可以看看下方例子（2-1.3.3），红色会显得距离更近，更有膨胀感。

理论联系实际，我们来谈谈应用，像我这样的胖子都清楚，要显瘦就得穿深色的，最好再加上竖条纹，通过视错觉让纵向变长，相对横向自然短了。

在设计中有什么应用呢？最近 iOS 13 出了 Dark Mode，这里会涉及一个问题，在日间模式时，是白纸黑字，在夜间模式是黑纸白字，前者字体“看起来”会比后者小，如果我们将后者的字体稍稍减小，就可以保证前后观感一致。

（这部分我对长波长色彩在视网膜上会更模糊这个结论的得出主要是视觉观感结合查找相关资料，具体证明欠佳，能力有限，你们可以试着证明下这部分。）

 

（4）色彩的软硬

看看下图，哪个颜色最柔软呢？中间的是最柔软的，我们可以发现什么规律？明度高或者纯度高的色彩都不是最柔软的，在保持色相不变的基础上，色彩的明度和纯度适中看起来是最柔软的。（见下图（2-1.4.1））

那么我们再回到色彩柔软的具体应用，我们可以看看如下两种不同风格的插画，柔软的色彩会更适用于温暖、女性化的主题，而硬气的色彩更适合于表现刚强、男性化的主题。（见下图（2-1.4.2））

 

2、色彩的知觉

（1）后像

后像是由视觉生理机制形成的，分为积极后像与消极后像。

积极后像是指光停止刺激后，仍然留有刺激的后像。大家应该都看过走马灯， 走马灯就是利用积极后像， 在旋转的足够快的时候我们能够将各个片段连接起来，当然电影也是这样的，人类能够将 0.02 秒到 0.3 秒之间的图像连接起来，从而构成连续的动画。

消极后像是指某种色彩消失后，在大脑中显现该色彩的补色的现象。例如当我们盯着红色看久了，将视线转移至别处，我们大脑中就会出现绿色。神经中枢的六种膝状外侧细胞存在对偶互补现象（红-绿，黄-蓝，黑-白。）。消极后像是视神经的功能平衡性需求，从而维持我们视感觉的平衡。这部分我们在用色的时候会讲到，并不是说补色不能同时出现，而是可能你的用色方法并不正确，预知后事如何，请关注后续文章。

 

（2）恒常性

恒常性是指当我们认识了物体的色彩之后，因为光照变化的关系，即使色彩的明度、纯度及色相等属性发生变化，我们仍然认为他是原来的色彩，当然色彩属性的变化也有一个范围，就是说你不能把红的变成绿的，把蓝的变成黄的，不能完全打破在大自然中的印象。比如你不能再画樱桃的时候把果实画成绿的，而把叶子画成红的，这会让人们看着很困惑。（独特的艺术创作除外。）我个人认为。我们还是要尽量在相近的色相内进行变化。

恒常性是很有趣的，很多时候可能我们都没有注意到，如下图下方例子（2-2.2.1）所示，有一些绘画作品，它的色彩选择并不是使用该植物或者是各种物象本身的色彩，而使用其他色彩，但我们并不会感觉到奇怪。

 

（3）同化与异化现象

• 同化现象

两种有共同因素的色彩，其共同因素部分会被同化。

如下图所示，绿色与蓝色放在一起，绿色的蓝色部分会被同化，而更凸显黄色部分。

那么同化现象在实际工作中会有什么应用呢？这就是细节层面的设计了，当蓝色与绿色并置时，会有黄色（暖色）倾向，那么我们如果再要搭配一个色彩（非并置）是否搭配一个暖色中的相对冷色会不会比较好。

• 异化现象

色彩的异化现象即视觉在感知两种对比强烈的色彩（例：互补色）时，两种色彩都会向其补色方向发展。

色彩的原有倾向会显得更加明显，可能在这方面我们都有体会，无论是红配绿，还是紫配黄，它们搭配在一起时，颜色之间就会有鲜明的对抗感。

如下图所示，当无彩色与有彩色搭配时，无彩色就会有偏向有彩色的补色倾向，蓝与灰搭配，则灰色会微微带有橙色的倾向。

说到异化现象的实际应用时，在我不知道异化现象之前，对我来说有彩色与灰色的搭配是一个难题，因为色彩控制不得当，会让画面显得脏，这种情况下可能让有彩色成为成为配角，灰色成为主角更好。但黑色与白色就不存在这个问题，白色可以说是真正意义上的中性色，当有彩色在白色背景之上时，对有彩色本身的特征不会有任何影响，而在黑色背景上放置有彩色内容，黑色会对有彩色有一个抑制作用，黑白两色与有彩色的搭配不存在“脏”的问题。

 

这篇文章是色彩基础知识的第一篇，后续还会对单独的色彩进行理论联系实际的详解，基础知识可能看起来会相对枯燥，但万丈高楼平地起，很多时候你觉得基础知识掌握的不错，但大多情况下，提高空间还很大，多的不说了，希望这篇文章有帮到你，哪怕是一个小知识点，谢谢你的阅读。

下一篇是《别以为，色彩的知识你全懂了之红色与橙色篇》，敬请关注。