设计色彩的基础知识,入门色彩风景画

你想过生活中的五彩缤纷的色彩都是怎么形成的吗，我们看到的颜色在物理分析下真的就是那个颜色吗？那么多颜色有没有它的适用特征与场景在呢？我们又可以如何运用到色彩设计中呢？针

本文最后更新时间： 2023-04-10 05:31:32

你想过生活中的五彩缤纷的色彩都是怎么形成的吗，我们看到的颜色在物理分析下真的就是那个颜色吗？那么多颜色有没有它的适用特征与场景在呢？我们又可以如何运用到色彩设计中呢？针对种种疑问，笔者将给出解答。

作为一枚交互设计师，最近在帮朋友做国际物流的项目，客串了一把视觉设计，对色彩设计做了一些研究，现在把研究心得做一个总结，想要和大家共同探讨。

1. 色彩是怎么形成的？

色彩是我们生活中最具有表现力的要素之一，正是因为有了色彩，我们才有了碧海蓝天、绿水青山这样美丽的大自然景观，才有了“白毛浮绿水，红掌拨清波。”这样优美的诗词，才有了七色彩虹这样有意义的现实童话。

那么，色彩是怎么形成的呢？其实，色彩的形成是一个复杂的物理和人的心理相互作用的结果，它涉及到光的传播特性、人眼结构和人的心理感知等知识。

2. 人是怎么观察到色彩的？2.1 色彩本质上是一种物理光线的传播

首先，光在物理学上是用波长来表示的，也就是两个相邻波峰之间的距离，单位是纳米（10亿分之1米）；然后，大部分的光，人眼是不可见的，例如X光、红外线、紫外线，只有很小范围的光才可以被人眼所见；最后，可见光的波长大概在400-700纳米之间，也就是我们人眼能看到的波长范围。

不同颜色的波长也不尽相同，例如紫蓝色的波长大约在400纳米左右，而黄红色的波长在700纳米左右，如下图所示：

2.2 人主要靠人眼大脑识别色彩

人眼是人体中非常复杂的器官之一，人眼会识别出不同波长的光波信号。人眼主要由瞳孔和视网膜构成，其中光线会通过瞳孔进入人眼中，这时会采集光信号；然后再由视网膜来进一步加工，将不同波长的光波信号转变成大脑可以理解的神经信号。

例如，人眼通过瞳孔接收了500波长的光波信号，然后通过视网膜加工成了神经信号，再传递给了大脑识别颜色，最终大脑就可以实现通过人眼来识别光源的颜色。

2.3 人的心理感知对色彩进一步加工

心理学家认为，人的第一感觉就是视觉，而色彩是对视觉影响最大的因素。不同的色彩，会对人的心理造成不同的影响，这是因为人脑的心理感知，会对色彩进一步加工，潜意识地联想到不同的含义。

例如，看到蓝色，会联想到明亮的天空、壮阔的海洋，人的心理会趋于冷静；看到粉色，就会联想到桃花、爱心，人的心理会感到温暖和有呵护的感觉；看到绿色，就会想起大自然，人的心理就会觉得舒适、放松。

2.4 色盲群体

对于天生有颜色缺陷，或者说部分或者完全不能通过人眼分辨颜色（通常是红色和绿色）的人来说，我们称之为“色盲群体”。因为色盲是X染色体伴生性遗传缺陷，且男性只有一条X染色体，所以男性会比女性更有可能遗传这种缺陷。

另外，据统计，我国男性色盲发生率约为5%~8%，女性约为0.5~1%，其中，红绿色盲人口占全球男性人口约8%，女性人口约0.5%，这是一个不少的群体数量。

所以，在设计上，我们要具有同理心，考虑这一部分群体，如何更好地使用我们的产品。

3. 色彩的重要概念和特征3.1 三原色和RGB色彩模式

三原色：

在大自然中有三种不能再分解的基本颜色，即三原色，分别为红色（Red）、绿色（Green）和蓝色（Blue）。基于三原色原理，把这三种颜色按照不同强度、不同比例进行混合，就可以得到其他各种各样的色彩。

RGB色彩模式：

RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。（来自百度百科的定义）

通过RGB色彩模式给颜色赋值，可以让电脑显示相应的颜色。例如红色就表示为RGB（255，0，0），括号中的数值其实就是分别代表红色、绿色、蓝色的值，其中（255,0,0）表示红色的发光强度最大，绿色、蓝色不发光（0），所以就显示为红色，其他同理。

通过RGB值运算，就可以得到混合色，例如红RGB（255,0,0）和绿RGB（0,255,0），通过“变亮”模式混合，就得到了黄色RGB（255,255,0）。

3.2 色彩的三个维度

所有的色彩，都可以用三个维度来描述，分别是：色调、饱和度和明度。

色调：是指人对色彩的定性感知，或者说颜色的类别，例如红、绿、蓝、黄、青、紫等。饱和度：是指颜色感觉的纯度和鲜艳度，或者说颜色中的灰色量含量的高低，纯色拥有最大的饱和度，柔和、混合的颜色饱和度居中，灰色的饱和度为0。明度：是指色彩中光的强度，或者说混合了多少白色或黑色，白色的明度最大，黑色的明度最小。

