1.3.4　网页设计色彩基础

色彩在网页设计中占有极其重要的地位，在设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，学习网页设计一定要掌握一些网络色彩的基础知识，才能做到游刃有余。

1.色彩的三原色

计算机屏幕的色彩是由RGB（红、绿、蓝）3色光所合成的，通过调整这3个基色就可以调校出其他的颜色，在许多图像处理软件里，都提供色彩调配功能，可输入三基色的数值来调配颜色，也可直接根据软件提供的调色板来选择颜色。在HTML中的基本色彩是红色（R）、绿色（G）、蓝色（B），这3种颜色的数值都是255。例如：红色的值（R：255，G：0，B：0），十六进制表示为（#FF0000）；白色的值（R：255，G：255，B：255），十六进制表示为（#FFFFFF）。

自然界的景色非常壮观美丽，这些景色画面中包含着丰富的色彩，随着四季的变化，色彩也发生着变化。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，即反射白光的色彩，而其他所有颜色均属于彩色。

黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，可用灰色试试，效果绝对不会太差。

2.色彩三属性

彩色是指红、黄、蓝、绿等带有颜色的色彩，任何一种彩色具有3个属性：色相、明度、纯度（彩度）。

（1）色相

色相（Hue）也叫色泽，即各类色彩的相貌称谓，如红、黄、绿、蓝、紫等为不同的基本色相。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性，而色相是由原色、间色和复色来构成的。

色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。色的不同是由光的波长的长短差别所决定的。色相指的是这些不同波长的色的情况。波长最长的是红色，最短的是紫色。最基本的色相为：红、橙、黄、绿、蓝、紫6个颜色。把红、橙、黄、绿、蓝、紫这6个二次色和处在它们各自之间的红橙、黄橙、黄绿、蓝绿、蓝紫、红紫这6种中间色——共计12种色作为色相环。按光谱顺序为：红、红橙、橙、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫，紫、红紫，如图1-6所示。

在色相环上排列的色是纯度高的色，被称为纯色。这些色在环上的位置是根据视觉和感觉的相等间隔来进行安排的。用类似这样的方法还可以再分出差别细微的多种颜色。在色相环上，与环中心对称，并在180°的位置两端的色被称为互补色。

（2）饱和度

饱和度（Saturation）是指色彩的鲜艳程度，也称色彩的纯度或彩度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。纯度高的色彩纯，鲜亮；纯度低的色彩暗淡，含灰色；原色最纯，颜色的混合越多则纯度逐渐减低。有彩色的各种色都具有彩度值，无彩色的色的彩度值为0。例如，某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度降低，颜色趋于柔和、沉稳。彩度由于色相的不同而不同，而且即使是相同的色相，因为明度的不同，彩度也会随之变化的。图1-7所示色相、饱和度和明度的变化情况。

（3）明度

明度（Brightness或Lightness）也叫亮度，是指色彩的明暗程度，明度越大，色彩越亮。明度用于体现颜色的深浅，也称色彩的黑白度对比。

明度是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。计算明度的基准是灰度测试卡。黑色为0，白色为10，在0～10之间等间隔地排列为9个阶段。色彩可以分为有彩色和无彩色，但黑白仍然存在着明度。作为有彩色，每种色各自的亮度、暗度在灰度测试卡上都具有相应的位置值。彩度高的色对明度有很大的影响，不太容易辨别。在明亮的地方鉴别色的明度比较容易的，在暗的地方就难以鉴别。

例如，黄色就比蓝色的明度高，在一个画面中如何安排不同明度的色块也可以帮助表达画作的感情，如果天空比地面明度低，就会产生压抑的感觉。任何色彩都存在明暗变化，其中黄色明度最高，紫色明度最低，绿、红、蓝、橙的明度相近，为中间明度。另外，在同一色相的明度中还存在深浅的变化，如绿色中由浅到深有粉绿、淡绿、翠绿等明度变化。图1-7中右面是纯度从低到高的变化。非彩色的黑、灰、白较能形象地表达这一特质。非彩色只有明度特征，没有色相和饱和度的区别。

尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其他纯度色彩搭配使用。

小知识：CMYK和RGB颜色模式。

CMYK是Cyan（青）、Magenta（品红）、Yellow（黄）、Black（黑），这是印刷上使用比较普遍的色彩模式。R、G、B就是Red、Green、Blue（红、绿、蓝）3种颜色，RGB模式就是以这3种颜色为基色进行叠加而模拟出大自然色彩的色彩组合模式。日常用的显示器、电视机等的色彩都使用这种模式。

3.色彩的心理感觉

色彩在人们的生活中都是有丰富的感情和含义的。不同的颜色会给浏览者不同的心理感受，以下介绍的是几种典型的色彩与心理感受例子。

例如，红色让人联想到玫瑰，联想到喜庆，联想到兴奋。白色联想到纯洁、干净和简洁；紫色象征着女性化、高雅、浪漫；蓝色象征高科技、稳重、理智；橙色代表了欢快、甜美、收获；绿色代表了充满青春的活力、舒适、希望等。黄色是一种具有富贵、健康、智慧和庄重的颜色，它的明度最高。当然，不是说某种色彩一定代表了什么含义，特定的场合下，同种色彩可以代表不同的含义。

4.网页配色的几个概念

①相近色：色环中相邻的3种颜色，如图1-6中的黄绿色、黄色和黄橙色。相近色的搭配给人的视觉效果很舒适，很自然，所以相近色在网站设计中极为常用。

②互补色：色环中相对的两种色彩，如图1-6中的黄色和紫色，另外如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。

③暖色：黄色、橙色、红色、紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，如电子商务网站、儿童类网站等，用以体现商品的琳琅满目、儿童类网站的活泼、温馨等效果。

④冷色：绿色、蓝色、蓝紫色等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技（如游戏类网站），主要表达严肃、稳重等效果。

5.Web安全色

不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大。为了解决Web调色板的问题，通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型，在该模型中，可以用相同的十六制进制值00、33、66、99、CC和FF来表达三原色（RGB）中的每一种。这种基本的Web调色板将作为所有的Web浏览器和平台的标准，它包括了这些十六进制值的组合结果。这就意味着，我们的输出结果包括6种红色调、6种绿色调、6种蓝色调。6×6×6的结果就给出了216种特定的颜色，这些颜色就可以安全地应用于所有的Web中，而不需要担心颜色在不同应用程序之间的变化。大多数图像编辑或者绘画程序中提供的颜色拾取框中，通过使用滴管工具拾取的颜色都是Web安全色。