色相环配色原理

你作为一位设计师，如果你还在说出这种颜色好看，那种颜色不好看”的话时，这说明你对颜色还没

有正确了解。在不少关于色采文章中，都可以看到色相环的身影，它是我们选择颜色的

一个强有力的工具，如图3-23所示。在本节中，将阐述这个色相环的基本原理，使读者对颜色关系

有一个更清晰的认识。

图3-23色相环和色采图象

哪里有光，那里就有颜色。有时我们会认为颜色是独立的一一这是蓝色，那是红色，但事实上，颜色

不可能单独存在，它总是与此外的颜色产生联系，就象音乐的音符，没有某一种颜色是所谓的好”或

者坏”惟独当与其它颜色搭配作为一个整体时，我们才干说，是协调或者不协调。色相环告诉我们颜

色之间的相互的关系

=================3.3.1色相环的构成================

白色光包含了所有的可见颜色，我们看到是由紫到红之间的无穷光谱组成的可见光区域，就象你所看

到的彩虹颜色。为了在使用颜色时更加实用，人们对它进行了简化，将它们分为12种基本的色相，

如图3-24所示。

图3-24色相环的构成

色相环由12种基本的颜色组成。首先包含的是色采三原色(Primarycolor,,即红、黄、蓝。原色混合

产生了：次色(Secondarycolors),用二次色混合，产生了三次色(tertiarycolors)<.

原色是色相环中所有颜色的父母“。在色相环中，惟独这三种颜色不是由其它颜色混合而成。三原色

在色环中的位置是平均分布的，如图3-25所示。

图3-25三原色的分布

图3-26二次色的构成

二次色所处的位置是位于两和三原色一半的地方。每一种二次色都是由离它最近的两种原色等量混合

而成的颜色，如图3-26所示。

三次色是由相邻的两种二次色混合而成，如图3-27所示.

图3-27三次色的构成

================3.3.2色相环中的颜色特点==============

在色相环中的每一种颜色都拥有部份相邻的颜色，如此循环成一个色环。共同的颜色是颜色关

系的基本要点，必须对此有深入的了解。

如图3-28所示，在这七种颜色中，都共同拥有蓝色。离蓝色越近的颜色，如草绿色，包含的蓝色就

越少。绿色及紫色这两种二次色都含有蓝色。

图3-29包含黄色的色采

如图3-29所示，在这七种颜色中，都拥有黄色。同样的，离黄色越远的颜色，拥有的黄色就越少。

绿色及橙色这两种二次色都含有黄色。

如图3-30所示，在这图七种颜色中，都拥有红色。向两边散开时，红色就含得越少。橙色及紫色这

两种二次色都含有红色。

图3-31色相环的明暗变化

颜色有明暗之分，或者称为颜色数值。为了显示颜色的明暗，所以色相环有多个环。两个外围的大环

是暗色，里面两个小环是明色。

色相环有五个同心环组成，从暗到亮一一暗色处于大环，明色处于小环，而中间是颜色的基本色相，

如图3-31所示。

如图3-32所示，处于右边的暗色就是加之黑色，而左边的明色则是加之白色。五个圆环已经清楚表

示了颜色如何由暗到亮的过程，但这种明色及暗色的关系只是相对而言。

具体某种.

明色暗色

籁色加白色■色加II色

图3-32色采的明暗变化

3.3.3色采之间的关系

下面列出六种基本的色采关系。每一种色采关系都可以有无数种搭配的可能，当你掌握它们时，你对

颜色的视野才会显得开阔。

单色搭配

一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次，但形成为了

明暗的层次。这种搭配在设计中应用时，出来的效果永远不错，其重要性也可见•斑，如图3-33所示。

图3-33单色搭配

如图3-34所示，为三星女性手机E578和E428的网站

(hup:〃cn.samsungmobile.com/cn/event/e428/index.I僚II面截图,网站使用同类蓝色和青色的组合，给

人以更宽广，更开放的印象。

三星Anycall

踪页IE57B-E428我的公主梦皆雷依知手他学与|分亨美丽

PAitf4

公主之爱少女的折萌

E5/8

■:龙.病国曲

■111'•,区■乐■

图3-34三星女性手机E578和E428的网站网页截图

3.3.3.2类比色搭配

相邻的颜色我们称为类比色。类比色都拥有共同的颜色。这种颜色搭配产生「一种令人悦目、

低对照度的和谐美感。类比色非常丰富，在设计时应用这种搭配同样让你轻易产生不错的视觉

效果，如图3-35所示。

图3・35类比色搭配

如图3-36所示，为金戈铁马品牌推广有限公司的网站页面截图

(hup:〃cndgl.com/web/main.htn),整个页面使用了类比的红色和黄色进行搭配,给人大气、有力量的

印象。

图3-36金戈铁马品牌推广有限公司的网站页面截图

3.3.3.3#色搭配

在色相环上直线相对的两种颜色称为补色，在上图中，是橙色及蓝色。补色形成强列的对照效果，传达出活

力、能量、兴奋等意义。补色要达到最佳的效果，最好是其中一种面积比较小，另一种比较大。比如在一个

蓝色的区域里搭配橙色的小圆点，如图3-37所示。

企业^闻»>

文字信息文字信息文字信息文字艾手

信息艾亨信息女子信息文不文字信息

文字信息文字信息文字文字信息艾字

信息文字信息文字艾字信息艾字信息

■文字信息文字艾字信息艾字信息文

字信息文字文字信息艾字信息文字信

息文字文字信息艾字信肩曳字信息戋

字

如图3-38所示，为韩国麦当劳网站（http://mcdonalds.co.kr/bigmac/index,图，整个页面红色是主体,右

侧的绿色水杯与红色进行对照，使页而变得更加有■活力，栩栩如生。

图3-37补色搭配

图3-38韩国麦当劳网站网页截图

图3-40韩国百事可乐网站网页截图

3.3.3,将离补色搭配

如果我们同时用补色及类比色的方法来确定的颜色关系，就称为分离补色。这种颜色搭配既具有类比色的低

对照度的美感，又具有补色的力量感。形成为了一种既和谐又有重点的颜色关系。

如在上面三种颜色中，红色就显得更加突出，如图3-39所示。

图3-39分离补色搭配

如图3-40所示，为韩国百事可乐网站（pepsicola.co.0r网页截图，明艳的红色在其准对照色蓝色的映衬下，显

得更加醒目。这不同于对照色的锋利感，而是一种稳定的欢快的配色效果。红色与蓝色并非对照色，只是在色

相环上大致位于相反一侧的色相。

图3-40韩国百事可乐网站网页截图

3.3.3.5原色搭配

除了在一些儿童的产品中，三原色同时使用是比较少见的。但是，无论是在中国还是在美国的文化中，红黄

搭配都是非常受欢迎。红黄搭配应用的范围很广一一从快餐店到加油站，我们都可以看见这两种颜色同时在

一起。蓝红搭配也很常见，但惟独当两者的区域是分离时，才会显

得吸弓I人，如果是紧邻在一起，则会产生冲突感，如图3SI所示。

奴字信息衣字信息衣字信息文字

其于值具艾于值具艾矛值

文字信息文字信息文字信息交字

文字信息立字信息立字信息交字

文字信息立字信息立字信息交字

文字信息文字信息文字信息交字

文字信息立字信息立字信息交字

支字信息立字信息立字信息交字

不常用常用冲突分毒

图3-41原色搭配

如图3-42所示，为个人网站色爵2022(/homc.hlm)网页截图，整个网站用红色和黄色的原色

进行配色，给人以稳重的印象。即使使用了明艳的红色，也能保存平衡感。

图3-42色爵2022网页截图

3.3,3.6二次色搭配

二次色之间都拥有一种共同的颜色其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色

一一所以它们轻易能够形成协调的搭配。如果三种二次色同时使用，则显得很舒适、吸引，并具有

卞富的色调。它们同时具有的颜色深度及广度，这•点在其它颜色关系上很难找到，如图3-43所

企业脆

更手谚息.交亨fi焉■亨信禹丈斗

艾亍信曷N治曷.玄宁治曷.玄亨

女字信易支字信，忒艾字信，忒艾字

爻字宿息以亨信息基芋信息基字女

芋信网苴芋信蜀文手信蜀支学文字

信息■宁信息文字信息吏字宜珏^

基夷国卷夷H桶字信息留字信

息食亨信息变亨

图3-43二次色搭配

如图3-44所示，为韩国cinus娱乐网站网页截图（cinus.co.Or/网站使用了二次色搭配，给人时尚、活

力的印象。

dbwrcn

图3-45全色相

图3-44韩国cinus娱乐网站网页截图

3.3.3.7全色相搭配

从色相环上取出所有的色相，开放、热闹、像节日一样的配色就产生了，如图3-45所示。全色相给

人