3.3 互补色、对比色、临近色和类似色互补色：在12种颜色组成的色相环中，相隔180°的颜色，或者说处于直线相对位置上的颜色，我们称之为互补色。例如红色和绿色互补、黄色和紫色互补、蓝色和橙色互补。对比色：指在色相环中相隔120°-180°的颜色，任意选择两个颜色，我们称之为对比色。例如红色和蓝紫色为对比色，红色和黄色为对比色，蓝紫色和黄色为对比色。临近色：指在色相环中相隔60-90°的颜色，或者相隔三个位置的颜色，我们称之为临近色。例如红色和橙色。类似色：也称之为相似色，指在色相环中，相隔30°的颜色。例如红色和红橙色。

3.4 冷暖色

在上面，我们有提到，不同的色彩，会对人的心理造成不同的影响。基于此，我们就形成了色彩心理上的冷暖感觉。

例如，看到红色，我们就会联想到火焰，心理上会感到温暖，所以，我们把红、橙、黄这些颜色归为暖色调；同理，看到蓝色，我们可能会想到海水蓝，心理上会感到冷意，所以，我们把蓝、绿、紫这些颜色，称之为冷色调。

当然，除了冷暖色，还有一些中性的色调，例如黑色、白色或者灰色。

3.5 渐变色

大家对渐变色肯定不陌生，趋于成熟的香蕉、秋天泛黄的叶子、绚丽多彩的晚霞，这些从明到暗、从深到浅或者从一个色彩到另一个色彩过渡，充满浪漫气息的颜色，就是大自然中最为常见的美丽的渐变色。

和纯色相比，渐变色显得更年轻、活泼和多变，会被广泛应用在产品设计上，特别是一些年轻化的产品。

3.6 色彩的颜色代码和不透明度

在计算机上，色彩可以用RGB的值来表示，例如上面我们所讲的红色，其值为RGB（255,0,0），也可以转换为十六进制代码来展示，也就是#ff0000。一般地，设计师都会标注颜色代码给到前端开发工程师。

另外，颜色还有不透明度的概念，用百分比来表示，例如60%的红色，设计师采用不透明度色值来做设计，同样也需要用百分比标注出来。

4. 色彩的设计案例4.1 设计与生理：不宜使用明度、饱和度过高的颜色

本文上面有提到，我们主要通过人眼（瞳孔视网膜）来识别色彩的信号，据研究表明，色彩的明度和饱和度过高，会对人的视网膜过渡刺激，导致眼睛疲劳，例如纯黄色、纯绿色或者饱和度过高的红蓝搭配。所以，我们在色彩设计时，要尽量避免使用明度、饱和度过高的颜色。

具体的常见应用场景，小到日常警方的通告，大到整个网站或者App的配色，都可以用得到。

4.2 设计与心理：粉色的护士服

人对色彩的心理加工，必然会对设计造成影响，例如，儿科的护士服通常被设计成粉色，在视觉上具有柔和、温暖和呵护的效果，可以减轻孩子对医院的恐惧心理。

4.3 互补色：经典的互补色logo设计

互补色通常有红绿互补、蓝橙互补和紫黄互补等，由于互补色有很强的分离性，可以有效提高整体配色的分离度，所以经常会用在logo设计中。例如7-11、visa、湖人球队这些知名的logo设计，就是运用了互补色来做设计。

4.4 对比色：图表对比

在产品设计中，特别是后台的产品，通常会有很多的图表，例如柱状图、折线图、饼图等，而且图表中通常会有两组以上的数据作为对比，这个时候，我们就可以运用对比色，来区分不同组别的数据。

4.5 临近/类似色：渐变过渡更自然

临近色，或者类似色，都是在十二色环中相隔不远的颜色，且它们的色调具有渐进过渡的特点。所以，在使用渐变色设计时，我们可以采用临近/类似色进行渐变，让渐变过渡更自然。

4.6 一致性：整体网站配色

网站的整体色调，至少在主色调的使用上，都会跟它的logo保持一致，这样整体看起来就会非常协调，另外，主色调最好不要超过2种，不然色调越多，越难保持一致，还容易引起视觉噪点。

4.7 同理心：站在色盲群体的角度来做设计

同理心，又称换位思考，是指能设身处地体会对方的情绪、想法，并站在对方的角度去思考和处理问题。对于普通人而言，很难体会得到色盲群体的感受，这个时候，就需要设计师具备同理心，站在色盲群体的角度来做设计。

例如，高德地图就针对色盲群体，推出了色盲模式设置，方便这一部分人群的日常使用，这是非常具有同理心的设计。

#专栏作家#

夜雨，微信公众号：iueuxd，人人都是产品经理专栏作家。图书《Sketch交互设计之美：从零基础从完整项目实现》作者，高级交互设计师。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议

色彩设计基础知识整理

产品设计：工业设计、UI设计、书籍报刊设计等。重点在于品牌印象，清晰、舒适、耐看。诱目性低，可以长时间凝视而不会疲劳。

运营/推广设计：海报、广告、招贴等形式。重点在于氛围营造，吸睛、具有较强的表现力。诱目性高，瞬间吸引人的注意力。

区分层次；渲染氛围；强化主题；关联传达品牌特性；

