万字干货!6大章节帮你从零开始系统学配色

推荐阅读

一、前言

在我们平时的设计工作中,色彩是工作中必不可少的元素。我们使用色彩一般会通过目标产品、人群、年纪来搭配合适的合适的色彩,那这其中又有哪些我们不知道的事情,我们一起来了解下吧!

二、重新认识身边的色彩

首先我们系统的认识一下色彩的基础知识。色彩是人脑的识别反射光的强弱和不同的光波所产生的差异的感觉,光波是电磁波的一种,就是类似于医院给人检查身体 X 光线,我们把日常所见的那种能看见的光称为可见光,从现在的物理学角度解释呢,颜色就是通过眼睛、脑,还有我们生活经验所产生的一种对光的视觉感受,是人的视觉器官在所见光的环境下产生的视觉神经的感觉。

那我们大脑和眼睛是如何分辨各种颜色的呢?我们的眼睛是由三种视锥细胞所构成的,他们的主要功能是对我们平时所接受对光线波长进行分析和反馈及传递,也就是相当于翻译官的工作。而担任我们眼睛对波长翻译工作的三种视锥细胞分别对应可见光范围内的长波、中波、短波,在光谱当中,长波对应的是红,中波对应的是绿,短波对应的是蓝,这三种颜色构成了我们在辨别物体时三种最基本的颜色。

其次,三原色分两种,一种是美术三原色,另一种则是色光三原色,美术三原色是指青色(cyan)、品红色(magenta)、黄色(yellow),颜料越混合颜色越深,直至黑色;而色光三原色则为红色(red)、绿色(green)、蓝色(blue),颜色越混合却会越亮,直至白色。这也是为什么我们生活中的电灯一般是白色的,因为白色包含的颜色比较多,通过它所折射的颜色信息也就更多。

美术三原色和色光三原色为啥颜色会不一样呢,两者又分别是怎么确定的呢?

我们怎么去理解这两种三原色的区别呢。从本质上来说,我们能看到的物体是因为光进入人眼。而光是一种电磁波,人眼能感知的大约只有 400nm 至 700nm 范围内的电磁波。这部分电磁波谱也被我们称为可见光谱。

万字干货!6大章节帮你从零开始系统学配色

当可见光入射到我们双眼的视网膜上,视锥细胞就会被激活,并将信息传播给大脑。人类视网膜上共有三类视锥细胞(S M L)。

万字干货!6大章节帮你从零开始系统学配色

这三种视锥细胞分别对应可见光范围内的长波、中波、短波,在光谱当中,长波对应的红色,,中波对应的是绿,短波对应的是蓝,所以说,我们能看到的颜色其实是生物概念的,而非物理概念的。像鸟类就是四色视者,它们眼中的四种视锥细胞。除了红色、绿色、蓝色以外它们还能看到人类看不到的紫外线。

万字干货!6大章节帮你从零开始系统学配色

早在 17 世纪,年仅 23 岁的物理学家牛顿就发现经过三棱镜的折射,由于每种基本色的光波长度都是不一样的,所以当一道白光他经过三棱镜之后,根据波长依次排开,这个光线它就被散射成了不同的颜色而这便是著名的色散现象。

万字干货!6大章节帮你从零开始系统学配色

那时,人类开始在彩色光中寻找原色。所谓原色,是指混合其他颜色无法获得的“基本色”。当时牛顿率先将自然光分为七种单色光。我们现在知道,彩虹由七种颜色组成:红色、橙色、黄色、绿色、蓝色和紫色。但是从科学的角度来看,我们不能说彩虹是七种颜色,但它实际上是一个连续的光谱。这就是为什么当我们亲眼看到彩虹时,我们总是不能正确计算颜色的原因之一。

事 实上,在开始的时候,牛顿把这个光谱分成了 11 种颜色。但他很快就把 11 改成了 7,据说是因为 7 色对应的是炼金术中的 7 个音阶,7 种金属,7 个步骤。所以这个决定比较得心应手。

万字干货!6大章节帮你从零开始系统学配色

在之后,经过多次实验牛顿还发现了一个重要规律。当混合红、绿、蓝这三种颜色时,就能得到白光。此时的牛顿便得出结论:白光是各种不同颜色的光混合而成。这个发现奠定了经典力学时代,对光学以及色彩研究的理论基础。

1. 发现三原色

物理学家牛顿在 1643-1727 年发现七种颜色的光后,开始推断既然白光可以分解合成,那么这七种颜色的光也可以分解合成吗?经过一段时间的实验,牛顿计算出七种颜色中,只有红、绿、蓝三种颜色不能分解合成。而其他四种颜色可以由这三种颜色以不同的比例组合而成。所以红、绿、蓝被称为“三原色”。但这只是他的推断,并没有经过实验证明。

一个世纪后,托马斯杨在 1773 年至 1829 年间也有了新的发现。托马斯杨首先测量了七种光的波长,并确立了三原色更完美的原则。于是他提出颜色依赖于眼睛中三种不同的神经,这三种神经分别对红、绿、蓝最敏感。所有颜色都可以与红、绿、蓝以不同的比例混合。这一原理已成为现代色彩研究的理论基础。

从 1777 年到 1851 年,比托马斯杨小四岁的丹麦物理学家奥斯特,在 1820 年,基于托马斯杨晚年发现电流的磁效应,英国物理学家法拉第扭转了他的想法,最终在 1831 年发明了人类历史上第一台圆盘发电机。后来,随着大量玩电科学家的出现,电气设备得到了大规模的改进和使用。灯泡和发光二极管相继发明,人类学会了用电来创造光。

人类在学会了如何用电来制造光之后,根据前人的光学和颜色研究成果,制造出了可以发出红、绿、蓝三种颜色的光源。通过调整不同光量的比例,可以调制成千上万种颜色。随着单色光源的尺寸越来越小,无数的 RGB 组合依次排列,水平和垂直布局,封装在一个面板上,就有了我们今天看到的电子显示器。

二、什么是颜色模型

我们看到的图像数据用二维的形式表现。 这些照片既有色彩鲜艳、也有富有表现力的彩色照片,还有沉郁顿挫的黑白风格。 有些照片只有纯黑色和纯白两种颜色。 这样的都是图像的不同表现形式,接下来我们将通过不同的色彩模型了解他们的区别。

