第3章 网页的色彩搭配
色彩的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。本章主要介绍网页色彩的相关知识，涉及的知识点如下。
◆ 网页色彩基础知识：主要介绍色彩的基础知识，包括什么是色彩、色彩的特征及如何选择色彩。
◆ 网页配色标准：主要介绍网页色彩的配色设计和配色原则。
◆ 网站配色步骤：定义网站的基本色调及协调各栏目之间的色调。
3.1 网页色彩基础知识
每个人都生活在五光十色的色彩环境中，难以想象没有色彩的世界将是一个什么样子。用户除了享受到自然界的缤纷色彩之外，也正在运用各种色彩美化着生活。本节介绍与网页色彩相关的基础知识，包括什么是色彩和网页色彩，以及网页安全色。
3.1.1 认识色彩
色彩的形成离不开光的作用。当光照射到物体上面并且反射到人的眼睛时，就会产生色彩的概念。不同的物体由于其反射的程度不同，因此表现出不同的颜色。例如，一束白色的光穿过三棱镜时，会被分解成红、橙、黄、绿、蓝和紫等多种颜色，这也是人的眼睛能看到各种不同颜色的物体的原因。
为了便于表达以及使用色彩，人们创造出了“三原色”理论，用来表达日常生活中所见的色彩空间。自然界的任何颜色都可以由3种原色按照一定的比例混合而成。三原色分为叠加型和消减型两种。所谓叠加型的三原色一般是指红色、绿色和蓝色，例如电视机、显示器以及投影仪等发光设备就是使用叠加型的三原色来表达色彩的，网页设计中的RGB颜色模式也是建立在叠加型三原色的理论基础之上的。而消减型的三原色是指紫红色、黄和蓝绿这3种颜色，例如书本、杂志、花朵等反光或者说吸光的物体的色彩就可以使用消减型三原色来表达，绘画中的色彩也可以使用消减型三原色来表达。在叠加型三原色中，3种等量的原色叠加会产生白色；而在消减型三原色中， 3种等量的原色叠加会产生黑色（实际上是深灰色）。
3.1.2 色彩的特征
色彩的特征主要包括明度、色相和纯度等3个方面。其中明度表现了色彩的深浅，色相表现了色彩的种类，纯度表现了色彩的鲜艳程度。
人之所以能够看到物体的明暗，是因为不同的物体反射的光的量不同。反射的光越多，物体色彩的明度就越高；反之，反射的光越少，物体色彩的明度就越低。总的来说，色彩的明度取决于色彩中白色和黑色含量的比例。图3-1显示了无色彩的明度的变化，所谓无色彩，是指只有黑色和白色两种色彩的颜色。
图3-1 无色彩的明度变化
在设计网页时，应该注意前景色、背景色及网页各部分之间的色彩明度要相互协调。如果网页的背景色的明度较低，则网页中的文字的色彩应该选择明度较高的色彩；否则，文字颜色和背景色差别不大，用户在浏览网页时会感到非常吃力。当然，也不能选择明度太高的色彩；否则，用户会感到刺眼。网页的各个部分之间的色彩明度也要相互协调，不要相差太大，也不要完全相同。尽量做到既有变化，又相协调。
色相是色彩最主要的特征，是色彩所表现出来的“外相”，是色彩的种类。最基本的色相为红、橙、黄、绿、蓝和紫共6种色相。如果在这6种基本色相中间加入一或两个中间色，则可以形成红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫和红紫共12种基本色相。
注意
在设计网页时，如果选择暖色相，例如红色、橙色、黄色等则可以创造出温馨的效果。如果选择冷色相，例如蓝色、绿色，则可以使得网页呈现出清新、高雅的效果。
纯度是指色彩含有其他色彩的含量的多少。例如，粉红色的纯度比红色要低，这是由于粉红色含有其他的色彩。
3.1.3 色彩的选择
网站色彩的选择非常重要，当用户打开网站时，最先看到的就是网站的色彩，其次才是网站的内容。色彩的选择与搭配是否得当，会在很大程度上影响浏览者的意愿。一般来说，可以从以下几个方面来考虑色彩的选择。
1.色彩是否鲜明
通常情况下，色彩鲜明的网页会给浏览者留下比较深刻的印象。例如，世纪佳缘交友网的网页的基本色调为粉红色，其中的广告也配以红色或者紫色，如图3-2所示。如此鲜明的色彩，除了营造出一种浪漫的气氛之外，还为浏览者留下了非常深刻的印象。
图3-2 世纪佳缘交友网的色彩
2.色彩应该与众不同
网页色彩的选择应该突出独特性。即通过色彩能够使得访问者将网站区分开来。一般来说，这种色彩的独特性与网站的内容是密不可分的。例如，中国紫砂壶网选择了一种深绿色作为主色调，如图3-3所示。这种深绿色是一种紫砂泥的颜色，其他的网站极少选择这种颜色作为主色调。当用户浏览该网站时，通过这种色彩，可以感受到浓郁的紫砂气息，以及绿茶的芬芳。
图3-3 中国紫砂壶网的主色调
注意
色彩的独特性一定要密切结合网站内容特色。
3.色彩应该符合绝大部分访问者的审美观
网页的色彩与网页的内容应该相辅相成。色彩的选择应该适应绝大部分网站用户的审美情趣。国内的许多购物网站都不约而同地采用了橘黄色作为主色调，图3-4显示的是淘宝网的主页，图3-5显示的是进宝网的主页。之所以如此，是由于网上购物的绝大部分是年轻人，而橘黄色既有红色的热情，又有黄色的光明、活泼，正是年轻人非常喜欢的颜色。
图3-4 淘宝网主页
图3-5 进宝网主页
3.2 网页配色标准
在网页设计中，除了主色调的选择之外，还应该重视网页中多种颜色的搭配。毕竟绝大部分网页都不会只含有一种色彩。本节介绍网页配色的设计方案和配色原则。
3.2.1 网页配色设计方案
网页设计者在设计网页时，总是会选择一些颜色进行搭配，这个过程称为配色。配色的目的是通过选定的颜色，使得网页呈现出一定的视觉效果。尽管网上的网页绚丽多彩，但是网页的配色总是遵循一定的规则。下面对一些常用的规则进行介绍。
1.无色方案
所谓无色，是指在网页设计中，不选择彩色，只使用黑色、白色及灰色。这种设计方案简洁、质朴，而又不失凝重感。此外，还透露出怀旧的感觉。如图3-6所示是香奈儿公司的主页，该网页层次分明，给人以很强的视觉冲击效果，散发出高贵的气息。
图3-6 香奈儿公司主页
2.单色方案
该方案只选择单一色相的色彩，然后对该色彩的明度及纯度进行调整。如图3-7所示的网页采用了嫩绿色作为主色调，其R、G和B的值大约分别是78、185和7。然后以该色彩为基础，不断调整其明度和纯度，使网页色彩呈现出层次感。
图3-7 单色设计方案
3.相邻配色方案
这种配色方案比较简单，其原理是根据实际情况，在色相环上任意选择3个或者4个相邻的色彩作为网页的色彩。由于都是相邻的色彩，所以色彩之间的过渡非常自然。如图3-8所示的网页采用了色相环中的红色周围的几种色彩作为配色，不同颜色之间既有丰富的层次感，又过渡自然。
图3-8 相邻配色方案
除了以上几种配色方案之外，还有一些其他的方案，举例如下。
◆ 互补配色方案：使用色相环上的相反的颜色，使得不同颜色之间对比强烈。
◆ 二次色配色方案：该方案是选择色相环中的二次色绿、紫和橙色作为网页的颜色。
◆ 三次色配色方案：三次色设计是下面两个组合中的一个，即红橙、黄绿、蓝紫色或者蓝绿、黄橙、红紫色，并且在十二色相环上每个颜色彼此都有相等的距离，也就是在十二色相环中除去原色和二次色。
3.2.2 网页配色原则
对于每个网站来说，都会有自己的网页配色方案，从而形成自己的风格。但大体上讲，网页的配色可以遵循某些原则，下面对这些原则进行介绍。
1.符合网站的风格和主题
不同类型的网站就要使用不同的色彩和视觉元素，以求达到内容和形式上的统一，这样做更符合人们的认知习惯。例如政府部门的网站一般都以红色为主，体现出一种严肃、庄重的气氛。新闻类的网站应该以白底黑字为主，无须太多的颜色。购物类的网站则以橙色、蓝色等明亮轻快的颜色为主。
2.人性化
人性化是一个最基本的原则，网站的配色应该大致符合绝大部分人的审美观，避免使用刺激性很强的单一色彩，不会使人产生厌恶、不想继续停留的情绪。各部分的色彩搭配要层次分明，能够将内容清晰地展示给访问者。
3.个性化
个性化是一个较高的要求，设计者应该在前面两个原则的基础上，大胆地使用色彩，展示自己的个性，创造出与众不同的视觉效果。
3.3 网页配色步骤
网页的配色是将网页的配色方案具体实施的过程。本节将对这个过程进行简单介绍。
3.3.1 确定网页主色彩
初学者在对网页进行配色时往往不知道如何下手，从而产生随意拼凑颜色的情况。实际上任何一个网页都会选择一种色彩作为主色彩，其他的色彩作为辅助色彩。在配色时，首先确定主色彩，在主色彩的基础上通过一定的方法增加其他的色彩。遵循主从关系，这是最稳定的处理色彩原则。在页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。
例如，腾讯网的主页以蓝色作为主色彩，其R、G、B值分别为65、139、202，如图3-9所示。
图3-9 腾讯网主页
新浪网则以一种黄色作为主色彩，其R、G、B值分别为255、125、123，如图3-10所示。
图3-10 新浪网主页
美国微软公司的主页则以天蓝色为主色彩，其R、G、B值分别为255、175、0，如图3-11所示。
图3-11 微软公司的主页
注意
网页中的色彩不能太多，否则会使人眼花缭乱。
3.3.2 确定网页辅助色彩
确定主色彩之后，可以根据3.2节中介绍的配色方案和配色原则选择辅助色彩。对于彩色网页来说，单色方案和相邻配色方案是最常用的配色方案。色相相同而明度不同或纯度不同的几种颜色容易搭配，比如选择几种深浅不同的绿色来搭配，一般页面不会有太大问题。超链接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。
对于初学者来说，可以借助Dreamweaver来完成辅助颜色的选择。打开Dreamweaver CS5的颜色盒，如图3-12所示。除去最左边的3列，把剩下的颜色中水平或者垂直相邻的6种颜色作为一组，每组都是很不错的配色方案。
图3-12 Dreamweaver CS5的颜色盒
注意
同一页面尽量不要多出4种颜色。
3.3.3 页面的色彩分配
每个页面都是由多个区域组成的。由于每个区域的功能不同，在页面中的地位也不同，所以色彩的分配也会不同。色彩的分配，可以按照以下原则来进行。
◆ 网页内容：内容是展示信息的主要区域，背景颜色的明度应该较高，文字颜色的明度则较低，背景与文字色彩的对比度要高。一般来说白底黑字，如果是黑底，也可以是灰字。
◆ 网页头部：头部是放置LOGO和主要导航信息的地方。一般要用深色，具有较高对比度，使得用户能够非常方便地看到当前所在的位置。标题通常与页面其他部分有不同的样式，可以使用与网页内容差别较大的字体或颜色组合。
◆ 导航菜单：导航菜单的背景颜色应该明度较低，然后依靠明度较高的颜色、图形元素或独特的字体将网页内容和菜单准确地区分开。
◆ 侧栏：侧栏主要显示一些辅助信息，只要与网页的主要内容清楚地区分开来就可以了。
◆ 页脚：页脚主要显示版权信息，是次要的区域，不应该喧宾夺主。可以考虑使用与侧栏相同的颜色。
注意
在网页配色上可以使用一些比较跳跃的颜色，用来引导视线。例如，用跳跃性的橙色来做导航、按钮，指引视线的去向。
3.4 常见问题
网页及网站的色彩搭配是初学者最头疼的问题之一。一般来说，下面几个问题是最经常遇到的。
3.4.1 如何快速掌握网页的色彩搭配
由于人们对于色彩美感的认识存在着共同性，因此对于网页色彩的搭配也有一些技巧可以充分利用。下面介绍几种容易上手的技巧。
1.先确定主色彩，再衍生出其他色彩
前面已经介绍过，任何一个设计良好的网页都会有一个主色彩，这样才不会使浏览者眼花缭乱。作为设计者，可以先根据实际情况选择好一种基本色彩。然后调整该色彩的透明度或者饱和度，在此基础上衍生出其他的色彩。例如，在RGB模式下的颜色，当R取值为54、G取值为126、B取值为194时的颜色如图3-13所示。
图3-13 R取值为54、G取值为126、B取值为194时的颜色
当调整颜色的饱和度，使R、G、B分别取值为104、137、182时，颜色效果如图3-14所示。如果调整饱和度，也可以得到某些比较协调的颜色。图3-15显示的是把图3-13中的颜色的不透明度调整为63%时的效果，而图3-16显示的是将不透明度调整为40%时的效果。
图3-14 调整色彩饱和度产生其他颜色
图3-15 不透明度为63%时的效果
图3-16 不透明度为40%时的效果
2.先确定主色彩，再使用其互补色
这种方法也比较简单，用户根据实际情况选择一种颜色，然后再获得该颜色的互补色。利用这两种颜色作为主要的颜色来进行网页配色。在网页设计中，在适当的位置恰当地运用互补色，不仅能加强色彩的对比，拉开距离感，而且能表现出特殊的视觉对比与平衡效果。例如，如果选择如图3-17所示的颜色作为基本色，则其互补色如图3-18所示。
图3-17 选择基本色
图3-18 获得互补色
注意
获得互补色有个技巧，在Photoshop中首先使用基本色填充画布，然后按Ctrl+I快捷键，即可获得其互补色。
3.4.2 如何获得某个网页的基本色的RGB值
获得某个网页基本色的RGB值可以使用Photoshop来实现。例如，想要取得新浪网首页的基本色的颜色值，可以按照以下步骤来操作。
step 1 在浏览器中打开新浪网的首页，按PrtSc键进行屏幕抓取。
step 2 打开Photoshop，选择“文件”→“新建”命令，新建一个空白文档。按Ctrl+V组合键，将抓取的屏幕图粘贴到画布中。
step 3 单击工具箱底部的前景色面板，弹出“拾色器（前景色）”对话框，如图3-19所示。
图3-19 拾色器（前景色）对话框
step 4 在抓取的图片上面单击网页的基本色，此时，在“拾色器（前景色）”对话框中的颜色面板中的颜色也在随之变化，从对话框中可以得到基本色的RGB值。
注意
除了使用Photoshop之外，还有其他的一些小工具可以取得基本色的颜色值，在此不再详细介绍。
3.5 小结
本章介绍了网页设计中色彩搭配方面的相关知识，主要内容有色彩的基础知识、网页的配色标准和配色步骤。重点在于掌握常用的配色方案和配色技巧。在下一章中，将介绍网页制作工具Adobe Dreamweaver CS5的使用方法。