H（hues）色相：红、黄、蓝等色彩的种类；根据位置来划分色彩的邻近色、对比色等。

色相会具有一定的偏向性，如偏蓝色的绿色/偏黄色的绿色，在与其他颜色搭配师，不同的偏向性会产生不同的效果。

从色彩属性上，可以分为冷色与暖色。蓝色、紫色等冷色表现出清凉、冷静的感觉。黄色、橙色等暖色给人温暖的感觉。

S（saturation）纯度/饱和度：色彩的鲜明程度，为0时为灰色；

B（brightness）明度/亮度：色彩的明亮程度，最高为白色，最低为黑色；明度高：轻快、明亮；明度低：厚重、沉着。

明度差大：力量、有活力；明度差小：高雅、平稳。

RGB：红、绿、蓝；加色混合（混到一起成为白色），屏幕所用色彩表现方式。

CMYK：青、品红、黄、黑；减色混合（混到一起成为黑色），印刷所用的色彩模式

色调系列：色彩的不同明度和纯度的组合，色调由纯度和明度交叉创造而成。不同的色调会给人留下不同的心理印象，决定画面的氛围。

决定画面的三要素是色调、色相和对比强度。

色调差小，则对比小，平稳和谐；色调差大，则对比较强，变化而有力量。

淡色调（P）

心理印象：温柔、梦幻、轻盈、轻、淡、浅，多用于化妆品、婴儿用品等。

浅色调（LT）

心理印象：清爽、轻松、明快、轻、淡、浅，多用于化妆品、儿童用品等。

浅灰色调（LTG）

心理印象：素雅、温柔、消极、成熟、雅致。

轻柔色调（SF）

心理印象：质朴、消极、平和、成熟。

明亮色调（B ）

心理印象：轻快、活泼、童真。多用于儿童用品。

强烈色调（S）

心理印象：强烈、有深度、充满热情的印象。

鲜艳色调（V）

心理印象：华丽、热闹、刺激、鲜明。

灰色调（G）

心理印象：资深、沉稳、厚重、成熟、含蓄、保守、消极。

浊色调（D）

心理印象：钝化、厚重、质朴、稳重、高级。

深色调（DP）

心理印象：沉着、干练、稳重。

暗灰色调（DKG）

心理印象：稳重、沉闷、质朴、厚重。

暗色调（DK）

心理印象：厚重、阴暗、稳重、质朴。

暖色：红、黄、橙等，让人联想到火焰、温暖的太阳等比较温暖的事物；

冷色：蓝色、绿色、紫色等，让人联想到冰、雪等比较凉爽的事物；

前进色：看着比实际上离自己近，膨胀色，一般是暖色，偏白的颜色；

后退色：看着比实际上离自己远，收缩色，一般是冷色，黑色等；

膨胀色：暖色、明度较高的颜色，让物体看起来感觉比实际更大；

收缩色：冷色、明度较低的颜色，让物体看起来感觉比实际更小；

色彩的重量感：黑色比白色显得更重，更牢固。明度越低，显得越有重量。反之，显得越轻。

不同色调的心理印象：

将色彩分为5个角色：主角色、配角色、支配色、融合色、强调色。

主角色：配色的中心色，其他颜色以此为基准。

主角色决定主体，使画面整体安定。要用最强色。面积不需要多大，但是要有力度。

配角色（突出色）：衬托主角、支持主角，专门设置在主角近旁，使主角突出。

配角色增加对比，在一成不变的色彩中增加变化，突出主角色。面积与主角色形成差异，会增强对比的效果（如主角色面积较大时，面积越小的配角色效果越好）。

支配色（背景色）：作为背景环抱整体的颜色。即时小面积也能支配整体感觉。

背景色支配着画面的整体感觉。背景色包围主体，即使面积小，在观众的心中会“看到”主角背后的背景色，所以也会支配整体的感觉。

融合色：主角色游离其他色时，置同系色于游离处，起到融合整体的作用。

但两种颜色对立过于激烈时，加入融合色，起到缓和矛盾的作用，使整体更加平稳。

强调色：在小范围点上强烈的颜色，使画面整体更加鲜明生动。

强调色让页面的变化更加强烈，增加整体的活力。同样，面积与主题差异较大，可以增加对比效果。

首先需要明确设计的目的是什么、内容是什么、受众是谁。

设计是解决问题的一种方式，了解产品的形象、用户的角色，可以明确整体所要表现的风格气质，明确我们要解决的问题以及解决问题的思路与方向。如考虑不同年龄、不同性别、不同层次用户对于色彩的偏好。孩童一般喜欢明度和纯度比较高的色彩；老年人一般喜欢明度和纯度都较低的色彩。这样在选取颜色的时候才会有方向、有目标。

了解设计的内容可以关注技术的限制、观看距离的远近以及周围环境的影响。如平面设计一般采用cmyk模式，UI设计一般采用rgb模式。观看距离较远时，需要较强的对比度，增加识别性；反之，距离较近时需要更加柔和，让观者的眼睛不会疲劳。而夜晚模式的使用更是对于光线不足时的一种反应。就环境影响而言，如果产品周围的物体、产品等颜色比较花哨、丰富，那么选用简单、无彩色的配色会更加容易从中凸显。