1. RGB颜色模型

RGB 颜色模型应该是我们在平时生活中接触最多的一种颜色模型,这个也是我们人眼能辨别的颜色值的不同所组成的。RGB 色彩模型是将红、绿、蓝 3 种不同颜色,按照亮度配比的不同进行混合,从而显示出不同的颜色。由于在实现上使用了 3 种颜色的定量配比,因此该模型也被称为加色混色模型。通过 3 种最基本颜色的混合叠加来表现出任意的一种颜色的方法现在多用于显示器等主动发光的显示设备。

万字干货!6大章节帮你从零开始系统学配色

2. CMYK颜色模型

如果说三原色调色的使用是人类发明的,那么 CMYK 四色印刷的原理和应用只能算是发现。在公元之前,聪明的古埃及人和中国人已经知道如何从自然环境中收集颜料。但是由于缺乏理论知识和技术瓶颈,可以调制的颜色非常有限。随着人类文明的不断发展,人们从大自然中发现了更多的奥秘,逐渐学会了用更少的颜料制作更多的颜色。到目前为止,在平面设计领域已经有了一种四色印刷模式。

也就是说,利用颜料和黑墨水三原色混色的原理,总共可以混合叠加四种颜色,我们看到的大部分颜色都是可以混合调制的。

印刷四分色模式(CMYK)是彩色印刷时采用的一种套色模式,利用色料的三原色混色原理,加上黑色油墨,共计四种颜色混合叠加,形成所谓“全彩印刷”。四种标准颜色是:

C:Cyan= 青色,常被误称为“天蓝色”或“湛蓝”

M:Magenta= 洋红色,又称为“品红色”

Y:Yellow= 黄色

K:blacK= 黑色(此处缩写使用最后一个字母 K 而非开头的 B,是因为在整体色彩学中已经将 B 给了 RGB 的 Blue 蓝色)

颜料的混合是减色混合,混合在一起的颜料越多,颜色就会变得浑浊暗淡。CMYK 四色模式是工业印刷的产物。CMY 三色混合不能像艺术三原色(红、黄、蓝)那样得到纯黑色,所以有必要添加额外的黑色墨水来使颜色变暗。此外,灰色和黑色在工业印刷过程中非常常见的,CMYK 四色印刷可以调制比艺术三原色更丰富和更精细的颜色(即更宽的色域)。因此,采用 CMYK 四色印刷模式是毋庸置疑的,CMYK 四色印刷已经成为印刷行业的标准。

下图为 CMY 叠色示意图

万字干货!6大章节帮你从零开始系统学配色

3. HSV / HSB 颜色模型

HSV 色彩模型大家可能不是特别熟悉,这是一种采用色调(H)、饱和度或者纯度(S)、明度或亮度(V)3 个参数来表示颜色的一种方式。S 指的是色彩的纯度,这个切面也是设计软件中的拾色器。

① 色调(Hue)

以角度的形式进行度量,其取值角度范围是[0,360]。红色、绿色、蓝色 3 种颜色以逆时针方向进行排列。例如红色的位置为 0°,绿色为 120°,蓝色的位置为 240°。例如我们所说的蓝色、绿色、紫色就是色相的不同。为了方便我们对色彩的表述和研究,我们把光谱中可见光的色彩序列首尾相接,构成一个 360°的色相环,每一度就表示一种颜色。

② 饱和度(Saturation)

饱和度反映了一种颜色与光谱颜色的接近程度。某种颜色是光谱颜色和白光混合的结果。如果某一种颜色中的白色成分较少,则颜色更接近于光谱色,表现出颜色又暗又亮的效果,此时饱和度较高。相反,对于一种低饱和度的颜色来说,它包含的白色成分越多,它的颜色便偏向于白色,则鲜艳程度下降。

例如我们小时候追星的时候房间都会贴满明星的海报,等过了几个月,原来色彩鲜艳的海报的颜色会慢慢的褪去,当看到这种情况,我们作为设计师的气质本能的会说:海报的色彩饱度相比之前降低了不少,当纸张的饱和度为零时也就是纸的本色。

也就是说,饱和度反映的是某种颜色中的白色成分,可以用 0 ~ 100%来表示。值越高,饱和度越高,光谱颜色的成分越多。

③ 明度(Value)

明度显示了某种颜色的亮度,这可以称为光的强度产生的视觉体验。我们看到的颜色越亮,明度值越高,反之则越低。例如,比较深紫和粉红色,深紫更暗,而粉红色更亮,因此认为粉红色的明度比深紫高。同样,我们也可以用百分比的形式来表示某种颜色的明度。

例如一个房间的灯是 10w 和另外一个房间的灯是 50w,其亮度也是大不相同的,在我们常用的设计软件中,亮度的取值中也为 0~100,为 0 时就是纯黑色,为 100 时即为最亮。

万字干货!6大章节帮你从零开始系统学配色

三、颜色模型的应用场景

① RGB 颜色模型应用场景

在我们平时的设计工作中,使用的比较多的是 RGB 是我们最常见的色彩模型,在设计印刷品的时候也会使用 CMYK 色彩模型,其次还有一些做设计用的比较少 Lab 模型和 Hab 模型。

现在的我们使用的电视屏幕或者电脑显示器上的各种颜色组成就是由 RGB 按照不同的比例组成的,它们一组红绿蓝就是组成这些像素的点,这也是很多人每天乐此不彼对比哪个品牌的手机像素好。

但是它们可能不是很了解像素好是什么意思,像素好就是说你的像素点多,每一种颜色图案都是有很多点组成的,这些点就是一组 RGB,点越多像素就越高,颜色也就越明亮,图像也越清晰,电脑上的亮度就是指 RGB 的多少,而且都是整数,RGB 一般是有 256 个亮度。

从 0 开始到 255,这都是一个亮度,三个颜色有三个 256 亮度,这其中的 0 不想是我们生活中似的可以忽略不计,这也是一个亮度,每一种基色都有 256 种亮度所以它们的组合颜色数就是 256 的三次方,大约是 1678 万种颜色,所以我们也一般称为千万色。有时候也称之为 24 位色,就是指 2 的 24 次方,它们存在的越多那么我们看到的世界的颜色也就越真实,像是白色在电脑上的组成就是 255.255.255,相对的黑色就是 0.0.0 这是在电脑上颜色数值代码。

