section 1.4 专题课堂——网页色彩

导读

色彩的运用在网页中的作用非常重要，有些网页看上去十分典雅、有品位，但是页面结构却很简单，图像也不复杂，这主要是色彩运用得当。只有掌握了配色的要领，才能设计出令人心旷神怡的美丽页面。本节将详细介绍网页中色彩特性方面的知识。

1.4.1 网页色彩的特性

微课堂 00分21秒

任何颜色都可以使用三原色——红、绿、蓝组合而成，三原色中只有红色是暖色，所以要判断作品颜色的冷暖，可以依据红色成分的多少而定。色调主要由明度与彩度组合而成，用来表示颜色的状态。本节将详细介绍网页色彩特性的相关知识。

1 暖色调

暖色调包括红紫、红、红橙、橙、黄橙，这类色彩给人很强烈的冲击感，有扩张及迫近视线的作用，令人产生温暖的感觉，如图1-10所示。

2 冷色调

冷暖之间的关系是通过比较得到的，明度和彩度较弱的色相如青、青绿、蓝、蓝紫等以青色为中心的颜色及其接近的颜色，会给人带来收缩、疏远和寒冷的印象。冷色会使人联想到蓝天、绿水等景物，产生深邃、严肃的感觉，如图1-11所示。

3 中性色调

紫、黄、绿等色彩没有在暖色调与冷色调中出现，这是因为这些颜色既不属于冷色，也不属于暖色，由于其所包含的冷暖比例不定而称为中性色，如图1-12所示。

1.4.2 网页安全色

微课堂 00分20秒

不同颜色会使人感受到不同的效果，网页安全色是在不同的硬件环境、不同的操作系统、不同的浏览器中都能够正常显示的颜色集合，也就是说这些颜色在任何终端浏览，显示设备上的显示效果都是相同的。

网络安全色是当红色(Red)、绿色(Green)、蓝色(Blue)颜色数字信号值(DAC Count)分别为0、51、102、153、204、255时构成的颜色组合，共有6×6×6=216种颜色(其中彩色为210种，非彩色为6种)。

1.4.3 色彩模式

微课堂 00分30秒

在进行图形图像处理时，色彩模式以建立好的描述和重现色彩的模型为基础。每一种模式都有自己的特点和适用范围，用户可以根据需要在不同的色彩模式之间转换。下面将详细介绍几种常用的色彩模式。

1 RGB色彩模式

自然界中绝大部分的可见光谱可以用红、绿和蓝三色光按不同比例与强度的混合来表示。RGB分别代表着3种颜色：R代表红色，G代表绿色，B代表蓝色。RGB模式也称为加色模型，通常用于光照、视频和屏幕图像编辑。RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0～255范围内的强度值，如图1-13所示。

2 CMYK色彩模式

CMYK色彩模式以打印油墨在纸张上的光线吸收特性为基础，图像中的每个像素都是由靛青(C)、品红(M)、黄(Y)和黑(K)色按照不同的比例合成的。由于C、M、Y、K 4种成分的增多，反射到人眼的光会越来越少，光纤的亮度会越来越低，所以CMYK模式产生颜色的方法又称为色光减色法，如图1-14所示。

3 位图(Bitmap)色彩模式

位图模式的图像由黑色与白色两种像素组成，每一个像素用“位”来表示。“位”只有两种状态：0表示有点，1表示无点。位图模式主要用于早期不能识别颜色和灰度的设备，通常用文字识别。

4 灰度(Grayscale)色彩模式

灰度模式最多使用256级灰度来表现图像，图像中的每个像素有一个0(黑色)到255(白色)之间的亮度值。灰度值也可以用黑色油墨覆盖的百分比来表示(0%表示白色，100%表示黑色)。

5 索引(Indexed)色彩模式

索引色彩模式是网上和动画中常用的图像模式，彩色图像转换为索引色彩模式的图像后包含256种颜色。这种模式主要在使用网页安全色彩和制作透明的GIF图片时使用。在Photoshop中，必须使用索引色彩模式，才能制造出透明的GIF图片。

1.4.4 网页配色的基本规则

微课堂 00分35秒

在网页配色中，我们对颜色不同程度的理解，影响到设计页面的表现。熟练地运用色彩搭配，在制作网页时即可达到事半功倍的效果。一张优秀的设计作品，其色彩搭配必定和谐得体，令人赏心悦目。下面详细介绍网页配色的基本原则。

1 相近色的应用

相近色是网页设计中常用的色彩搭配，其特点是画面统一和谐。下面详细介绍在网页制作中应用相近色的基本原则。

不同的亮度会对人的视觉产生不同的影响，颜色重的会显得面积小，颜色浅的会显得面积大。将同样面积和形状的3种颜色摆放在画面中，会使画面显得单调、乏味，这种过于平均化的摆放在网页设计中是不可取的，如图1-15所示。

设定颜色最重的褐色为主要色，因此面积最大；中间色较少，浅色面积最小，画面马上就显得丰富了，如图1-16所示。

2 对比色的应用

对比色在网页中的应用很普遍，其特点是使画面生动、有活力，视觉效果更加强烈。下面详细介绍在网页制作中使用对比色的基本原则。

人们通过生活中的经验积累，对色彩有一种心理上的冷暖感觉，一般把橘红色定为暖色极，天蓝色定为冷色极。凡与暖色极相近的色和色组为暖色，如橙色、黄色、红色等；而与冷色极相近的色和色组为冷色，如蓝绿、蓝、蓝紫等。黑色偏暖，白色偏冷，灰、绿、紫为中性色。

在网页中应用对比色时，首先要注意的是定下整个画面的基本色调，是以暖色调为主还是以冷色调为主。

专家解读

如果两种颜色的衔接比较生硬，那么就需要使用灰色来进行中和，使画面达到和谐统一的效果。在网页的中间画一条直线，这就定下了整个画面构图的版式，所有网页元素的布局必须围绕该版式来排列。注意要考虑好标题的颜色、内文的灰度等。

1.4.5 网页配色中的文本颜色

微课堂 00分36秒

与图像或图形布局要素相比，文本需要更强的可读性和可识别性。如果字的颜色和背景色有明显的差异，其可读性和可识别性就强，这时主要使用的配色是明度的对比配色或者利用补色关系的配色。使用灰色或白色等无彩色背景，其可读性高，和其他颜色也容易配合；但如果想使用一些比较有个性的颜色，则主要注意颜色的对比度问题。另外，在文本背景下使用图像，如果使用对比度高的图像，那么可识别性就会降低，在这种情况下要考虑降低图像的对比度或使用只有颜色的背景。

实际上，想在网页中恰当地使用颜色就要考虑各个要素的特点。背景和文字如果使用近似的颜色，其可识别性就会降低，这是文本字号大小处于某个值时的特征。也就是说，各要素的大小如果发生了改变，色彩也需要改变。如果标题字号大小大于一定值，即使使用与背景相近的颜色，对其可识别性也不会有太大的影响。相反，如果与周围的颜色互为补充，可以给人整体上调和的感觉。如果整体使用比较接近的颜色，对想强调的内容使用补色，这也是配色的一种方法。