主色调选取，一般是品牌的主打色，同时需要与所要传达的主题气质相符合。主色所占的比例一般会比较大，对整体风格起到一个主导作用。

对于公司内部的产品，一般考虑公司的品牌色。对于新的、toC的产品，可以使用情景版的方式来确定主色。或者使用行业/客户特定的色彩，如针对中国电网设计产品，考虑使用其绿色作为主色。

主色确定之后，单色配色一般是在色彩的明度、纯度上发生变化，并且加上黑白灰等无彩色来形成配色方案。双色配色可以考虑类似色、对比色、互补色等配色方式，一般而言，与主色在明度和纯度上的差异不会太大。多色配色可以考虑三角形、四边形、五边形的配色方式。

色彩的对比强度，可以是色相、明度、纯度任一方面。需要依据整体的感觉、气质需要来选取和调整。激烈、热闹的氛围需要比较大的对比度，柔和、安静的氛围需要不太强的对比。

色彩的冷暖感：如果都选用冷色或者暖色，整个画面就会偏冷或偏暖。除非有特殊的主题需求，一般多色配色时，会需要在全是冷色的颜色中加入暖色，或者在全是暖色的颜色中加入冷色来点缀与平衡画面的冷暖感。

色彩的明暗：色彩的明暗就像是画面的光影，有高光、有阴影物体才会有体积感。同样，颜色的明暗对比让画面具有层次感与纵深感。同时，全是亮色会显得浮躁，全是暗色会显得沉闷。

色彩之间的呼应：整个画面之间的颜色并不是割裂的，这里一块那里一块独立存在。而是在元素之间穿插错落。色彩的呼应会让整体感更加明显，也更容易让画面变得和谐。

色彩的面积：主色与辅色所占的面积大小一般会有所差异，形成对比。常见的比例有7:2:1,。整体的感觉与印象是不同面积色彩感觉之间拉扯的结果。

环境色/光源色的影响：高光与阴影的颜色会受到环境色的影响，如黄色灯光下的物体，高光会偏黄色；蓝色背景上的物体，其阴影也会偏蓝色。在对元素填色时，需要考虑环境色/光源色的影响，在基础色的色相上偏向光源色或者多层叠加颜色来让整体细节更丰富、更有质感。

兼顾“突出”与“融合”两个方面：在完成配色的方案后，要审视整体的方案与目标气质、定位基调的一致性。如果过于沉静，则下点功夫突出一下即可；如果过于喧闹，则像着沉浸、融合的方向调整即可。

取色板的右上角顶点为某一色相的纯色。水平往左，是逐渐加入白色的过程，颜色纯度逐渐降低；垂直往下，是逐渐加入黑色的过程，颜色明度逐渐降低。将取色板均等分为9个区域。每个区域的颜色会给人不同的感觉。与pccs的色调划分方式有些类似，在设计软件中选取颜色时运用比较方便。

色彩九宫格与给人的心理印象

1号区域-淡色调

心理印象：高明度低纯度，温柔、轻盈、梦幻、素雅、

2号区域-明色调

心理印象：高明度中等纯度，清爽、明亮、活泼、可爱。多用于儿童用品等。

3号区域-纯色调

心理印象：高明度高纯度，鲜艳、刺激、热闹、华丽、年轻化、冲击力强。多用于广告、海报等运营类设计。

4号区域-淡浊色调

心理印象：中等明度低纯度，素雅、格调、安静、朴实、舒适、平和。高级灰、莫兰迪色。

5号区域-浊色调

心理印象：中等明度中等纯度，坚定、质朴、安静、高级。

6号区域-暗色调
心理印象：中等明度高纯度，沉闷、成熟、沉稳

7-8-9区域-黑暗色调

心理印象：低明度，危险、高档、暗沉、厚重、阴暗

此区域的颜色，有人视为色彩禁区。颜色显脏不好搭配。当需要纯黑色的替代色时，可以考虑选取这几个区域的颜色，色彩可以偏向于主色的色相或者与主色协调的色相。

九宫格配色的使用技巧：比较简单的方式是选择同一区块的颜色，在色相上产生变化。在多色配色的情况下可以取得较好的效果。也可以考虑明度与色彩的重量感，选用亮与暗、轻与重的颜色协调。

快速上手！10分钟学会这招超好用的「九宫格」配色技巧 - 优设网 - UISDC

用我自创的十字形配色法，让你快速入门配色！ - 优设网 - UISDC

看过很多配色理论还是学不会？来看我总结的这3个实用技巧！ - 优设网 - UISDC

色相一致的配色

各个色彩色相保持一致或者接近，通过明度或纯度变化来产生差异。

明度一致的配色

各个色彩明度保持一致或者接近，不会产生强烈对比感，整体会显得比较均衡。

纯度一致的配色

各个色彩纯度保持一致或者接近，纯度越高，刺激性越强，纯度越低，越显得沉稳；

同色系配色

色相不变，在纯度与明度上产生变化，形成配色方案。单色系配色，比较容易做出效果。

邻近色/类似色配色

色相跨度较小，容易形成比较清晰一致、意图明显的的效果。

中差色配色

色相环上颜色位置呈90°，具有一定的对比但不是太强烈，高级、华丽、干练。