那么对应的 RGB 数值就是,R 红色为 255.0.0,G 绿色为 0.255.0,B 蓝色的为 0.0.255,就是根据这三个基色的不同组合组成我们所见到的各种颜色,学过 PS 的人一般对这种模式是比较熟悉的,很多图片的处理工具都是运用的 RGB 模式。

一般应用的地方就是我们的显示器,投影仪,扫描仪,数码相机,数码相机有些是用 CMYK 模式来进行拍照的,但是像是我们的显示器,最早的电视是黑白色彩的,渐渐地都改为 RGB 模式的了,电脑上显示器用的是 RGB 模式。

万字干货!6大章节帮你从零开始系统学配色

一般你的电脑画面不流畅的时候,一般就是 RGB 的基点少,显卡没够符合所需要的基点,游戏上的画质取决于基点,浓度越高,画质越好,反之画面不流畅,RGB 模式在我们生活中起到的作用很大,但是因为它是发光的,所以一般应用在显示设备中。

万字干货!6大章节帮你从零开始系统学配色

②  CMYK 颜色模型应用场景

CMYK 色彩模型是为了印刷工业开发的一种颜色模式,由于 CMYK 的颜色比 RGB 颜色范围要小些,故在打印图像时,不能打印 RGB 模式的图像,这时需要将 RGB 模式下的图像更改为 CMYK 模式。如果将 RGB 模式下的图像进行转换,可能会出现颜色损失或偏色的现象。

模式的转换是根据需要来定的,一般来说,RGB 模式比 CMYK 模式的颜色更丰富,色彩更鲜艳,转换为 CMYK 模式后,颜色会变暗,但如果要印刷就必须得用 CMYK 模式。RGB 模式的图若想转成 CMYK 模式的图,要先通过 Lab 模式再转换为 CMYK 模式,它是介于 RGB 和 CMYK 之间的模式。但尽管这样,转换过后还是会变颜色。

万字干货!6大章节帮你从零开始系统学配色

③ HSV/HSB 颜色模型应用场景

它是根据颜色的直观特征由 A.R.Smith 于 1978 年创制的一种颜色模型。因为 S 指的是色彩的纯度,这个切面也是设计软件中的拾色器。所以我们在大部分的设计软件中运用的拾色器也是由它完成的。

万字干货!6大章节帮你从零开始系统学配色

1. 色彩的应用-信息传递

颜色传递信息是在人们千百年以来文明演化所形成的共识的一种结果,比如早在先秦时期,就已经产生了以服色区分贵贱的观念,但那也只能区分贵族与庶民奴隶之间的界限,不能严格的区分天子、贵族、清皇室之间有种别差别,而到了隋唐以后,等级制度开始了,高度的强化,你身上的颜色,形成了一个严格的等级序列,哪一种身份的人要穿哪一种颜色的衣裳都是定制的。

到了唐代的时候,五品以上的官员,是可以穿紫色的衣服,然后无品官呢,是可以穿全黑色,有时是浅红色,然后七品官是绿色,宋代的话呢,庶民就只允许穿白色的衣服,明代的百姓都要避开黑色,紫色,绿色,柳黄和明黄色。这个就是我们所熟知的品色服的制度。

到了现在,虽然颜色没有那么麻烦的规矩,但是也有许多共识,比如表现危险常用的红色,表示安全通行的绿色,也有表示警告的黄色,如果我们用绿色去设计警告的标示牌,这样肯定会给日常生活带来不少的麻烦。所以我们在设计某些特定的颜色的时候其实心里已经有了该使用的场景了。

万字干货!6大章节帮你从零开始系统学配色

2. 色彩的应用-情感传递

用颜色来传递情感也是中国自古以来比较擅长的,例如,“最爱湖东行不足,绿杨阴里白沙堤”。相信诗人白居易的这首钱塘湖春行,大家都有学习过,绿杨阴里白沙堤很容易让我们联想到杨柳的叶子,和白色的沙堤通过这一系列的描写很容易体会到诗人对钱塘江的喜爱之情。

除了这些,我们还可以通过颜色的色相来传递情感,比如我们遇到比较悲伤事情,一般在朋友圈的配图会选择黑色或者灰色,来暗示自己心情不好,另外这种无彩色也可以传递一种压迫或者紧张感,比如我们以前学过的诗句“黑云压城城欲摧”,仅用一句话就描写出当时战争的紧迫感,所以颜色来传递情感也是颜色所具备的属性之一。

万字干货!6大章节帮你从零开始系统学配色

多彩的颜色能传递出的信息更多,例如饱和度比较高色彩的图片能传递出喜爱开心或者青春的感觉。所以能让我开心剁手的双十一或者双十二多半使用地颜色会比较艳丽。

万字干货!6大章节帮你从零开始系统学配色

3. 色彩的应用-品牌传递

色彩体系在品牌传递中也是极为重要的一环。例如我们走在大街上,看到这个颜色的麦当劳你还敢去吃吗?

万字干货!6大章节帮你从零开始系统学配色

所以色彩是一种无声的语言,它让品牌带来的记忆点绝对是高于图形的,所以现在的互联网企业也开始慢慢的注重自己的品牌色的规范以及在 UI 设计中的延展应用。

四、色彩的三要素

我们在对一种颜色进行描述时,常常可以用深红,浅蓝,墨绿或者明黄色名来描述,虽然在一定程度上也能进行颜色信息的交流,但这是不够严谨和科学的。在颜色管理中,建立颜色体系,才有颜色统一的共同语言,才能进行颜色信息的准确交流。常用的颜色体系有:

  1. 美国的孟塞尔颜色体系(Munsell color system)
  2. 德国的 DIN 颜色体系
  3. 瑞典的自然颜色体系(Natural Colour System)
  4. 奥斯特瓦尔德颜色体系(Ostwald Colour Order System)
  5. 中国颜色体系

