资讯详情
一、学习目的及概述
二、基础知识
(一)色彩的基本特征
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% 。
关键词：h5页面应用领域
