做设计不可缺少的原理，色彩与搭配! / 四六文摘

色彩对于空间而言不仅是装饰，

还能产生效应；

有情绪、温度、尺度等变化，

合理选择色彩搭配，

能让设计效果事半功倍。

关于色彩今天我们一起来了解一下吧！

色彩由光引起，

而光又有其物理属性。

三原色（红、黄、蓝）是色彩构成的基本要素，

将三原色以适当比例混合，

可以得到各种不同的色彩。

色相、明度、纯度称为色彩三要素。

色彩三要素是色彩最基本的属性，

是研究色彩的基础，

也是最重要的概念。

它们是研究色彩的基础。

色彩构成

先讲一下关于色彩的最基本概念。

色相、明度、纯度。

色相:

色彩的相貌，

有无彩色和有彩色之分，

无彩色包括黑、白、灰、金、银。

有彩色是这5种之外的能够比较确切地表示某种颜色色别的名称，

比如红，橙，黄，绿，蓝，紫为基本色相。

明度-色彩明暗变化。

色彩的明度是指色彩的明暗变化程度。

色环上最明亮的是黄色，

最暗的是紫色。

明暗的两极是黑白，

那如何改变某种颜色的明度呢？

如果想要更亮可以加白，

白色越多会越亮，

同理，

想要变暗可以加黑色。

黑色越多越暗。

纯度-色彩鲜艳程度，

也称彩度、饱和度、鲜明度。

一般日常所见颜色种都会含有一定的灰度。

含灰色越多色彩纯度比较低。

简单来理解纯度就是颜色的鲜艳程度。

如下面的两张图：

色彩效应

情绪感：

色彩是有情绪的，

不同的色彩给人的感受是不一样的，

冷色调/低明度/低纯度的色彩带来的是：

安静、平静的情绪。

（案例来自：天津_梅兰工作室）

而暖色调/高明度/高纯度带来的是：

温馨、愉悦、振奋的情绪，

所以可以根据空间的用途，

和想要表达的情绪来选择颜色。

（案例来自：Biblioteca da Escola Umbrella）

温度感，

色彩也是有温度的，

常说的暖色，

冷色就来自色彩带给人的温度感。

温暖的感觉，

暖色调大于冷色调。

（冷色调案例来自：Framestudio）

（暖色调案例来自：ARENAL_ARQ）

尺度感：

指的是大小的差别，

物理尺寸相同的物体，

不同的颜色给人的尺度感不一样。

大家先感受一下，

下面两张图，

同款沙发，

不同颜色的面料带来的尺度感。

发现了吗？

似乎白色的沙发更大哦。

这就是大家常说的穿黑色衣服显瘦的原因。

关于尺度感，

高明度/高纯度/暖色调>低明度/低纯度/冷色调。

重量感：

颜色深显重，

颜色浅显轻。

看色彩会迷惑、欺骗我们的大脑的。

下图相同大小，

相同材质的两把椅子，

是不是左边的看起来更重一些呢？

其实只是颜色深一些而已。

这种重量，

我们也叫视觉重量。

离感：

在同一个画面当中，

低纯度/冷色调的物体往后退；

高纯度/暖色调的物体往前跳。

因此，

如果空间比较小，

想要空间变大，

可以选择低纯度冷色调为主。

空间本身就比较大的，

可以选颜色鲜艳一点，

花纹丰富一点，

显得饱满一点，

不至于太空。

（案例来自：UPPER EAST SIDE RESIDENCE）

空间感：

低纯度/高明度/冷色调/弱对比空间感强；

高纯度/低明度/暖色调/强对比空间感弱。

根据需求选择就好。

（案例来自：Nicolas Schuybroek Architects）

（对比弱空间感强)

（案例来自：aquazzurra）

（对比强空间感弱)

室内配色方法

讲配色方法，

先讲一下空间中的色彩比例。

可以把整个空间想象成一幅画；

墙、顶、地，

这些区域就是画布的背景；

重点墙面造型，

和大型家具，

就是画面的主体。

装饰摆件、花卉、绿植等就是画面中点缀部分。

（案例来自：IQOSA）

比例是：

背景占整体的60%，

采用低纯度，

高明度的色彩。