1905 年, 孟塞尔(Albert H. Munsell)开发了第一个广泛被接受的颜色次序制(color order system),称为孟塞尔颜色系统(Munsell color system),对颜色作了精确的描述。孟塞尔颜色空间描述的所有颜色集合体称为孟塞尔色立体(Munsell color solid),孟塞尔色立体像一个扭曲的偏心球体。

孟塞尔色彩体系科学的、系统的、明确的透过明度(value)、色相(hue)及纯度(chroma)三个维度来描述颜色的方法,这三个概念今天也被称作色彩的三要素。

万字干货!6大章节帮你从零开始系统学配色

1. 色调的构成

我们一直都在说色彩和色调,那色彩和色调到底是什么呢?

① 色调:决定色调的是反射的光线中哪种光线占优势,通常以一幅画的色相、明度、冷暖、纯度四个方面定义一副画的色调。

注意:色调并不是指颜色的性质,而是对一副作品整体的评价概括,是一种作品色彩的倾向。

一幅绘画作品虽然有很多颜色,但总体有个倾向,是偏蓝 or 偏红,偏冷 or 偏暖,倾向就是色调。

万字干货!6大章节帮你从零开始系统学配色

② 色彩:由色调抽象出来的感情,或者理解为一幅画的感觉。

2. 色调-明度基调

因为色彩之间明度的不同,形成的对比关系,叫明度对比。所以,相同色相不同明度和不同色相不同明度,均可形成明度对比。色彩对比中,明度对比是最能表现色彩层次感、空间感、清晰感、重量感和软硬感的对比关系的。

我们将明度色标分为 9 度。1 度—3 度称为低调色,4 度—6 度称为中调色,7 度——9 度称为高调色。高调色显得活波、可爱、柔软、明亮和轻感。低调色是朴素、丰富、迟钝、重、雄大、有寂寞感的感觉。

在色调的明度对比中,明度对比的强弱取决于色彩之间明度差别的大小。明度差别越大,对比就越强,明度差别越小,对比就越弱。

以无彩色调划分的 9 级明度等级为基本标准,可将明度差别强弱划分如下:

  1. 短调对比(弱对比):明度差别在 3 级以内。
  2. 中调对比(中对比):明度差别在 3-5 级内。
  3. 长调对比(强对比):明度差别在 5 级以上。

① 色调-明度基调-高调

在设计作品中一般采用高长调的作品会有明亮,轻柔,纯洁等特征。一般给人联想到比较美好的事物,例如明媚的天空,鲜花绽放的郊游场景等。这类型的设计作品一般以较大面积的高调色大约是 70%-85%,然后再配以小面积的低调色,这样作品一般层次分明,对比比较强。

万字干货!6大章节帮你从零开始系统学配色

② 色调-明度基调-中调

中调类型的作品一般给人的感觉比较沉稳,不会让人有特别的情绪波动,不会有人特别的喜欢或者特别讨厌。

万字干货!6大章节帮你从零开始系统学配色

③ 色调-明度基调-低调

低调类型的作品给人的联想词一般是以厚重,沉闷,阴沉,迟钝的特点。我见过比较多的就是黑金类型的搭配。

万字干货!6大章节帮你从零开始系统学配色

3. 色调-明度对比

① 色调-明度对比-长对比

长调对比(强对比):明度差别在 5 级以上。

万字干货!6大章节帮你从零开始系统学配色

长对比的作品形成强烈明暗对比。反差大,有对比强烈、清晰度高、爆发力强的视觉效果。

万字干货!6大章节帮你从零开始系统学配色

② 色调-明度对比-中对比

在色调明度对比中对比 5 以内,3 以上的叫中对比。

万字干货!6大章节帮你从零开始系统学配色

整体效果为中调的弱对比。具有模糊、朦胧、含蓄、朴素、平板、梦幻般效果。

万字干货!6大章节帮你从零开始系统学配色

③ 色调-明度对比-短对比

在色调明度对比中色阶跨度 3 阶以下的叫短对比。

万字干货!6大章节帮你从零开始系统学配色

短对比的作品一般具有庄重、含蓄、朦胧的效果。

万字干货!6大章节帮你从零开始系统学配色

4. 色调-冷暖对比

因色彩色调的差别而形成的色彩对比,称之为冷暖对比。色彩的冷暖感觉是人们在长期生活实践中由于联想而形成的。红、橙、黄色常使人联想起东方旭日和燃烧的火焰,因此有温暖的感觉。蓝色常使人联想起高空的蓝天、阴影处的冰雪,因此有寒冷的感觉,所以称为“冷色”,其实是绿、紫等色给人的感觉是不冷不暖,故称为“中性色”。

万字干货!6大章节帮你从零开始系统学配色

一般来说,冷色调的颜色,包括黑、灰、茄子蓝、深褐色、墨绿、紫等,在视觉上有收缩的作用。

万字干货!6大章节帮你从零开始系统学配色

所以一般黑色的裤子会比亮色的裤子看起来腿会更瘦点,这也是通过科学原理来让自己看起来更瘦点。

万字干货!6大章节帮你从零开始系统学配色

① 色调-冷暖对比-暖色调

因为人们生活的习惯和接触事物的感受,一般红色橙色黄色被称为暖色调。

万字干货!6大章节帮你从零开始系统学配色

而红色也是极暖色,其次是红色自身代表的含义也是比较多的。给人的联想词基本上就是热闹,开心,温暖等。

万字干货!6大章节帮你从零开始系统学配色

② 色调-冷暖对比-冷色调

因为人们生活的习惯和接触事物的感受,一般的冷色调则是以青色和蓝色为主。

万字干货!6大章节帮你从零开始系统学配色

在冷色调中,以蓝色为极暖的色调,一般夏天的衣服也是以冷色调为主色的比较多,是给人心理上的补偿。

万字干货!6大章节帮你从零开始系统学配色

③ 色调-冷暖对比-中性色调

说起中性色大多数人第一反应就是指黑、白、灰这些无颜色系。但现在中性色的定义更为宽泛,还包括了紫色、绿色这些明确冷暖的色彩系列。

万字干货!6大章节帮你从零开始系统学配色

中性色的运用应该是比较灵活的,不应受一些固定的搭配限制。可以大面积运用在设计作品中,将其作为设计的主色调,这样并不会显得突兀或者沉闷。辅以其他色彩点缀,能打造出平静温和也能打造出高级质感。

