![配色速查1分钟秘笈:冷暖配色](https://wfqqreader-1252317822.image.myqcloud.com/cover/995/655995/b_655995.jpg)
1.2 色彩的配色原则
通过之前的介绍,相信大家对于色彩已经有了初步了解。下面就结合色彩的基本属性,并加以灵活运用,从而掌握一些基本的配色原则与技巧。
1.2.1 配色中的4个角色
在设计作品中,不同的色彩在画面中扮演着不同的角色,其中包含主角色、配角色、支配色及强调色4种。
1.主角色
在配色中,主角色往往作为主体元素的配色,一般在画面中较为鲜明,除背景色之外,相较于其他色彩,其所占面积较大。
如左图所示的平面广告中,红色的西红柿在整个画面中十分显眼,成为了焦点,从而让作品的设计主题更加明确。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0016_0001.jpg?sign=1739268460-KuTZf9milr4lnMFBx47z5E0PqzdflAQV-0-3858f404ac7782528bd500ae8e1ad51a)
明确的主角色
2.配角色
配角色又称次色,从字面上就可以理解,其取意为次要的色彩。配角色的色性一般较为平淡、稳定,否则会夺取主角色的光彩,不仅起不到陪衬作用,反而会喧宾夺主。
在左图的第一幅作品中,低明度的棕褐色单车剪影形成了一种暗纹的视觉效果,在保持自身视觉清晰的情况下,又不过于张扬,起到了很好的衬托作用。同样在左图的第二幅作品中,象牙色的球拍柄也是作为配角存在的。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0016_0002.jpg?sign=1739268460-bn7HAqIOOQX7nKVaQf9cHhHDf8hsTPTg-0-2e6520ede0dedc734ad6941a3b55f21b)
衬托的配角色1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0016_0003.jpg?sign=1739268460-r7CIQRBSI3gsNID0WA4vTbCgRKxldi6w-0-d1f2910c20b820a692698e9c3ea2d558)
衬托的配角色2
3.支配色
在一些色性激烈的画面中,支配色是必不可少的,它能对画面起到一种调和与缓冲作用,削弱画面带给观赏者的视觉刺激。通常情况下,支配色往往作为媒介处于激烈的色彩环境中,并且与画面中各色彩都有着一定的联系。
如左图所示,画面中的橙色与紫色,其色相差异较大,而紫红色则作为过渡色在两种色彩间调和,从而让画面不会显得过于突兀,完美地诠释了支配色这一角色。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1739268460-VXpDEhCPIde7ubOKmbH43SVW9Ny9Kh3u-0-808cc9c27e7ace07fd328c005be3ca71)
调和的支配色
4.强调色
从音乐的角度上来讲,强调色在整个配色区域中所扮演的角色就相当于乐曲中的重音,其用途在于让整个作品的主题更加明确,以凸显出强调作用,其所占面积往往极小。如下图(左)所示,女性模特眼角那一抹红晕,在画面中显得格外醒目,让观赏者的视线得以集中。
用强调色对版面中的文字内容加以凸显,也是强调色的重要用途之一,如下图(右)所示,版面左上角的黄色圆形色块上,黑色的文字与标志醒目而又突出,给人以深刻的印象。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0017_0002.jpg?sign=1739268460-uLD9GRQNUV9kxoTuwW3QSNZFjWBOBha7-0-54d956c73ebe2f88e9381ade0ee653d3)
醒目的强调色1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0017_0003.jpg?sign=1739268460-nkZyyAbq8D4lTK5emDqCBItJYfrlXqhN-0-96e2ca0b14189369297f6dff031ddecc)
醒目的强调色2
1.2.2 常见的配色方式
配色方式在塑造风格化的设计作品中占据重要地位,不同的色彩搭配能赋予作品不同的视觉魅力。下面将着重介绍最为常见的4种配色手法。
1.醒目
醒目的色彩搭配往往具备较高的纯度与明度,可以构成鲜明、跳跃的画面风格。从下图所示的醒目配色案例1中可以看出,高纯度、高明度的绿色与红色使画面显得异常明快,再加上红与绿本身就是对比色的关系,使得整个画面更加醒目。
无彩色与有彩色的搭配也是塑造醒目画面效果的重要手段。在醒目配色案例2中,在高明度的黄色背景之上,无彩色的图形尤为显眼,使得主题更加明确。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1739268460-z1IXvPzz2qRyXg0rFjZajZRdu3Tb33x8-0-bfc0fe4d50f1108bac67c7082415cd61)
醒目配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0018_0002.jpg?sign=1739268460-odzdFGQaFoHdCQgQsQTzSRiEOvhf3Y0D-0-a1597dd8c729ae48c0fca5f3411447ac)
醒目配色案例2
2.对比
对比配色是为了让画面产生视觉冲突,而对比配色的方式也有多种,例如色相对比、明度对比、软硬对比和冷暖对比等。如下图中的对比配色案例1中所示,将低明度的物象元素与文字放置于高明度的背景之上,这种视觉对比让主体得以凸显。
在对比配色案例2中,画面中的人物面部被等分为两个部分,并分别配以红、紫两种颜色,这种色相上的差异形成了一种视觉对比关系,给人以分明之感。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0018_0003.jpg?sign=1739268460-S6HsG4S6CqoAKdGglkRVfgcGyiNUIzLj-0-9023c27f03d55f1c5abfc73499f60a75)
对比配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0018_0004.jpg?sign=1739268460-LV8Gz1H91IueJBfTEisGBCIwEXcckESM-0-ad54b780b192d94e26087f7256b7a42a)
对比配色案例2
3.平衡
平衡是指一种视觉与心理上的平衡,以平衡作为配色的基点,从色彩的面积、明度等方面出发,能获取具有美感的画面效果。如下图(左)所示,画面中只出现了黑色与黄色两种色彩,虽然这两种色彩在明度上差异较大,但其在面积上基本均衡,形成了一种既平衡又富有对比的画面效果。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1739268460-Rh5frFkdi1XmYzuV7N6NXJWP745TkIOp-0-9d50a3284baff1565599ec7ad2e5ea41)
平衡配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0019_0002.jpg?sign=1739268460-8v1eRd738GQKTePwU1CxKk2vT5WiAffP-0-1a46f9ec18ed59785a7606843dfe1d31)
平衡配色案例2
当画面中出现多色配置时,平衡配色主要取决于设计者的心理把握能力。在平衡配色案例2中,字母“S”由多种色彩构成,各种色彩不断地穿插交汇,最终在面积与明度上达到相对平衡的视觉状态。
4.层次
为了获取富有层次感的画面效果,层层叠加的色彩搭配方式能快速达到这一目的,这样的色彩结构能呈现出丰富的视觉效果,达到吸引观赏者的目的。如下图所示的两幅设计作品中,同样的多种色彩叠加处理手法,不难看出其皆出于同一系列的作品,在层次丰富的画面中,显露出张扬的个性风采。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0019_0003.jpg?sign=1739268460-j2WhpWiAkLn3HTqRDVwNER5D9a40wZ56-0-f5c40c2ce30a86d738d60b63b62adaa6)
层次配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0019_0004.jpg?sign=1739268460-R33A7fwjuGNVOf7HOpqEiWGwvkx4wUrZ-0-06449a1020574fbf6f56343b967d6d31)
层次配色案例2
1.2.3 以三属性为主的配色方式
所谓色彩的三属性,就是之前讲到的色相、明度和纯度,以这3种属性为主的配色方式,能表现出意想不到的画面效果。
1.色相配色
色相配色方式又可大致分为5种,同一色相配色就是其中之一。在色相环上,间隔15°左右的色彩即为同一色相色彩,这样的色彩搭配只有明度与纯度上的区分,能获取单纯的画面效果。
如左图所示的配色案例中,绿色系色彩主导了画面的整个色调,通过明度上的调节,画面在富有节奏的同时,显得极为纯粹。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1739268460-ckW5HXuENCzSBLuVhU0heQOBhwOzoa7u-0-46e9cedbac70cca342519e84815026fd)
同一色相配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1739268460-zyBW73lsZXFqQaoHyDZrBDyVNKajrxkC-0-bdb15e3bcfb5feee52d1fe824bf767bb)
同一色相色环示意图
通常,将在色相环上间隔30°左右的色相称为类似色相,这样的色相配色方式往往能带给人舒适、雅致、协调的感受。如左图所示的招贴设计中,画面主要由大面积的橙黄色与橙红色构成,类似的色相让整个画面看起来极为协调,给人以愉悦感。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0020_0003.jpg?sign=1739268460-FXagWndoCqYDzShQ2vJOZyVv2wXy3orm-0-12a18fb25b1660aabaf48207363cd4a5)
类似色相配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0020_0004.jpg?sign=1739268460-UFYDB8qSkQV2ANpXYBAAYQxpo5UJLI1N-0-1dea2aba1b202045695bb6b3e473306e)
类似色相色环示意图
色相配色的第三种方式为邻近色相配色,就是将处在色相环中间隔60°左右、且不大于90°的色彩放置在一起,因为其色相上的差异性,能起到活跃画面的作用。如下图所示,这是一则玩具广告,将黄色的积木玩具放置于绿色的背景之上,60°左右的色相差别呈现出分明的视觉效果,而且这种视觉冲突又不会显得格外激烈。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1739268460-dINbIFaYsOLbfxefP13V6VYhYUwVKBpT-0-764aba640cd80189ad5b461261c11d90)
邻近色相配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1739268460-mpyEwBgFuMMbWFfnDfvCwVTrKhdFQfsm-0-20ec9cdc42d62c53625394d3e4756948)
邻近色相色环示意图
在色相环上间隔120°左右的色相,就是所谓的对比色相,将这类色彩放置在一起,能快速激活观赏者的视觉神经,给人以醒目的印象。如下图所示的配色作品,画面的整个背景以大面积的蓝色铺就,在版面的中央,橙色色块在画面中颇为跳跃,对比的色相让作品主次分明。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0021_0003.jpg?sign=1739268460-TO6lkYj0jky1Z1dcUTaQ3nOtr1lOUkTF-0-446fbaef7312115096f0284014c71fc6)
对比色相配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0021_0004.jpg?sign=1739268460-h1K0DuasIojB9LiadvQqcMfvKuXCSN6h-0-d5f2d8522f9d8918f46766aa0dfb996c)
对比色相色环示意图
互补色相配色是色相配色中风格最为鲜明的一种,通常将在色环上间隔180°左右的对立色相,称为互补色相。如下图所示的招贴设计中,互为互补色的红色背景与绿色元素,塑造出了激烈的画面冲突,给观赏者的视觉以相当强的冲击,造就了一种充满紧张感的画面氛围。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1739268460-Bhu4vidwTnigo7BYxtaWaFQAYkp46rGj-0-a6cb5c23823878c60e24907617d41706)
互补色相配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1739268460-BGKvEtwLRpTqSEMf7h5eraePJtDuJ5Az-0-dc5e389660c49eb714ff045399adf2d5)
互补色相色环示意图
2.明度配色
利用色彩在明度上的差异性,能带来不同个性的画面效果,通常明度差异越大,视觉效果越激烈。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0022_0003.jpg?sign=1739268460-xCAryVvZfEKmbtCRz5BrjC6IYwFZxxPE-0-5047105b4bb33f4bd39fe2e3d135390b)
同一明度配色案例
所谓同一明度配色,即是指画面中的各种色彩在明度上基本保持一致。由于画面缺乏明暗变化,因此该种配色方式更适用于平面化的视觉塑造。
在使用同一明度的配色方式时,为了避免出现呆板的画面效果,可以从色相等方面做出区分。如左图所示,画面仅由红、黄两种颜色构成,并且这两种色彩的明度相当,给人以极为平面化的感受,但由于这两种色彩处于邻近关系,又让画面显得极为跳跃。
通常会将色彩明度分为10个阶段,在明度阶段图上相差3格左右的色彩组合(如下图中的明度阶段示意图所示),就是类似明度配色。如下图所示的招贴设计中,绿色与蓝色明度基本一致,而下方的黄色区域就相对较高,微微的明度波动,赋予了画面朦胧、平和的视觉特征。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1739268460-WKUGeA5HP6Ql4rOQOvD0bjuiEERKKO0e-0-b58958fb7232b0cb7ec4b9fbc51737db)
类似明度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0023_0002.jpg?sign=1739268460-7nxxSFq4qJjV9lrbW2qK0AtSJALBGNVa-0-d165e9571317aaeaa0dee834be12520d)
类似明度阶段示意图
在明度阶段示意图中,相差5格左右的色彩组合就是所谓的中差明度配色,采用该类色彩搭配的设计作品,能让画面富有起伏变化与空间感。在下图所示的配色案例中,从前方的巧克力蛋糕到最上方的天空背景,色彩明度以循序渐进的方式变化着,形成了一种中差明度的配色关系,让画面空间具有一定的景深感。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0023_0003.jpg?sign=1739268460-7xJgJRzif2MLlp6nx0IUvM88jxNcp4VQ-0-41dc216ad3d96b8e9a95432099e46dd7)
中差明度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0023_0004.jpg?sign=1739268460-7zTsjOGYxvkUhM1cGJb9dXm9G4tcCO2K-0-01c086bdb7e29ec50eee63a3afeac597)
中差明度阶段示意图
所谓对比明度,是指相差5格以上的色彩明度关系(如下图中的明度阶段示意图所示),运用对比明度来搭配色彩,能最大限度地烘托主题,给人以明确的视觉印象。如下图所示的海报中,立体化的字母“O”被配以了高明度的黄色,在昏暗的色彩环境中显得越发醒目,从而达到了凸显主题的设计目的。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1739268460-BKaey6HKUepR1e9r3V2rr5tSyTvi8Omx-0-3e790c572667c1cde9684cfc53bac6d5)
对比明度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0024_0002.jpg?sign=1739268460-dJZdsNpVjGw0SE02AQoOUWG2eGq4fyte-0-ebce1f3ea6b96d6d227de222db3f0d6c)
对比明度阶段示意图
3.纯度配色
利用不同层级的纯度配色,能呈现出截然不同的画面风貌。从下图所示的纯度阶段示意图中可以看出,6~8阶段的色彩纯度就是低纯度色彩。低纯度色彩搭配是塑造朴实、平和画面的重要手段。如下图所示的招贴设计,画面的整个色调以低纯度的棕系色彩为主,营造出一种复古的画面风貌,在平和的画面中,显露出淡淡的格调感。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0024_0003.jpg?sign=1739268460-weh7j0cLzaaABBCugeUvoBbrBQfFblMX-0-62de6e06f67f13058b047091f3d6341e)
低纯度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0024_0004.jpg?sign=1739268460-yeGOxm7BMxeXjKYGVV5uJeobgmdhGTrB-0-daa4fae76b2f5ba87975d56080e5c84f)
低纯度阶段示意图
处于纯度阶段示意图中的3~5阶段的色彩纯度(如下图中的中纯度阶段示意图所示),就是中纯度色彩。中纯度色彩从其色性上来看,欢快却不激烈,能给人以较为舒适的视觉感受。如下图所示的配色案例中,画面中的元素主要由中纯度的玫瑰粉与天蓝色组成,再配以低纯度的背景,渲染出活跃却不张扬的的画面氛围,整个画面配色恰到好处。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1739268460-ovMcuQpZ3pYhpW6HxbPPg0MLIXv7hUpX-0-25c34903ab6d7602cc4386fd951af313)
中纯度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0025_0002.jpg?sign=1739268460-iXyFVPshsV14PRuzYoGaoCes2AKJi8zu-0-18e0f046c3c0a974cd73e0fe202f8749)
中纯度阶段示意图
在纯度阶段示意图中,处于1、2阶段的色彩就是高纯度色彩,这类色彩色性鲜明,色感跳跃,有利于打造个性化的设计作品。如下图所示的招贴设计中,画中人物的剪影由高纯度的三原色组成,彰显出独特的作品魅力,而画面中那些纤细的橙色线条,则起到视觉缓冲作用。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0025_0003.jpg?sign=1739268460-aw67Ih2WuHeG4X6NJO95YcLlJzYGZfIB-0-cb1f4ef3a1080eabef3490c2ae2e2b7e)
高纯度配色案例
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0025_0004.jpg?sign=1739268460-jX5QNTKKLeApcCIL2cIVYD7klPxcJJeA-0-59e494e2d82ee67c13e60435c49e4867)
高纯度阶段示意图
1.3 色彩的冷暖感应
色彩的冷暖感应是色彩的核心内容,只要色彩处于有彩色的范畴,皆可对其进行冷暖色系的划分。
1.3.1 什么是冷暖色调
在色彩心理学中,色彩冷暖是指色彩带给观赏者的心理感受,从视觉层面上来讲,冷暖色调的划分是相对而言的。
1.冷色调
按色系划分,常见的冷色调有蓝色系、绿色系,以及部分偏蓝的紫色系,这一类型的冷调色彩会带给人们一种寒冷的心理暗示。下图所示为部分冷调色彩。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1739268460-wUFmk9fAj2JwQtwwVoSPePUYlE6b1ltc-0-c686d9cf36d7c35fa26ca29e3cfddb09)
冷调色彩
2.暖色调
与冷色调相反,暖色调能给人以温暖的心理暗示,因此暖调色彩是塑造温馨色彩环境的必备色彩。常见的暖调色彩有红色系、橙色系、黄色系、棕色系及紫红色系等。下图中列举出了常见的部分暖调色彩。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1739268460-NTdn3QeG7lhyOcjwDcjyKN3u1hr3isiO-0-65091fbfb98af28283433d6e796b1efb)
暖调色彩
1.3.2 冷暖色调的意象区分
当色彩进入了观赏者的视觉范围后,能让人们的大脑产生无限联想和一系列的心理连锁反应,从而导致了冷暖色调有着截然相反的意象区分。暖色调会带给观赏者以亲密、兴奋、快乐、活跃和香甜等心理感受。如下图所示的两种配色案例中,皆是以水果作为设计主体,在左边一张红色调的作品中,散发出了浓郁的香甜氛围,而右边一张则是以高明度的橙色为主,能带给观赏者兴奋、积极的视觉印象。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1739268460-75oBaVfB4rwofgkdg8rCbXI8KBJwlcXD-0-eace0e712d34eb56c5630c07da5b0331)
暖色调配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1739268460-gHo4cTFIJJQv6fDLDJjyD3TgGYRqX2mH-0-abccb56eec8c650654496532d9965527)
暖色调配色案例2
在冷暖色调的意象区分当中,冷调色彩会给人们以冷静、清爽、疏远和收缩等心理暗示。如下图(左)所示的创意海报中,大面积的高明度蓝色的使用,让整个画面显得越发清爽、纯粹,与作品立意极为相符。
冷调配色也是打造静谧画面氛围的重要途径,这一点可以从冷色调配色案例2中体现出,不同明度的绿色主导了画面的整个色彩倾向,从而赋予了作品幽静的情感色彩。
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0027_0003.jpg?sign=1739268460-0M5Svxghl1XwUC9FFCoeyvUNtJXoOznK-0-32d710d96c23e43c36d7b53cbb86a5bb)
冷色调配色案例1
![](https://epubservercos.yuewen.com/12664A/3590312204953601/epubprivate/OEBPS/Images/figure_0027_0004.jpg?sign=1739268460-Ooq2C6sFZb2Y5JJcqrmqmrR4N0oGGzKo-0-0fbe865a498f439a67b0aed9eb96fc20)
冷色调配色案例2