主题占比30%，

采用中等纯度，

中等明度的色彩。

点缀部分占10%，

采用高明度，高纯度的色彩搭配。

这样的配色比例基本不会出错，

出来的效果也比较好。

当然，

如果你的业主非常个性，

反其道而行也不是不可以的。

室内配色种类

同色系配色。

选择某一种色相，

利用纯度和明度的变化，

来搭配空间，

这种叫同色系配色，

也叫单色系配色。

这种配色方法，

色彩比较单一，

层次不够分明。

可以搭配一些无彩色。

(案例来自：aquazzurra）

邻近色配色：

是指色相环中相距60度，

或者相隔三个位置以内的两色，

为邻近色关系，

由于这个范畴内的色相彼此近似，

冷暖性质一致，

色调统一和谐、感情特性一致。

所以这种配色手法搭配出来比较和谐，

同时比单一色配色对比较强，

属于种对比效果，比较好把握。

(案例来自：aquazzurra）

对比色配色：

色相环上相距120度的两种颜色，

称为对比色，

这种颜色一般反差比较大，

对比强烈，

用种配色方式容易造成画面不和谐，

那怎么办呢？

其实调整颜色的比例就好了，

不要用5：5，

用7：3，

或者8：2，

就好很多。

（案例来自：Moustache）

互补色配色：

色相环中成180°角的两种颜色，

比如红色与绿色互补，

蓝色与橙色互补，

黄色与紫色互补。

互补色，

形成强烈的对比效果。

画面的平衡更难了，

那改怎么处理你，

除了上面讲到的色彩比例外，

还可以改变纯度。

这张图蓝橙色对比，

但是蓝色的纯度和明度都有调整，

整体看上去以橙色为主，

就和谐多啦!

这些设计方法大家感受到了吗？

赶紧来试试吧。

《色彩设计基础知识整理》

基础概念

色彩设计的使用场景：

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

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

配色设计的目的：

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

色彩的组成：

H（hues）色相：红、黄、蓝等色彩的种类；

○：心理四原色（赤・黄・緑・青）▲：色材の三原色（C・M・Y）△：色光の三原色（R・G・B）

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

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

色彩饱和度与心理印象

B（brightness）明度/亮度：色彩的明亮程度，为0时为黑色；

明度与纯度

色彩模式：

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

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

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

pccs（日本色研配色体系：Practical Color Co-ordinate System）

色调系列：色彩的不同明度和纯度的组合。不同的色调会给人留下不同的心理印象。

PCCS

淡色调（P）

淡色调

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

浅色调（LT）

浅色调

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

浅灰色调（LTG）

浅灰色调

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

轻柔色调（SF）

轻柔色调

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

明亮色调（B）

明亮色调

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

强烈色调（S）

强烈色调

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

鲜艳色调（V）

鲜艳色调

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

灰色调（G）

灰色调

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

浊色调（D）

浊色调

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

深色调（DP）

深色调

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

暗灰色调（DKG）

暗灰色调

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

暗色调（DK）

暗色调

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

色彩的心理印象：

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

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

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

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

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

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

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

不同色调的心理印象：

色彩搭配的流程

确定主题与用户

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

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

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

确定主色

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

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

确定辅色、背景色、强调色

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

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

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

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

优化细节

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

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

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

色彩搭配的方法理论

方法一（色彩九宫格）：

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

色彩九宫格

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

1号区域-淡色调

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

2号区域-明色调

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

3号区域-纯色调

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

4号区域-淡浊色调

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

5号区域-浊色调

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

6号区域-暗色调

心理印象：中等明度高纯度，沉闷、成熟、沉稳

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

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

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

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

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

方法二：

色相一致的配色

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

色相一致的配色

明度一致的配色

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

明度一致的配色

纯度一致的配色

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

纯度一致的配色

方法三：

同色系配色

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

邻近色/类似色配色

邻近色配色

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

中差色配色

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

对比色/互补色配色

对比色配色

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

三角形配色

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

四边形配色

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

五边形配色

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

其余：

从自然中获取配色：

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

选择与主体一致的颜色：

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

插入间隔色：

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

渐变：

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

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

做设计不可缺少的原理，色彩与搭配!

相关推荐