万字干货!6大章节帮你从零开始系统学配色

④ 色调-冷暖对比-相对冷暖

在暖色里面也是有冷暖之分,我们把这种称为相对冷暖,就是有对比便会有区别。饱和度越高看起来会更加偏向暖色。

万字干货!6大章节帮你从零开始系统学配色

我们可以得出结论,越暗饱和度越低,相对冷暖中就越冷。

万字干货!6大章节帮你从零开始系统学配色

5. 色调-纯度

色彩的纯度。从左至右,纯度由高变低。纯度越高,颜色越正,越容易分辨。同一种颜色含有灰色的成分越多,纯度越低,也就是我们常说的“脏”。

万字干货!6大章节帮你从零开始系统学配色

另外我们也会将纯度进行分类,一般我们将它分为:无彩度,低彩度,中彩度,高彩度。

万字干货!6大章节帮你从零开始系统学配色

① 色调-纯度-低彩度

低彩度的作品一般呈现比较质朴,素雅的设计作品,有的看起来有一种高级感,一般给予人的联想词是看起来情绪波动不大。

万字干货!6大章节帮你从零开始系统学配色

② 色调-纯度-中彩度

中彩度的设计一般会给予人比较舒适,向往美好,青春,明快、活泼的视觉效果。

万字干货!6大章节帮你从零开始系统学配色

③ 色调-纯度-高彩度

高彩度是视觉感受明显高于前两种的体验,一般给予人以力量、有对比强烈、清晰度高、积极的视觉感受。

万字干货!6大章节帮你从零开始系统学配色

五、色彩的联想

色彩的直接心理效应来自色彩的物理光刺激对人的生理发生的直接影响,色彩直接影响生理。所有信息都会运用联想效应,色彩出现在不同场景下情绪反映也不同。

联想效应(Associative Effects)又称逻辑误推效应,是指联想是由一事物想到另一事物的心理过程。色彩联想分为具体联想和抽象联想。具体联想是由看到的色彩联想到具体的事物,如看到红色,联想到太阳、火焰、红旗等;抽象联想是由看到的色彩联想到某种抽象概念,比如见到红色联想到温暖、危机、喜庆等。(看到色彩联想到具体的事物,看到色彩联想到抽象的概念,只是一种感觉而非物体)比如当你肚子饿了,你看到这样的一道菜肯定想去吃的。

万字干货!6大章节帮你从零开始系统学配色

那同样还是这道菜,你还是肚子饿了,如果炒成这个颜色端出来给你你肯定是不愿意吃的,甚至还会怀疑这道菜有毒,因为我们现实生活中很少有好吃的会是这个颜色,它不符合我们对食物的色彩联想。

万字干货!6大章节帮你从零开始系统学配色

例如我们生活中的很多设计也是运用了色彩联想的方式,我们才会感觉他们融入我们的生活里是没有问题的,例如,比如:从形状和色彩上联想最接近的物体...熊。

万字干货!6大章节帮你从零开始系统学配色

例如红色的装扮的教练可能会给我们更热情的感受一样。这都是我们自己对色彩的联想。

万字干货!6大章节帮你从零开始系统学配色

所以当我们去面对不同的色彩,会给人感官上带来不同的感受。面对不同的颜色,人们就会产生冷暖、明暗、轻重、强弱、远近、膨胀、快慢等不同的心理反应。这都是色彩背后的一些寓意/属性/联想给我们带来的感受。

1. 色彩属性 / 印象坐标

我们对每一种颜色的固有印象已经形成了,那我们怎么去划分每个颜色的属性或者印象呢?这里需要用到一个坐标,把我们对颜色的共识按照分类划分下来,这样去总结去归类,我们在实际的工作中才能派上用场。

万字干货!6大章节帮你从零开始系统学配色

我们把它转换成每个颜色代表的大致属性也是可以分类的。

万字干货!6大章节帮你从零开始系统学配色

其次全球是每个行业所采用的 LOGO 色彩归类。

万字干货!6大章节帮你从零开始系统学配色

2. 色彩的心里映射及应用

① 黑色

黑色是与人类关系最密切的颜色之一。在原始社会时期,黑夜和死亡对人类来说是最神秘的。许多国家在葬礼上穿黑色衣服来表达对死者的哀悼,这是原始的遗产。耶稣基督周五去世,现在中国很多基督徒信仰基督教,于是“黑色星期五”在中国流传开来。

在现代社会,黑色的不吉利因素正在慢慢消失并被人们所接受,这意味着现在会有更多的人购买黑色汽车,许多高端品牌的设计开始以黑色来凸显其质量。

夜和煤的颜色是黑色的,浑厚的风格也是黑色的。20 世纪 60 年代,美国一个重要的文学流派被称为“黑色幽默”,所以黑色也是力量和勇气的象征。它具有男人的毅力、力量和认真的特点,在产品中的应用可以突出产品的质量。

在设计中,黑色作为一种无彩色,与其他颜色搭配会使其他颜色看起来更亮。

万字干货!6大章节帮你从零开始系统学配色

② 白色

白色是所有颜色光的混合物,也称为全色光。它是阳光的颜色,白昼的颜色。因为白色既反射色光又反射热能,所以夏天穿白色或浅色的衣服能让人感到轻松舒适。

其次,在基督教中,白色可以使人纯洁、神圣、明亮。在欧美的所有婚礼上,新娘通常穿着白色的婚纱,这是神圣和幸福的象征。然而,中国的传统习俗与西方不同。白色是丧、白孝、花、白领带的颜色,白色代表死者的记忆。但也有一无是处和失败者的象征,因为中国有句古话叫“一穷二白”。

白色可以搭配各种颜色。将白色添加到暗淡的颜色中会立即变得明亮。

万字干货!6大章节帮你从零开始系统学配色

③ 灰色

灰色是介于白色和黑色之间的中性颜色,带有知识分子的味道。不同的是,灰色给人的感觉是单纯、冷静、孤独。在设计上,灰色一般用作视觉的过渡区,也是休息区。

在我们的现实生活中,多云的天空、城市道路和水泥路都是灰色的。所以在设计中大部分时间都是用灰色作为背景色。