对比色/互补色配色

色相环上二者成180°，对比强烈，容易形成炫光效果，一般会使用面积差异或者明度差异来让页面更加稳定。

三角形配色

色相环上颜色呈三角形，对比较为强烈、稳定。

四边形配色

色相环上颜色呈四边形，有一定的对比，色彩数量比较丰富。

五边形配色

以五边形的方式从色环选取颜色，色相之间的对比比较均衡。色彩数量丰富，热闹、活泼。

整体显得模糊时，应该删除暧昧模糊的地方，突出主题，大力强调作为主角的部分，整体更加清爽踏实。

当配色过于沉重压抑时，应该减少黑色，增加鲜艳颜色，提升明度、饱和度，整体明朗、生动。

对比越强，显得有活力、精神饱满；对比越弱，则更加安定、稳定。

加入对比色：对比色是主色的补充，两者形成冲突。注意面积、明度、纯度、位置的调节，避免画面过于激烈、不协调。

准对比色带来平稳的对比：比直接使用对比色的效果更缓和一些，即使用稍偏离对比色的补色。

全色相型：色彩种类丰富，画面热闹、开放，类似五边形配色。

三角形配色：平衡、稳定，类似三原色的配色。

十字型：两组对比色，在色环上构成“十”字，有力度、紧凑。

黑色起突出作用：黑色凸显出力量感，能够衬托出有彩色的鲜艳。

白色在不破坏画面感觉的基础上起强调作用：白色作为中立色，不破坏其他颜色。可以作为强调色、间隔色。

用淡色群固定淡色主角：淡色主角，背景色、辅助色等不应该过于强烈，抢过主角的风头。整体的淡色调，让画面氛围更加轻快。

加强中心部分的方法：提高纯度；强化明度对比；强化色相对比；

加入鲜艳色彩：鲜艳色调显得有活力，暗色调显得庄严、高雅。

减少一部分黑色：与加入鲜艳颜色是一个道理，让色调往明亮、鲜艳方向靠近一些。

设置明度差：也就是增加对比。对比产生力量、跃动的活力。色彩的对比包括色相、明度、纯度、面积的对比。

制造一个亮点：抑制背景色，突出主题色的明度、纯度，与背景色拉大面积对比。

增大色彩面积：画面过于单调、空洞，可以适当增加色彩的面积，减少留白，增加图版率和视觉度。（图版率高，整体更加活跃、热闹，适合快速浏览。图版率低，则更加安静、偏向于细细阅读，适合阅读、文档等应用的设计。详见 - 写文章）

分离配色：颜色之间不按照色相环的顺序排列，而是让对立的颜色放到一起，增加冲突，制造动感。

重心：深色（明度低）在上，浅色在下，重心就会上移，不稳定而形成动感。防止，则重心靠下，更加安定。

画面色彩不协调/过于喧嚣，使用三属性（色相、明度、纯度）、位置、面积来缓和氛围，整体更加和谐。

色相靠近：同系色、邻近色等，色相差异较小，测试稳定、温馨、保守、恬静的效果。

双色调：色相相同或相近，色调形成差异，淡色&明色/明色&浊色等的组合。

对比双色调：两组双色调，色相之间形成对比。双色调的平稳感与色相对比的紧凑感共存。

统一明度：色相差异较大时，采用相同的明度，整体会给人安定的感觉。

靠近色调：纯度与明度组成色调，同样的色调可以强化该色调带来的感觉，统一整体的画面氛围。

通过群化法收敛混乱：将色相、明度、纯度中的一部分共通化，会得到统一感。

浓淡法：按照色相的顺序或者明度的顺序配色，形成稳定的节奏感。

微差：近似的色相与明度，整体会比较宁静。

灵活运用令人生厌的色调：使用小面积强调色十分有效。强调色的选用：高彩度的同色系色彩、准高彩度的对比色彩、高明度色彩。

通过重复融合整体：在不同的位置放置一样的色彩，形成呼应，整个画面更好地融为一体。

利用白色间隔使画面更柔和：在过于浓艳的配色中使用白色间隔，可以缓和色相之间的强烈对比。

从自然中获取配色：

选取自然风光的照片，进行马赛克处理，选取其中的颜色作为配色方案。

选择与主体一致的颜色：

设计材料中有一些必须加入画面的图片、图案等，可以在其中吸取颜色，作为字体、装饰元素的颜色。让整个画面更加协调。

插入间隔色：

主体与背景色、辅色等产生冲突时，可以在二者中间插入间隔色，进行一个区分、缓冲与过渡的作用。间隔色一般为无彩色或者浊色调色彩。

色彩印象：

婴儿→儿童→成年→中年 —— 浅色调、轻柔色调→明亮色调、鲜艳色调→强烈色调、浊色调→深色调、灰色调；

男性 —— 纯色，强对比；女性 —— 柔和、素雅，弱对比。

朝气、活力 —— 暖色、全色相；

可爱 —— 增加白色面积占比、在颜色中加入白色；

素雅 —— 淡雅明快的色调，弱对比；

豪华 —— 暖色、鲜艳色调、强对比；

自然 —— 明亮、素雅的浊色，在色调图中的轻柔色调、强烈色调、浊色调。

