第3章 色彩搭配在网站中的应用
色彩本身具有非常微妙的表现力，它们可以产生出一种刺激人们大脑中对某种形式存在的物体的共鸣，展现出对待生活的新的看法与态度。合理使用色彩扩大了设计者创作的想像空间，赋予了创作新的不定性。
3.1 网页配色
网页的色彩搭配往往是令初学者感到头疼的问题，尤其是那些完全没有美术基础的人。对于一个商业网站而言，到底用什么样的色彩进行搭配，才能既好看又合理呢？本节将从最基础的知识开始，帮助读者掌握色彩的使用。
3.1.1 色彩的基本知识
1．从色谱开始
一条连续彩虹中的“可视光”分解成从蓝到红的色谱，如图3-1所示。
图3-1 色谱
在色谱中，线性罗列了所有的基本颜色，也是所有颜色的根本。
2．色环
在从红到紫的光谱中，等间的选择两种或两种以上的颜色，相邻的两个色相互混合又得到另一种特殊的颜色。如此周而复始，从而构成一个首尾相交的环，被称为孟赛尔色相环，即色环。从本质上讲，色环就是色谱可以看到的颜色所形成的线性连续环。如图3-2所示就是一个色环。
图3-2 色环
3．三原色的概念
如同大家所知道的，三原色是能够按照一些数量规定合成其他任何一种颜色的基色。
所有的颜色其实都是由三原色按照不同的比例混合而来。色彩的三原色为红、黄、蓝，而色光的三原色为红、绿、蓝。
下面将介绍几个关于色彩的重要概念。
z 色相：指颜色的属性，是红色、绿色还是蓝色。如图3-3所示，分别为同一张图
片的三种色相。
图3-3 同一张图片不同色相
z 纯度：也称作饱和度，是指在同等明度的条件下，颜色从灰色到纯色的变化。如
图3-4所示为同一张图片，饱和度分别为-100、0、+100时的状态。
图3-4 同一张图片不同纯度
z 明度：从黑到白中间增加9个均匀过渡的灰度阶段，被称为明度，也叫明度尺。
如图3-5所示为同一张图片明度分别为-50、0、+50时的状态。
36
第3章 色彩搭配在网站中的应用
图3-5 同一张图片不同明度
3.1.2 常见的配色方案
1．近似色
近似色是已给出的颜色之外的任何一种颜色。如果从橙色开始，它的两种近似色应该选择红和黄。如图3-6所示，为近似色在色环上的位置。
用近似色的颜色主题可以实现色彩的融洽与融合。如图3-7所示，列出了几种近似色的搭配方案。
图3-6 近似色 图3-7 使用了近似色的配色方案
如图3-8所示，为使用了近似色搭配方式的商业网站。蓝色系的搭配，给人以清凉、专业的感觉。
图3-8 使用了近似色的商业网站
37
2．补充色
补充色也叫对比色，是指在色环中的直接位置相对的颜色，如图3-9所示。
如果想要使网站中的色彩强烈突出、富有冲击力的话，可选择对比色。
假如正在组合一幅柳丁的图片，用蓝色背景将使柳丁更加突出。如图3-10所示。
图3-9 补充色图3-10 蓝色背景下的柳丁
如图3-11所示，为使用了补充色的网站。大块的橙色和蓝色用到一起，具有强烈的冲击力，达到了视觉上的震撼效果。
图3-11 使用了补充色的网页
3．分离补色
分离补色可以由2~3种颜色组成。在色环上选择一种颜色，它的补色就在色环的另一面。可以使用补色旁边的一种或多种颜色。这样的一组颜色叫做分离补色，如图3-12所示。
分离补色的搭配可以起到类似补充色的强烈对比作用，但有近似色的缓冲，可以使页面效果更加柔和。如图3-13所示，为使用了分离补色搭配方式的网站。这个网站给人的感觉是色彩鲜明，但是又不会过于突出。
38
第3章色彩搭配在网站中的应用
图3-12 分离补色图3-13 使用了分离补色的网站
4．组色
组色是色环上距离相等的任意3种颜色。如图3-14所示为色环上的一组组色。
图3-14 色环上的一组组色
因为3种颜色形成了对比关系，所以组色被用作一个色彩主题时，会对浏览者造成紧
张的情绪。一般在商业网站中，不采用组色的搭配。
3.1.3 配色的选择
配色是浏览者访问主页时目光无法回避的设计要素。当浏览者看到网站标题的一瞬间，
已经决定了配色的效果不可轻视。在不经意间，浏览者对网站的印象就被固定下来，就好
比初次拜访别人家，和主人谈话之前，看到客厅的装饰风格，便可以大致推测出主人的性格。
因此，根据网站的整体风格来选定网站的配色十分重要。当网站的内容、标题和配色
一致时，就能发挥最大的效用。欢快的内容与明快的配色相叠加，可以传递出发自内心的
喜悦。相反，和网站内容不相配的颜色，会引起混乱、产生破坏性的效果。
如图3-15所示，为Dior国际网站的香水产品宣传页，左图使用了金色作为网页的主
色调，显得高贵、典雅，烘托出了产品的高格调和高品味。右图使用了蓝色的色调，虽然
也显示出了页面的和谐，但无法表现出产品的内涵，因此让人感觉有些离题，冲淡了网页
的主题。
39
图3-15 根据网站内容确定配色
本节将通过介绍几种颜色搭配方案的效果，帮助用户掌握利用颜色定位网站的技巧。
1．色调的选择
色调包括鲜艳的色调、柔和的色调、亮色调、暗色调等等，是配色的各项因素中最有决定权的一种。例如如图3-16所示，是鲜艳的色调。
图3-16 鲜艳的色调
如果网站采用的配色是在这种色调的范围内，那么无论在色相和对比量上下多少功夫，都无法表现出稳重的印象。因此选择合适的色调非常重要。
2．色调的分析
（1）鲜艳的色调
所谓鲜艳的色调，即不与黑、白、灰进行混合的，只有纯色的色调。这种色调的选用会给人以强有力的、生机勃勃的年轻人的感觉。如图3-17所示便是一个使用了鲜艳色调的网站。大片的黄色进行搭配，给人热情洋溢的感觉。打开网页，欢快的气息扑面而来。
（2）深色调
将鲜艳的色调稍微加一点黑色，便成为了深色调。深色调传达了有力、强烈的男性形象。如图3-18所示，便是一个使用了深色调的网站。用了红色的搭配，但是由于红色中混
合了黑色，便给人以更加沉稳的感觉。
图3-17 使用了鲜艳色调的网站图3-18 使用了深色调的网站
40
第3章 色彩搭配在网站中的应用
（3）亮色调
将鲜艳的色调稍微加一点白色，便成了亮色调。与鲜艳色调相比，亮色调略显得温柔一点，是大多数人的喜爱。如图3-19所示，便是一个使用了亮色调的网站。
（4）淡色调
将亮色调再加一点白色，便成了淡色调。淡淡的颜色，可以给人清新的感觉，令人联想起婴儿的肌肤，给人以最温柔的感觉，远离商业的形象。不少个人网站采用的就是淡色调，如图3-20所示，便是一个使用了淡色调的网站。淡淡的蓝色，给人以清新的感觉，搭配网站简单的布局，营造了一个轻松的氛围。
图3-19 使用了亮色调的网站 图3-20 使用了淡色调的网站
（5）浑浊色调
将淡色调稍微加一点灰，便成了浑浊色调，产生了明亮但不会过于鲜艳的感觉，塑造了稳定的都市形象。如图3-21所示，便是一个使用了浑浊色调的网站。
同样是使用了蓝色，但是由于给淡色调中混合了灰色，给人以更加稳定的观感。 （6）中间色调
给亮色调加一点黑，就构成了中间色调，可以给人最沉稳的成人印象。如图3-22所示，便是一个使用了中间色调的网站。
图3-21 使用了浑浊色调的网站 图3-22 使用了中间色调的网站
这是一个典型的商业网站，亮色调的蓝色混合黑色的使用，塑造了沉稳的公司形象。
41
（7）暗色调
将亮色调稍微加一点灰色，就构成了暗色调。暗色调给人的感觉不仅仅是鲜艳色调、亮色调和淡色调的那种单纯而明快的气氛，更表达了一种沉稳而安静的、素雅的气氛。如图3-23所示，为使用了暗色调的网站。
图3-23 使用了暗色调的网站
这个网站也是使用蓝色作为主色相，但暗色调的使用使得整个网站给人安宁的感觉。
3．色相的选择
在前面介绍色彩的基本知识时，已经介绍了色相的概念。用红、绿、蓝这样的名称来区别颜色，其实这种区别就是色相的区别。根据不同颜色在色环上的位置关系，便可以进行配色的变化。
通常在制作商业网站的时候，选用色彩都希望传达一种稳重、安定的印象。在这种情况下，多数采用的就是同系色或同类色。如图3-24所示为色环上的同类色。
如图3-25所示为使用了同类色配色的网站。
图3-24 色环上的同类色图3-25 使用了同类色的网站
虽然整个网站使用的都是冷色调，但由于控制住了颜色的混合及明度对比，所以并没有给人过于冷淡的感觉。
当使用一种单色，然后增加或降低亮度时，产生的不同颜色就是同系色。如图3-26所示为同系色。
42
第3章 色彩搭配在网站中的应用
图3-26 同系色
如图3-27所示，为使用了同系色的网站。
图3-27 使用了同系色的网站
绿色虽然象征着快乐与希望，但由于整个网站采用了同系色，因此在快乐中也传达出沉稳的印象。
4．不同色相的分析
不同的色相，会向用户传达不同的信息。因此色相的选择对于表达公司的形象也有至关重要的作用。色相按照色系分，可分为暖色和冷色。下面将分别介绍这两种色系的不同效果。
（1）暖色
暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。如图3-28所示，为色环上的暖色系。
如果公司希望展现给客户的是一种温暖、温馨的形象，那么可以考虑选择暖色制作公司的网站。如图3-29所示，便是一个使用了暖色的网站。
图3-28 暖色系 图3-29 使用了暖色的网站
43
这是一家以各式沙发、座椅为主要经营内容的公司。因此公司在制作自己网站的时候，选择了温馨的暖色，客户浏览网站的时候感到了一种深切的温暖，给人一种家的感觉。这样的颜色搭配，是一种以人为本的搭配方式。
（2）冷色
冷色来自于蓝色色调。比如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用，因此用它们作页面的背景比较好。如图3-30所示为色环上的冷色。
如果公司希望给客户一种沉稳、专业的印象，那么可以选择使用冷色系作为网站的主要颜色。如图3-31所示，为使用了冷色的网站。
图3-30 色环上的冷色图3-31 使用了冷色的网站
这是一家航空公司的网站。蓝色和偏向绿色的颜色搭配，传递了一种非常镇定、专业的感觉。
3.1.4 色彩的4种功能角色
在小说和戏剧中，角色分为主角和配角。同样的道理，在配色中，不同的颜色也担当
着不同的角色。配色分为主色、配角色、支配色、融合色、强调色，概括起来可称之为5种色彩的功能角色。本书中将详细介绍除了配角色之外的4种功能角色。
1．主色
在戏剧中，主角是整个剧集的主线；在舞台上，主角站在聚光灯下，配角们退后一步来衬托他。配色上的主角也是一样，其配色要比其他配角明显、清楚、强烈，使得浏览者一看就知道哪是主角，从而使视线固定下来，达到传达中心思想的作用。如图3-32所示，本应作为页面主角的男人埋没于网站的背景色中，使得页面中心模糊，给浏览者找不到主题的感觉。
将主角从背景色中分离出来，达到突出而鲜明的效果，从而很好的表达主题，如图3-33所示。
44
第3章 色彩搭配在网站中的应用
图3-32 主色模糊的网页 图3-33 将主角从背景色中分离
如图3-34所示，该网站的主色较弱，无法起到强化主题，稳定中心的作用。 如图3-35所示，增大主色与配角色的差异程度，达到突出主色的作用。
图3-34 主色较弱 图3-35 主色突出
如图3-36所示，网站其他颜色都比较柔和，因此即使主色并不十分强烈，也能起到突出的效果。
如图3-37所示，网站的标题鲜明而效果强烈，在它的影响下，整个网站都给人一种清醒、活泼的印象。
图3-36 猫儿时空站点 图3-37 网站标题鲜明
2．支配色
支配色，亦称之为背景色。舞台的中心是主角，但是决定整体印象的却是背景。同样的道理，在决定网页配色的时候，如果背景色十分素雅，那么整体也会变得素雅；背景色如果明亮，那么整体也会给人明亮的印象。
如图3-38所示，网站采用肃穆的灰色背景，因此即使用上了鲜明的红色，整个网站依然给人感觉十分庄重。
45
如图3-39所示，虽然整个页面颜色比较多，但是由于采用了深灰色的背景色，依然给人以融合与和谐的感觉。
图3-38 西安泽钰电器有限公司网站图3-39 深灰色背景起到了缓冲的作用
如图3-40所示，虽然页面主要元素的色调偏灰，但由于采用了绿色作为背景色，整个页面依然给人生机勃勃的感觉。
图3-40 绿色背景决定页面极富生机的印象
当使用花纹、文字或具体图案作为网页背景时，效果类似使用边框和背景色。
色彩运用合理也能够表现出稳重的格调。运用细花纹可表现出安静和沉稳的效
果，运用对比强烈的色调则会产生传统和信心十足的感觉。使用图案作为背景，
对希望表现出趣味性、高格调的网站比较合适，但对于商业网站来讲便不太匹
配了，因为图案背景会冲淡商业性的印象。
3．融合色
融合色即是能够融在一起的颜色。例如在画面的不同部位涂上相同的颜色，通过颜色的反复效果使同样的颜色产生共鸣，从而让画面更有立体感。中间对着左边，上边对着下边，这样把分开的部分涂上共同的颜色，像回音一样相互呼应，画面的整体就融合在了一起。
如图3-41所示，上面和下面的绿色相呼应，使页面整体感更强。
如图3-42所示，橙色的元素分布于整个页面，无形中起到了融合整体的作用。
46
第3章 色彩搭配在网站中的应用
图3-41 上下呼应 图3-42 环绕呼应
如图3-43所示，鲜绿色的元素是整个页面的亮点，并分布于页面左边和上边，作为主体的照片和网页布局颜色相互呼应、浑然一体。
图3-43 左边与上边呼应
当整个页面采用融合色的原理选取配色时，融合色在画面上距离越远，产生共鸣的效果就越强。靠得太紧，反而变成一块，无法产生呼应的效果。如果页面希望呈现出较有动感的效果，要尽量使用使人印象深刻的融合色。融合色越鲜艳，越能表现出活跃的动感。
4．强调色
如果在选用页面配色的时候，画面的整体采用了压抑的颜色，然后在一小块面积上使用强烈的颜色，就能够起到着重强调的作用，这就是强调色的作用。整体色调越压抑，强调色越有效果。因为有了重点，画面整体也产生了轻快的动感，一个栩栩如生的页面就这样产生了。
如图3-44所示，页面上使用的小块橙色元素是整个页面的亮点，使页面产生了轻快的动感。
如果将页面中的橙色去掉，这个页面就显得单调，动感也消失了，如图3-45所示。
47
图3-44 强调色的效果图3-45 去掉强调色便失去了重点
强调色使用的面积越小、颜色越鲜艳，着重的效果越强。因为面积小，所以无
论使用多强烈的颜色，画面依然能够保持清爽的风格；同样，因为强调色面积
小，整体印象也不会受到影响。
5．综合运用
接下来的工作，便是考虑如何兼顾色彩的各种角色了。如图3-46所示，页面中的红色不但起到了强调的作用，而且散布于页面的不同部位，同时还起到了融合色的作用。
图3-46 页面中红色的两种效果
在这个页面中，使用了强调色的同时也兼顾到了页面的整体性，保持了页面的稳定。
而且主色突出，支配色较宁静，很好地中和了红色的热闹效果，使得整个页面鲜艳而不失雅致。
3.2 如何使用色彩给网站定位
每个人都有自己喜欢的颜色，因此在选用网站配色的时候，难免会受到个人偏好的影响。但是在选用色彩的时候也要注意，因为不同的颜色给人的感觉是不同的。本节将通过对各种颜色的分析，帮助读者掌握使用色彩定位网站的技巧。
48
第3章 色彩搭配在网站中的应用
1．红色
红色给人以热情、活力的感觉。在很多使用了红色的网站中，红色所担任的角色都是强调色，因为红色比较鲜明，极易吸引人们的眼球。
如图3-47所示，是使用了鲜红色作为主色调的网页。鲜艳的色彩，给人个性鲜明、富有活力的感觉。
如图3-48所示，该网页也使用了红色，但是红色的色调较暗，反而给人冷静沉重的感觉，凝造出了古典的氛围。
图3-47 使用了鲜红色主色调的网站 图3-48 使用了暗红色主色调的网站
2．橙色
一般情况下，橙色总是给人时尚、轻快的感觉，常常用于某些时尚新潮的网站中，例如时装网站、化妆品、电子制品等。其实在商业网站的制作中，橙色也是常用的。通过色调的变换，橙色既能表现出青春的活力，也能够表现出沉稳老练的效果。
如图3-49所示，为使用了橙色的网页。
图3-49 使用了橙色的网页
该页面使用橙色与蓝色搭配，非常具有视觉冲击力，同时使用灰色的背景色，可以缓冲两种颜色的矛盾，使页面又显得更加成熟而沉稳。这种颜色的搭配方式非常时尚，给浏览者都市化的印象。
如图3-50所示的网站，使用了不同色调的橙色作为网站的主色，搭配灰色的背景，显得既鲜丽又沉稳。
49
图3-50 使用了橙色作为主色的网站
3．黄色
黄色给人明亮的感觉，也是在站点配色中使用较多的一种颜色。因为黄色能够营造出愉快的氛围，能够得到大部分人的认可，因此小到儿童站点，大到商业网站，黄色几乎可以在每一个角落中找到自己的发挥空间。
如图3-51和图3-52所示是新浪和搜狐的中文站点首页，均使用了大面积的黄色。
图3-51 新浪中文站点首页图3-52 搜狐中文站点首页
如图3-53所示，该站点使用了黄色与咖啡色的搭配，显得非常中性、非常温和。
如图3-54所示，黄色与黑色、白色的搭配，给人非常明亮的感觉，却又不失宁静与沉
稳。
图3-53 黄色与咖啡色的搭配图3-54 黄色与黑色、白色的搭配
50
第3章 色彩搭配在网站中的应用
4．绿色
绿色因为是植物的颜色，总是能给人宁静、希望的感觉。绿色还可以表现出自然的感觉。浅绿、黄绿等绿色既有绿色的特点，又能表现出黄色的温暖，因此用在站点中常常能够得到青年人和儿童的喜爱。
如图3-55所示的页面使用了灰色作为主色调，中间用较亮的绿色点缀，这是整个页面的亮点，让网页显得更有活力，吸引目光的同时也表达了一种温暖的感情。
如图3-56所示的网页，使用了浅绿色与黑色搭配，显得沉稳的同时又不失活力。
图3-55 使用了浅绿色点缀 图3-56 使用了绿色与黑色搭配的页面
如图3-57所示，为枫叶东方的官方网站。使用了深绿色作为网站的主色调，作为一个以留学为主要内容的网站，传达了一种希望、宁静的感觉。
图3-57 使用了深绿色的网站
5．蓝色
蓝色作为页面的主色，会给人凉爽、清新、专业的感觉。因此蓝色多用于商业网站。 如图3-58所示，为一汽大众官方网站的首页。整个页面采用了浅蓝色作为主色，搭配深蓝色和其他小块颜色，整个页面显得清爽、专业，向客户传达了一种放心的感觉。
51
图3-58 一汽大众的官方网站
如图3-59所示的页面使用了深蓝色作为网页的主色调，深蓝色传达了一种凝重的气氛，显得更加规矩，表现了都市化、现代派的风格。
图3-59 使用了深蓝色的网页
6．其他颜色
除了以上几种商业网站中常见的颜色外，还有几种颜色，在网站中也比较常用。例如白色，给人洁白、纯真的感觉，多用于网站背景色。黑色给人一种深沉的感觉，比较安全，可与任何颜色搭配。灰色传达了一种中庸的氛围，比较收敛，较之红色、橙色等比较有视觉冲击力的颜色，灰色比较低调。
如图3-60所示的页面，使用了灰色与饱和度极低的暖色搭配，显得有一种温柔、透明的感觉。整个页面比较中庸，虽然没有向外突出的感觉，但是会令浏览者觉得非常舒服。
52
第3章 色彩搭配在网站中的应用
图3-60 使用了灰色与低饱和度暖色的搭配
如图3-61所示的页面，使用了白色的背景色、黑色的主色，灰色作为黑与白的中间色，令整个页面的对比趋于缓和。
图3-61 使用了黑白灰三色的网页
本章介绍了色彩搭配在网站中的应用，为了在设计中有效的使用色彩，必须掌握一些色彩的基础理论知识，结合自己的实际经验，来设计自己的作品。同一色彩有数之不尽的应用方法，并没有非常机械的色彩调和的法则，在一定的原则下要靠设计者的眼睛和审美观点来做出选择。
53