灰色是保证色彩和谐的重要配角。没有配角的大力配合,主角也没有那么出彩。在 UI 设计中,灰色经常作为一种未被选中的颜色来传达信息,所以灰色也有负面意义。

万字干货!6大章节帮你从零开始系统学配色

④ 红色

红色与人类的关系,和黑白一样古老。对原始人来说,红色代表生命,与血、火、太阳紧密相连,具有激情、激情、冲动、活力、温暖的特点。

在一些国家,由于不同的种族和宗教信仰,深红色也被认为是嫉妒和暴政的象征。在基督教中,红色象征着基督的血和上帝的爱,而在佛教中,红色是生命和创造的颜色。在红色感染下,人会有反抗的冲动。红色也是颜色符号的国际术语。无论在哪个国家,都有共产主义的含义,象征着投身革命洪流的人们的献血和热情。

在中国,红色是中华民族最喜爱的颜色,甚至成为中国人的文化图腾和精神皈依。周朝东汉、唐朝、武周、宋朝、明朝国色都是红色。红色逐渐成为奢侈和幸福的象征。

在现代社会,红色用来表示停止、警告、危险、防火等。比如消防车、救护车的停车信号是红色。

万字干货!6大章节帮你从零开始系统学配色

⑤ 橙色

橙色具有红、黄两色的特性,既有红色热情,又有黄色光明、活泼的性格,是色彩中最温暖、最欢快的色彩。火焰中橙色比例最大,是最具辉煌度的颜色。它使我们联想到收获的金秋、暖和的阳光、醉人的气氛,是一种富有满足感的快乐的颜色。

万字干货!6大章节帮你从零开始系统学配色

橙色在视觉的刺激作用虽然没有红色强大,但它的视觉视度很高。工业用色中,作为警戒的指定色,如养路工人的工作服、救生衣、建筑工人的安全帽和雨衣等多用橙色。

万字干货!6大章节帮你从零开始系统学配色

橙色一般的特性是:温暖、欢快、辉煌、满足、欢快、收获、自信、健康。

万字干货!6大章节帮你从零开始系统学配色

⑥ 黄色

黄色代表太阳的颜色,是灿烂的代表。所以人们经常把它与太阳和一切发光的事物高度绑定在一起。黄色象征明亮的、希望。散发秋天收获粮食的香气,也是所有色调中可见度最高的颜色。在高亮度下仍能保持高色度。因此,黄色经常与神圣的东西联系在一起。同时,黄色也是金色和丰收的颜色,常与华丽联系在一起。除了前面提到的阳光、柠檬、迎春、麦田,还有向日葵、雏菊香蕉、梨、蛋黄、郁金香、瓜、银杏、啤酒、食物。

万字干货!6大章节帮你从零开始系统学配色

在中国封建社会,黄色也是一种特殊的颜色,那时候的黄色被规定为帝王的专用色,被视为作权力、威严、财富、高贵、骄傲的象征,一般老百姓不许用,在古罗马,黄色也被当作贵族专属的颜色,象征光明、希望和未来。

万字干货!6大章节帮你从零开始系统学配色

而在大洋彼岸的美国、日本,黄色被视为想念、希望的代表。在佛教中,黄色被誉为最崇高的色彩,代表超俗,僧人的衣装和寺院佛阁多采用黄色;而黄色在基督教则被认为是叛徒犹大的衣服颜色,是卑劣可耻的象征;在伊斯兰教里,黄色使人联想到沙漠、干旱,是死亡的象征,在现代,黄色有时和财富、辉煌、荣耀联系在一起,有时又和商业气氛,甚至和色情、淫秽联系在一起。

由于黄色明度较高,在日常生活中常被用在引人注意或告知危险的工地、交通引导用的指示牌等,如小学生戴的小黄帽,就是为了在过马路时引起过往车辆注意。

万字干货!6大章节帮你从零开始系统学配色

一般的颜色搭配绿色底上,由于绿色本身含有黄色和蓝色的成分,看上去比较协调。深蓝紫色底上的黄色和黑色底上的黄色达到了自己最明亮和最耀眼的光辉,这时的黄色是有力的、鲜明的。红底色上的黄色带有节庆的气氛,这是中国人都普遍喜欢的色彩组合。

万字干货!6大章节帮你从零开始系统学配色

⑦ 绿色

绿色在色彩里属于中性色,对人的视觉感觉无论是心理还是生理都属于比较温和的。我们常见的色彩,除了天空和大海是蓝色除外,地球上的绿色面积应该是最大的,植物大部分是绿色的,所以绿色是我们在自然界中最常见到的颜色之一,从古至今,人们就生活在绿色的怀抱里,所以绿色会给予人独有的安全感,置身于绿色中,人会有疲劳顿消的感觉,因而医院经常会出现淡绿色调。绿色被视为春天、希望、和平、新鲜、宁静、年轻、成长、安全、朝气蓬勃和旺盛的生命力的象征。

万字干货!6大章节帮你从零开始系统学配色

《圣经.创世记》里有一个故事讲,“鸽子完成使命后, 嘴衔绿色的橄榄叶向主人通报平安。从此,鸽子、绿色、橄榄叶就成了和平的象征”,因此鸽子也被称为和平鸽。据说现代的邮政色彩就是从这个典故而来的。

万字干货!6大章节帮你从零开始系统学配色

绿色在工业颜色法规中是安全的颜色;医疗机构和医疗保健行业的绿色,意味着健康、新鲜、安全和希望;绿色食品是无污染、天然安全的食品。绿色通道是安全通道;在交通信号中,绿灯是通行;绿色也用作国防色和防护色,因为它接近自然色。国际知名的绿色和平组织也以绿色为代表色。

万字干货!6大章节帮你从零开始系统学配色

⑧ 蓝色

蓝色是自然界中使用最广泛的颜色。天空和海洋每天都用蓝色包围着地球,我们很熟悉。大多数人对蓝色并不反感。蓝色非常适合用来表达深远的空间。蓝色能让人豁达,冷静,理智。除了蓝天大海,我们的生活中还有很多东西是蓝色的。比如:牛仔裤是蓝色的,车牌(中国)是蓝色的,有些车是蓝色的,有些运动服是蓝色的,这是自然界中使用最广泛的颜色。