力量、速度 —— 鲜艳、厚重的色调，对比强烈；

幻想、神秘 —— 同色系，自然界中少见的；

渐变：

采用色调一致的颜色，通过色调来形成不同的氛围。

·同类色渐变：柔和、轻微、细腻。具有柔和的光影感。

·邻近色渐变：时尚、耐看、活跃

·互补色/对比色渐变：冲击力、吸引眼球、时尚。

先确定版式，再选择配色。

色彩的数量与协调：

有彩色的数量较多，容易形成热闹、绚丽的氛围。但是颜色数量越多，协调起来越难。色彩数量较少会比较有力量感，给人感觉更加坚定、方向明确；

可以在明度或纯度上保持相似性。也可以加入无彩色作为区分、过渡。或者将某一种颜色用在所有元素上，让整体更加统一。

多色配色：

色相、纯度、明度等至少要有一个保持一致或接近。如多色相的（色彩种类较多）时，应该保持各色彩的纯度和明度至少一个差别不大。要是都差别很大，则容易不协调。可以将其中一个颜色的明度或纯度提高，进行有意凸显与强调。

多色配色也要讲究颜色之间的呼应，如某些细节部分颜色与大面积色彩保持一致，而非一个颜色占据一块。

多色配色时，颜色之间的比例也需要权衡。比较均衡时，整体比较热闹。主次分明时，与大面积色的感觉更靠近。

叠加模式：

通过不同的叠加模式（柔光、叠加、颜色加深等），让图片或者色彩之间融合更加自然。

ColorMunki - ColorMunki Design

Color

Color Picker — A handy design tool from Color Supply

Color Hunt - Trendy Palettes for Designers and Artists

LOL Colors - Curated color palette inspiration

Coolors.co - The super fast color schemes generator

0-255

Color Scheme Designer 3_高级在线配色器_配色网

Material Design Color, Flat Colors, Icons, Color Palette | Material UI

中国色－中国传统颜色

CMYK 和 RGB 这两种色彩模式本质与区别在哪？ - 知乎

《色彩设计的原理》的笔记-全书

快速上手！10分钟学会这招超好用的「九宫格」配色技巧 - 优设网 - UISDC

用我自创的十字形配色法，让你快速入门配色！ - 优设网 - UISDC

看过很多配色理论还是学不会？来看我总结的这3个实用技巧！ - 优设网 - UISDC

高手的平面课堂！最容易上手的配色方法 - 优设网 - UISDC

NCD WEB : NCD Busines : Image Scale System

PCCS_百度百科

色彩设计的原理 (豆瓣)

每天懂一点色彩心理学 (豆瓣)

PCCSの色相

配色基础原理 (豆瓣)

用一个实战项目，帮你掌握科学的 UI 配色方法 | 优设网 - UISDC

《七日掌握设计配色基础》

色彩基础理论知识

　　色彩本身并无冷暖的温度差别，是视觉色彩引起人们对冷暖感觉的心理联想。下面是我分享的色彩基础理论知识，一起来看一下吧。

　　色彩基础理论知识篇1

　　1、色彩三原色。

　　色彩三原色是指红、黄、蓝，从色彩原理上讲，这三种颜色能调出大部分颜色，而其他颜色则不能调出这三种原色。由于三原色不能调配出黑色，只能混合出深灰色，因此在彩色印刷中，除了使用三原色外还要增加一版黑色。才能得出深重的颜色。

　　2、色彩混色。

　　红黄相混得橙，红蓝相混得紫，黄蓝相混得绿，若进一步相混可得到更多的颜色。要验证这个结论，只需在彩色打印机上打印一张颜色构成较全面的彩色图纸便可，在10倍放大镜下就能大致看到各原色的分布情况。

　　3、十二色相环。

　　通过下面这个图表，我们可以比较直观地看到各色相混所产生的色彩变化，中心的三角形中是三原色，其中任意两色分别相混得到外围的紫、绿、橙色。再用三原色与紫、绿、橙组合又得到另外的一些颜色，这些混色与三原色一起构成最外围的十二种颜色，即十二色相环。如果再进一步组合，则会产生更多的、色彩变化更细微的颜色。

　　4、对比色。

　　色相环中直径两端相对的两种颜色，因为色彩差别最大，所以把它们互称为对比色。把这两个颜色并列放在一起，它们会相互让对方的色彩完全显现出来，以红绿为例，红则更红，绿则更绿。但把这两者等量相混，就说不出是个什么色了，色彩学中通常把这种颜色说成脏色。

　　5、彩度与明度。

　　色彩的鲜艳度叫彩度，明暗度叫明度。色相环中的任何一个颜色其彩度都是高的（很鲜艳的），欲降低其彩度可加黑色、白色或灰色（黑白灰称作无彩色），通常白色能增加颜色明度但同时会降低颜色彩度，黑色和灰色则既降彩度也降明度。

　　6、混色量对色相的影响。

　　上面色相环中的混色都是理论上的等量混色（色料颗粒大小一致，数量一致），在现实中不可能都按此方法调色，比如红色和蓝色等量相混得到图中的紫色，而3份红色和1份蓝色相混则得到图中的紫红色，如果再用紫红色和红色等量相混，那么蓝色就只占八分之一而红色占八分之七，这个混色就应该叫浅紫红色了，如果再照这种比例相混下去，混色中蓝色的影响力就将越来越弱，直到不足以影响红色。

