4.3.1颜色搭配基础

4.3.1　颜色搭配基础

网站的色彩是最影响网站整体风格的因素，也是美工设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基本知识，所以在制作网页之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想的效果。因此，在介绍色彩搭配之前，先介绍色彩的基本知识。

1. 色彩的基本知识

由光学知识可知，颜色是因为物体对光的反射或折射而产生的。光的波长不同，光的颜色也就不同。红、绿、蓝是光的三原色，它们不同程度的组合可以形成各种颜色。所以在网页中，用光的三原色的不同颜色值可组合成各种颜色。

网页中的颜色通常采用6位十六进制的数值来表示，每两位代表一种颜色，从左到右依次表示红色、绿色和蓝色，每种颜色的十六进制值从00~FF(十进制值0~255)。颜色值越高，表示这种颜色越浓。比如红色，其数值为“#FF0000”(＃号表示十六进制数)，白色为“#FFFFFF”，黑色为“#000000”。也可以采用三个以“，”相隔的十进制数来表示某一颜色，比如红色，用十进制数表示为color(255，0，0)。

在传统的色彩理论中，颜色一般分为彩色和非彩色(或称为灰色)两大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的颜色。在网页中，如果组成颜色的三种原色数值相等，就显示为灰色。

平时见到的太阳光是白色，其实太阳光是多种色彩混合而成的，按颜色的色调通常将其划分为七种颜色：红、橙、黄、绿、青、蓝、紫。如果将这七种颜色按这个顺序渐变为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以，红、橙、黄的组合又称为暖色调，青、蓝、紫的组合又称为冷色调。

除了冷暖的差别外，不同的单个颜色也会给人带来不同的感觉，分述如下。

红色：是一种激奋的色彩，给人以冲动、愤怒、热情和活力的感觉。

绿色：介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全。它与金黄、淡白搭配，可以产生优雅、舒适的气氛。

橙色：也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。

黄色：充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。

蓝色：是最具凉爽、清新、专业的色彩。它与白色混合，能体现柔顺、淡雅、浪漫的气氛(如天空的色彩)。

白色：给人以洁白、明快、纯真和干净的感觉。

黑色：通常是深沉、神秘、寂静、悲哀和压抑的代表。

灰色：具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以与任何一种颜色进行搭配。

2. 网站的色彩搭配

网站的色彩搭配通常分为两个步骤：第一步是为整个网站选取一种主色调；第二步是为主色调搭配多种适合的颜色。主色调指的是整个网站给人印象最深的颜色，或者说除白色之外用得最多的颜色。

正如前面所述，不同的颜色给人的感受是不一样的，所以主色调选取的一个最基本的原则就是保证所选的颜色与网站的主题或者形象相符，进一步地能够通过这种颜色加深用户对网站的印象。

比如蓝色是一种给人感觉非常专业的颜色，所以许多高科技公司都喜欢使用蓝色作为公司网站的颜色。最典型的当数微软公司(见图4-13，www.microsoft.com/china)和IBM公司(见图4-14，www.ibm.com/us)，蓝色极大地加强了人们对他们产品的信任感。

图4-13　Microsoft公司主页

图4-14　IBM公司主页

红色则是热情和活力的象征，北京市政府网站——首都之窗(www.beijing.gov.cn)正是通过红色来向人们传达了北京作为中国首都的气质：大气和热情，如图4-15所示。

图4-15　首都之窗主页

易趣(http://www.ebay.com.cn)是全球最大的中文网上交易平台，它致力于为所有网络用户建立一个诚信、平等、安全、高效、舒适的网上交易环境，而对于这一点，没有比绿色更为合适的颜色，如图4-16所示。

图4-16　易趣网主页

企业或者政府部门在选取主色调的时候，需要考虑符合自身的形象，而个人网站则要随意得多，往往选择的是自己喜欢的颜色。

选好主色调之后，接下来要考虑的就是在什么地方使用主色调。从前面的几个例子也可以看到，主色调最常表现在三个位置：首先是头部，也就是网页最上面的部分，通常包含导航条，头部是最能体现主色调的地方，所以所有的网站都会在头部表现主色调；其次是栏目索引条上，栏目索引条虽然面积小，但是出现在网页的各个部位，所以能非常有效地渲染主色调；最后是网页上的文字，文字笔画虽细，但大面积的文字也能很好地突出主色调。

接着要考虑的是别的地方使用什么颜色去搭配这种主色调，比如背景色、文字颜色、导航条颜色、插图颜色等都使用什么颜色。色彩搭配是一项非常精细的工作，因为往往一个细节就会影响整个网页的色彩均衡。色彩搭配没有固定的模式与步骤，但是如果从大面积用色到小细节去搭配颜色，会使得这项工作更轻松一些。下面就来看看几个主要的方面。

1)选取背景色

大多数的网站都会选取白色作为背景色。白色使得狭小的屏幕空间显得很大，再多的信息在白色的背景下，其排放也可以显得很整齐，其页面也可以显得非常干净和整洁。图4-17所示的湖南第一师范学院网站(http://web.hnfnu.edu.cn)主页的背景色就使用了白色。

图4-17　湖南第一师范学院网站主页

2)导航条的颜色

导航条是对网站栏目的一个索引，它通常以一个水平长条的形式出现在网页头部的下边(也有的出现在头部下左边)。导航条作为头部的一部分，经常采用主色调，比如图4-15所示的首都之窗主页和图4-16所示的易趣网主页就属于这种情况。另一方面，导航条因为介于网页的头部和内容部分的中间，所以也经常作为头部和内容部分的过渡，这种情况下通常采用灰色系，比如图4-12所示的“我从草原来——德德玛”个人主页和图4-14所示的IBM公司的主页就采用了蓝灰底色的导航条，图4-17所示的湖南第一师范学院网站的导航条使用了灰色。

3)栏目索引条的颜色

栏目索引条因为分布在网页的各个部位，所以经常采用主色调中不同深度的颜色来烘托整体的效果，比如图4-14所示的IBM公司主页采用不同的蓝色，图4-15所示的首都之窗主页采用不同的红色。栏目索引条也经常使用与主色调非常协调的颜色，比如图4-16所示的易趣网主页的栏目索引条就使用了浅黄绿色。另外，为了颜色的过渡，位于网页中间的栏目索引条也经常采用浅灰色。

4)文字的颜色

文字在一个网页上是无处不在的，但是文字的笔画比较单薄，所以文字通常用来进一步突出主色凋，或者用来过渡和缓解页面的颜色。文字的颜色主要根据文字的背景色进行搭配，它与背景色应有较大的反差，如白底黑字、蓝底白字等，以便能清楚地显示文字。其次文字的颜色搭配还得兼顾文字周围物体的颜色。

5)插图的颜色

网页的插图通常尺寸都比较小，所以它的颜色可以绚丽、丰富一些，这样一来可以使页面变得活泼，二来可以点缀整个页面。但是在选择有背景的图片时要特别小心，不要与网页的背景色及图所插区域的背景色相冲突。解决这个问题一般有两种方法：一种是采用可透明的gif图；另一种是将图片的背景色做成与网页背景色一样的颜色。在网页某个位置插入图片时，也有考虑同样的问题，如图4-17所示的湖南第一师范学院网站主页的背景色为白色，在主页中插入毛泽东的题词“要做人民的先生，先做人民的学生”图片时，就先将图片的背景色处理成了白色。