万字干货!6大章节帮你从零开始系统学配色

蓝色是许多欧洲人和美国人最喜欢的颜色。它有一种保守的感觉,让人觉得值得信任。其实蓝色几乎适合所有人的肤色。可以说,蓝色是一种深受全世界喜爱的颜色。大海给蓝色带来神秘。在欧洲文化中,蓝色是上帝的代表色。深蓝色是一种简约内向的颜色,似乎蕴含着大自然的力量。这种力量隐藏在黑暗和寂静中;浅蓝色是天空中流动的大气的颜色,是伟大和永恒的象征。在现代,蓝色是前卫、科技和智慧的象征。很多企业,包括技术、工业、金融等行业,都把蓝色作为企业形象的主色调。

万字干货!6大章节帮你从零开始系统学配色

蓝色是所有色调中最冷的,与橙色形成鲜明对比。蓝色的寒冷使它很容易与雪、树木的投影、大海、天空、水等联系起来。不同的蓝调有不同的倾向。纯蓝,简约大方,充满青春气息;微灰深蓝让人感觉有一定的格调;亮浅蓝色,轻盈透明,空间感深刻;深蓝色(藏青色)有一种稳重柔和的魅力。

万字干货!6大章节帮你从零开始系统学配色

⑨ 紫色

紫色是所有色调中明度最低的颜色,是神秘气氛的制造者。太阳升起和落下时从云中透射出来的阳光;我们平时看到的天空和大海都不是纯蓝色的,无论是白天还是晚上都会有不同程度的紫色。很多花是紫色的,比如薰衣草、勿忘我等等。紫色在自然界总是和绿色一起出现,两者的搭配和谐动人。

万字干货!6大章节帮你从零开始系统学配色

紫色贵族感是历史造成的。紫色是自然界中罕见的颜色。据说在古代,紫色只能从少数动物、植物或矿物中提取。无论是原料还是工艺都说明紫色来之不易,所以稀有珍贵。紫色因其稀有珍贵,成为欧洲皇室和贵族的特殊颜色。中国古代一品官员的官服多为紫袍。

在中国,清华大学的 VI 也是紫色的。

万字干货!6大章节帮你从零开始系统学配色

3. 色彩组合

我们所熟知的对比色、近似色这些,他们只是搭配颜色的一部分,他们也只是色环上的色彩组合,也单纯指的是色相上的变化。

万字干货!6大章节帮你从零开始系统学配色

① 近似色

近似色也叫同类色,是色相环上两个色相值之间与色环之间的夹角小于 30 度的颜色,色差很小,给人以单纯,稳定、温和的感觉,可以使画面保持统一,只能通过色彩的明暗参差来表现画面的立体感,如要使画面突出,可以点缀点对比色,增加画面的亮点。

万字干货!6大章节帮你从零开始系统学配色

万字干货!6大章节帮你从零开始系统学配色

② 类似色

类似色是在色相环上的两个色相值之间与色环之间的夹角不超过 60 度。搭配比较常见的有红与黄、橙与绿、青色与黄绿。因为邻近色在明度和纯度上可以构成较大的反差效果,所以这种配色使画面呈现出丰富、跳跃的感觉。

万字干货!6大章节帮你从零开始系统学配色

万字干货!6大章节帮你从零开始系统学配色

③ 中度色

中度色也叫临近色,指的是色相环上的两个色相值之间与色环之间的夹角小于 90 度,大于 60 度,属于色相中的中对比,可以保持画面的统一感,使画面显得很丰富、活泼,在色彩上有主有次的配色可以增强吸引力。

万字干货!6大章节帮你从零开始系统学配色

万字干货!6大章节帮你从零开始系统学配色

④ 对比色

色环上的两个色值对比比较大的一种情况,一般是两个色值与圆形之间的点连成线的夹角小于 180 度大于 90 度我们称之为对比色,效果鲜明,饱满,容易给人带来兴奋,激动的快感,在一些作品中常用来表达随意、跳跃、强烈的主题,来达到吸引人的目光。

万字干货!6大章节帮你从零开始系统学配色

万字干货!6大章节帮你从零开始系统学配色

⑤ 互补色

两个色值之间形成的夹角为 180 度,这个我们称之为互补色,对比最强烈,画面是最丰富的,最具有感官刺激性的色彩组合,常被人们来表达极大反差的事情,以及用此来突出彼的目的表达。

万字干货!6大章节帮你从零开始系统学配色

万字干货!6大章节帮你从零开始系统学配色

4. 设计中的色彩

一般我们做设计的版面上的色彩层次包括,主色,辅助色,点缀色,在国外早就有设计师总结出了一条通用的配色法则,就是 70%的主色加上 25%的辅助色,再加上 5%的点缀色。

万字干货!6大章节帮你从零开始系统学配色

① 怎么确定主色

我们在接到设计任务时,肯定会有一个去突显的主要产品或者信息。主色,是整幅作品的主要色彩,它可以影响你对整个作品的感官印象,或者是产品的企业色,来统一企业形象,作品想要传达的感受,主要是由这个色彩传达出来的,不可替代,换了别的颜色,整幅作品传达的主题就被改变了。

(1)主色的面积比较大,比较显眼,一眼就可以看出来,就是主色。

万字干货!6大章节帮你从零开始系统学配色

(2)在画面中,它虽然面积不大,但是在画面中间且颜色比较显眼。

万字干货!6大章节帮你从零开始系统学配色

② 辅助色

辅助色一般像红花配绿色中的绿叶的作用,来按照合理的比例大小去搭配整体的版面,辅助色与主色会搭配比较合适或者企业形象已经订好辅助色了。

万字干货!6大章节帮你从零开始系统学配色

③ 点缀色

点缀色的功能:引导和提示,一般点缀色的面积一般比较小。点缀色一般像黑夜里的星星,比较吸引人的目光,但是不会破坏版面的和谐,就像做菜时候加入的辅助佐料一样。点缀色可以是多个颜色。若点缀色多了,也可以形成一定的风格。

万字干货!6大章节帮你从零开始系统学配色

5. 色彩的功能

色彩在一个好的版式里面一般起画龙点睛的作用,在版面中,色彩有分割信息、突显视觉中心、引导视线的作用。