　　7、色彩差异。

　　在现实中，没有人规定什么颜色要达到什么样的彩度和明度才能叫特定的颜色名，就拿最基本的三原色来说，由于生产工艺和原材料的不同，每个原色都存在着若干不同彩度或不同明度的个体原色，与之相应的混色在色相上肯定也有差异了。因此在实际应用中想用同一色系不同色相的两种原色来分别与另一色系的颜色相混而得到相同色相的颜色，依靠的往往是调配者的感觉而非科学的量比关系。

　　色彩基础理论知识篇2

　　培养孩子敏锐的色彩观察力和对色彩的意识，意识形成后，伴随着他们的成长及对色彩有意和无意的观察，眼睛对色彩的分析逐步提高，为孩子未来从事与色彩相关的工作提供一个视觉基础。

　　现将基本的色彩知识总结如下，希望家长和老师共同努力，为孩子对色彩的辨析有一个正确的引导。

　　1、原色

　　理论上指不能调和出来的色彩叫原色。三原色指：大红、柠檬黄、钴蓝；原色又称为第一次色，或称为基色。原色的色纯度最高，最纯净、最鲜艳。可以调配出绝大多数色彩，而其他颜色不能调配出三原色。

　　（1）三原色不能通过其他的有色材料混拼而成的颜色。能配合成各种颜色的基本颜色。也叫基色。这三种颜色的组合，几乎形成几乎所有的颜色。

　　（2）光线会越加越亮，两两混合可以得到更亮的中间色：yellow黄，cyan青，magenta品红（或者叫洋红、红紫）。三种等量组合可以得到白色。

　　颜料中的原色是红、黄、蓝，蓝和黄可以配成绿，红和蓝可以配成紫，黄和红可以配成橙。

　　色光中的原色是红、绿、蓝，红和绿可以配成黄，红和蓝可以配成紫。

　　2、间色

　　任意两个原色相混合所得的新色称“间色“。红+黄=橙，蓝+黄=绿，红+蓝=紫，等量相加产生的橙、绿、紫为标准，但三个原色混合的比例不同，间色也随之产生变化（当我们把三原色中的红色与黄色等量调配就可以得出橙色，把红色与蓝色等量调配得出紫色，而黄色与蓝色等量调配则可以得出绿色。在专业上，由三原色等量调配而成的颜色，我们把它们叫做间色。当然三种原色调出来就是近黑色了。间色又叫"二次色"。它是由三原色调配出来的颜色，是由2种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫"三间色"。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。

　　3、复色

　　任意两间色相混合所得之色，称之为“复色“。橙+绿=黄灰，橙+紫=红灰，绿+紫=蓝灰，等量相加得出标准复色；两个间色混合比例不同可产生许多纯度不同的复色。

　　4、色彩的对比

　　当两种或两种以上的色彩放在一起，由于相互影响的作用显示出差别的现象，称为色彩对比。

　　色彩对比的重点，是认识色彩对比的特殊性。色彩的千差万变形成了色彩的多种对比关系。

　　因明度差别而形成的色彩对比称为明度对比。

　　明度对比，明度对比为主构成的色调。由于明度对比程度的不同，这些调子的视觉作用和感情影响各有特点，一般为：高明度基调给人联想到的是晴空、清晨、朝霞、昙花、溪流、女人用的化妆品等。这种明亮的色调给人的感觉是轻快、柔软、明朗、娇媚、纯洁。如应用不当会使人感觉疲劳、冷淡、柔弱、病态。中明度基调给人以朴素、稳静、老实、庄重、刻苦、平凡的感觉。如运用不好也可造成呆板、贫穷、无聊的感觉。低明度基调给人的感觉沉重、浑厚、强更刚毅、神秘。也可构成黑暗、阴险、哀伤等色调。

　　明度对比强时如：“高长调、低长调、中间长调“给人的感觉光感强，体感强，形象的清晰程度高，锐利，明白。明度对比弱时如：“高短调、中间短调、低短调“给人的感觉光感弱，体感弱，不明朗，模糊，含混，平面感强，形象不易看清楚。明度对比太强时如最长调有生硬、空洞、简单化的感觉。

　　5、同种色

　　颜色产生不同明度变化，称同种色。如将翠绿色加白或加黑出现的许多深浅不同的绿色，这深浅不同的绿色为同种色。

　　6、同类色

　　两种以上的颜色，其主要的色素倾向比较接近，如红色类的朱红、大红、玫瑰红，都主要包含红色色素，称同类色。其他如黄色类中的柠檬黄、中铬黄、土黄，蓝色类的普蓝、钴蓝、湖蓝、群青等，都属同类色关系。

　　7、类似色

　　在色环上任意90°角度以内的颜色，各色之间含有共同色素，故称“类似色”。

　　8、邻近色

　　在色环上任一颜色同其毗邻之色称为“邻近色“。邻近色也是类似色关系，仅是所指范围缩小了一点。从同类色、类似色、邻近色的含义来看，都是含有共同色素。采用此类色彩配合给人以统一而调和的感觉。

　　9、补色