万字干货!6大章节帮你从零开始系统学配色

① 分割版面

在设计工作中,有时候素材有限,但是需要排布的信息比较杂乱,这个时候可以通过色彩将版面分割成若干块,有助于规划版面。

万字干货!6大章节帮你从零开始系统学配色

② 聚焦视觉中心

在设计执行工作中,有时候需要突显画面中的某些内容,我们可以通过加色彩平衡画面,来展现我们需要展示的信息和产品。

万字干货!6大章节帮你从零开始系统学配色

③ 视觉引导

视觉引导在设计中是很常用的手法,通过色彩去引导视线也是其中的方案。例如在无彩色中出现了彩色,会吸引我们眼睛往哪个地方聚焦,我们的视线会根据色彩的引导去走,这就是引导作用。

万字干货!6大章节帮你从零开始系统学配色

6. 合理搭配色彩

如果想搭配出合理的色彩,首先需要知道一些关于色彩的基础,其次是需要在合适的场景使用合适的色彩的搭配,这样搭配出的色彩才不会太突兀。

万字干货!6大章节帮你从零开始系统学配色

7. 配色法则

在我们搭配颜色的时候,如果属于经验比较少,我们可以参考前人总结的一些配色技巧和配合法则,例如平衡法则、聚焦法则和同频法则。

万字干货!6大章节帮你从零开始系统学配色

8. 平衡法则

色彩平衡法则在色彩搭配中是比较重要的法则。我们都有渴望稳定、平衡的视觉心理需求,我们一直生活在一个以平衡为美的时代。在一个色彩设计中设置一对或多对平衡色,可以使得心理需求得到满足,而作品本身也容易达到稳定、和谐的色彩关系。

万字干货!6大章节帮你从零开始系统学配色

我们先思考一个问题,为什么要做配色,做配色搭配的原因主要是让色彩搭配能和谐,平衡,舒适,这些都是我们直观的感受,这也是我们做色彩搭配的目的。举个简单的例子,当我们身体比较冷的时候,我们这个时候喝一杯热牛奶,身体会感觉比较舒服,这个就是平衡。

万字干货!6大章节帮你从零开始系统学配色

平衡法则一个有 6 个法则:

  1. 色相平衡
  2. 冷暖色平衡
  3. 深浅色平衡
  4. 彩度平衡
  5. 底色与纯色平衡
  6. 面积大小平衡

① 色相平衡

通过色相环上的色彩组合来平衡画面,通过前面介绍过的色彩组合来合理搭配版面,例如常见的互补色平衡就是一种。互补色平衡比较合适协调视觉刺激上的平衡。适合夸张、宣泄、强烈的情感表达。

万字干货!6大章节帮你从零开始系统学配色

② 冷暖色平衡

冷暖平衡通过色相环上的冷暖属性进行画面平衡,色彩冷暖平衡是比较通用的设计法则,我们无意或者有意中都会使用到,所以冷暖平衡可以大胆运用,运用得当,色彩设计作品能够非常出彩。

在使用冷暖平衡我们要注意以下几点:首先要根据产品调性去搭配主色的基调,辅助色基调则相反的例如主色为暖色,则辅助色应选择冷色,这样色彩设计的画面才能平衡。

万字干货!6大章节帮你从零开始系统学配色

③ 深浅色平衡

深浅色平衡实际上指的是利用颜色深浅对比来平衡画面。如果设计版面都是深色容易显得沉闷,如果都是浅色,容易感觉没有重点。

万字干货!6大章节帮你从零开始系统学配色

④ 彩度平衡

在设计中,黑白灰为无彩色,彩度平衡指的是通过有彩色和无彩色达到平衡,一般指设计版面中无彩色的画面出现彩色的情况,用无彩色将有彩色衬托,才使画面有了重心。

万字干货!6大章节帮你从零开始系统学配色

⑤ 底色与纯色平衡

底色可以简单理解为图像或者底色的纹理、或多种颜色组成的组合。底色和纯色的搭配,既能展现单色的魅力,也能突出花色的节奏。

万字干货!6大章节帮你从零开始系统学配色

⑥ 面积平衡

版面中的面积大小都会有自己独特的韵律,这样才会使得色彩设计有层次、节奏和画面感。如果所有的颜色都一样,则画面会显得平凡,没有主次之分。例如,主标题文字与辅助信息的大小字体对比,字体粗细的面积对比,他们之间的面积都是有差距的。

万字干货!6大章节帮你从零开始系统学配色

9. 聚焦法则

色彩聚焦,是通过色彩引导将用户的视线引导到自己想要看到的画面。我们在看到一件设计作品的时候,首先引起注意是色彩,所有设计师需要通过设计手法去引导用户的注意力,从而达到设计要传达的信息,这便是通过聚焦法则去传递设计信息。

万字干货!6大章节帮你从零开始系统学配色

① 色彩对比聚焦

一般是通过色彩的对比,产生聚焦区域,通常是色相差异最大,反差效果最好,容易形成聚焦。

万字干货!6大章节帮你从零开始系统学配色

② 色块聚焦

一般通过色彩层级区分聚焦区域,也就是通过色彩来划分区域,色块聚焦是具备秩序感的,按照一定的顺序来看完画面。

万字干货!6大章节帮你从零开始系统学配色

六、同频法则

同频法则指我们将色彩看成一个统一的形式去组合,让画面看起来更和谐,提升画面细节度,增加层次感。

1. 色相相同

色相不变,改变颜色的深浅来增加画面的层次。

万字干货!6大章节帮你从零开始系统学配色

① 色彩倾向相同

多组色彩同时出现,色相倾向相同使颜色群组气质统一,画面平衡。

万字干货!6大章节帮你从零开始系统学配色

② 群组相同

通过色彩组合(多个不同的颜色)或形状相同,形成同频色彩群组,一般多用于设计规范或者 VI 形象设计中。

万字干货!6大章节帮你从零开始系统学配色

③ 同频呼应

使用与主题一致的同频色,能够融合画面,例如某商品的背景使用和商品差不多的颜色。

万字干货!6大章节帮你从零开始系统学配色

本文介绍的色彩基础就到此为止啦,大家慢慢消化哦,有问题可以在评论里讨论~

收藏 50
点赞 39

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。