　　色环中任何两色混所得的新色与另一原色互为补色，也称余色。如绿与红、黄与紫、蓝与橙，皆属补色关系，绿的补色是红色，红的补色是绿色。

　　10、冷暖对比

　　用冷热差别而形成的色彩对比称为冷暖对比。

　　冷暖本来是人体皮肤对外界温度高低的触觉。太阳。炉火、火炬、烧红的铁块，本身觉度很高，它们射出的红橙色有导热的功能，其光所及，将使空气、水和别的物体温度升高，人的皮肤被它们射出的光照所及，亦能觉得温暖。大海、苍天远山、雪地等环境，是蓝色光照最多的地方，蓝色光会导热，而大海、苍天。雪地有吸热的功能，因而这些地方的温度比较低，人们在这些地方会觉得冷。‘这些生活印象的积累，使人的视觉、触觉及心理活动之间具有一种特殊的，常常是下意识的联系。视觉变成了触觉的先导，无论光源色还是物体色，在生理上或心理上都会由于意识的惯性而引起相应的条件反应。

　　日本色彩学家曾作过一个实验：将一个工作场地涂上青灰色，另一个工作场地涂上红橙色。然后比较工作场地的客观温度条件，即使物理上的温度相同，劳动强度也一样，但色彩影响了人的生理与心理，两地的感觉反应就不一样。在青灰色工作场地工作的员工，于华氏59“时感到冷，但在红彩色工作场地工作的员工们，温度自65F降到52F时。仍然不觉得冷，这是一个很有趣的例子。

　　由此，人们产生一个对冷暖色彩比较抽象。似是而非，不易言传的概念，同时又把冷暧看作是万能的，把握色彩技巧的钥匙。

　　从色彩心理学来考虑，我们把桔红的纯色定为最暖色，它在色立体上的位置称为暧极，把天蓝的纯色定为最冷色，它在色立体上的位置称为冷极，并用冷暖两极的关系来划分色立体上茶余备色的冷暖程度与冷暖差别。凡近暖极的称暖色；近冷极的称冷色。与冷极距离相等的各色，冷的程度相等；与暖极距离相等的各色，暖的程度相等；凡与两极距离相等的各色，称为冷暖的中性色。由此可知，红、橙、黄等同暖色，蓝绿、蓝、蓝紫等同冷色，黑。白、灰。彩、紫等色，都属中性色。

　　如果根据冷暖关系把色立体划分为十几个阶段，那么，凡差别十个阶段以上的称冷暖强对比，差别三个阶段以内的称冷暧弱对比，其余的称中等程度的冷暖对比，两极色的对比称冷暖最强对比。

　　从色彩心理学来说，还有一组冷暧概念。那就是白冷黑暖的概念。因此，在色立体上接近白的色块有冷的印象，接近黑的色块有暖的印象。一般的色彩混人白色会倾向冷，加黑会倾向暧。

　　平常说的色彩冷暖，一般并非指单一的橙蓝之冷暧，也非指单一的黑白之冷暖，而是二者的综合。但是，二者的综合不是均等的，似以橙蓝之冷暖为主导。因此冷暖对比的对比越弱，冷暖的倾向趋平缓，对比越强，刺激力量愈强。

　　11、色彩的三要素

　　色彩具有三种基本要素：明度、色相、纯度

　　A、明度

　　明度指色彩的明暗程度。以光源色来说可以称为光度。

　　对物体色来说可称亮度，深浅度等。在无彩色类中，最高明度是白色,最低明度是黑色。在白、黑色之间存在一个系列的灰色，一般可分为九级。靠近白色的部分称为明灰色；靠近黑色的部分称暗灰色。在有彩色类中，最明亮是黄色，最暗的.是紫色，这是因为各个色相在可见光谱上，振幅不同，对于眼睛的知觉的程度也不同而形成的。黄色，紫色在有彩色的色环中，成为划分明暗的中轴线。任何一个有彩色渗入白色，明度会提高，渗入黑色明度则会降低，渗入灰色时，依灰色的明暗程度而得出相应的明度色。

　　B、色相

　　色相指色彩的相貌。色彩的相貌是以红、橙、黄、绿、青、蓝、紫的。

　　光谱色为基本色相。不同色相是不同波长给人的一种感觉。基本色相的秩序以色相环形式体现，称为色环。色环分别可作为六色相环，九色相环，十二色相环，二十色相环等多种色彩秩序。

　　C、纯度

　　纯度指色彩的鲜、浊程度。纯度也称为艳度、彩度、鲜度或饱和度。

　　凡有纯度的色彩，必有相应的色相感。各色相最高纯度、色的知觉度。

　　不同，明度也不同。高纯度的色相加白或加黑，将提高警惕或降低色相的明度，赐教也会降低这它们的纯度。如果加适当明度的灰色或其它色相，也可相应地降你色相的纯度。美国色彩家孟谢尔的纯度色标把色相的纯度、明度分别用数字加以标定，这样能明晰地分出色彩的各自不同纯度差别。

　　色彩基础理论知识篇3

　　色彩基本理论知识

　　色彩分类:分为三原色、间色、复色。

　　色彩属性：分为色相、明度、纯度。

　　色彩对比：分为色相对比，冷暖对比。