2.2 网页配色_Photoshop+Dreamweaver+Flash+CSS完美网页设计经典范例-QQ阅读男生科幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.2 网页配色

色彩是网页形象中的一个重要方面，决定了网页给浏览者的第一印象。页面的整体色调有活泼或严肃、热烈或庄重之分，不同风格、不同主题的网站在色彩的运用上都有所不同。了解和掌握色彩知识及色彩搭配方法，对于网站设计很重要。

2.2.1 色彩的基础概念

色彩分无彩色和有彩色两大范畴，前者如黑、白、灰，后者如红、黄、蓝等。有彩色的色彩主要由色相、明度和饱和度3个要素组成。色相是指色彩本身的相貌，由波长决定，是色彩最基本的特征。明度是指色彩的明暗程度，也称亮度。饱和度也称纯度，是指颜色的纯粹程度，即与中性灰的掺杂程度。

在设计过程中，色彩的选择和运用并不单单与色彩的物理性质有关，影响更多的是色彩带给人的视觉感受和心理感受。色彩的视错觉和色彩的情感是色彩的重要特性，了解这些特性对设计出精彩的作品会有很大的帮助。

色彩的视错觉

色彩的视错觉主要表现在色彩的冷与暖、兴奋与沉静、膨胀与收缩、前进与后退、轻与重等感觉方面。

色彩的冷暖视错觉是视觉和生理、心理上相互关联产生的一种视错觉效果。橙红色是火焰的颜色，因而引起的暖感最强；蓝色使人联想到冰和水，所以它引起的冷感最强。这两种颜色被称为“暖极”和“冷极”。其他颜色的冷暖感根据其在色相环上距离冷暖两极的位置而定，靠近暖极的称为暖色，靠近冷极的称为冷色，部分颜色和两端的距离差不多，则称为中性色。无彩色的黑、白、灰也被视为中性色。

色彩的兴奋与沉静的错觉主要是由不同颜色对人的视网膜及脑神经的刺激不同而形成的。暖色的、波长较长、明度纯度高的色彩，对人的视网膜及脑神经刺激较强，会促使血液循环加快，进而产生兴奋的情绪反应，所以称这部分色彩为兴奋色。冷色的、波长较短、明度纯度低的色彩，对人的视网膜及脑神经刺激较弱，眼睛注视这部分颜色时，会产生沉静的情绪，所以称这部分颜色为沉静色。

色彩有膨胀和收缩的视觉错觉，造成这种错觉的原因有多种，一方面是色光本身，波长长的暖色光和光度强的色光对眼睛成像作用比较强，视网膜接受这类光时会产生扩散性，造成成像的边缘有一条模糊带，产生膨胀感。反之波长短的冷色光和光度弱的色光成像清晰，对比之下就有收缩感。另一方面，色彩的胀缩感不仅和色相有关，还与明度有关。明度高的有扩张和膨胀感，明度低的有收缩感。如图2-16所示，两个圆大小相同，但给人的视觉感受是白色的圆要比黑色的圆看上去大一些。

图2-16 色彩的膨胀与收缩

色彩的进退错觉由色彩的冷暖、明度、纯度和面积等多种对比造成。通常暖色、亮度高、纯度高的色彩有前进感，冷色、亮度低、纯度低的颜色有后退感。如图2-17所示，在蓝底色上画一个黄色的圆，会感觉圆在上底在下，但在黄底上画蓝色的圆，却会感觉是在黄色画纸上开了个洞，下面衬了张蓝色的纸。

图2-17 色彩的前进与后退

色彩产生轻重的视错觉有直觉的因素，也有联想的因素。接近黑的颜色会联想到铁、煤等具有重量感的物质，而白色则会让人联想到白云、棉花等质感轻的物质。通常情况下，如果色相相同，明度高的色彩会感觉轻。而不同的色相轻重感也不同，按白、黄、橙、红、灰、绿、紫、蓝、黑的依次顺序视觉感由轻到重。

色彩的情感

色彩只是一种物理现象，它本身是没有感情的，但色彩却能表达感情，因为色彩能让人们通过视觉产生联想，从而引起心理作用。色彩的联想是通过经验、记忆或相关知识而吸取的，这些色彩经过长久的反复比较，逐渐固定了它们专有的表情，不同色彩也逐渐形成了不同的象征，分别介绍如下。

白色象征雅致、干净、纯洁，出污泥而不染。图2-18所示为以白色为主色调的网页。

黑色给人的心理影响有两类，一是消极感，使人产生恐惧忧伤的印象，同时又有肮脏、黑暗之感。二是黑色显得严肃、庄重，象征着权利与威仪。图2-19所示为以黑色为主色调的网页。

图2-18 以白色为主色调的网页

图2-19 以黑色为主色调的网页

红色是一种刺激性较强的色彩，在革命的年代常被认为是斗争、光明和力量的象征。在中国民间，红色常与吉庆、幸福联系在一起。由于红色富有刺激性，同时它又象征着危险，例如交通信号的停止色和消防车的色调都采用红色。图2-20所示为以红色为主色调的网页。

黄色象征日光，同时也象征着神圣和至高无上。黄色是一种温和的暖色，显得轻快、明亮，不同的黄色会产生不同的感受，嫩黄色给人以天真、稚嫩的美感，而成熟的谷物及秋天树叶的金黄色则意味着收获和欢乐。图2-21所示为以黄色为主色调的网页。

图2-20 以红色为主色调的网页

图2-21 以黄色为主色调的网页

蓝色是色彩中最含蓄、最内向的颜色，给人以纯洁、透明的感觉，也给人以理性的感觉，但蓝色也是悲哀的表现色。图2-22所示为以蓝色为主色调的网页。

图2-22 以蓝色为主色调的网页

绿色与大自然中草木同色，因此绿色象征着自然、生命、生长、青春和活泼等，同时象征着和平与环保，在交通信号中又象征着前进与安全。图2-23所示为以绿色为主色调的网页。

图2-23 以绿色为主色调的网页

紫色是优雅、高贵的色彩，另外紫色容易与夜空和阴影相联系，所以富有神秘感，容易引起心理上的忧郁和不安。图2-24所示为以紫色为主色调的网页。

图2-24 以紫色为主色调的网页

色彩有着丰富的感情内涵，因为它包含着无穷无尽的色相和深浅浓淡的关系，通过这些关系相互搭配和组合，可以形成各种各样的色彩氛围。

2.2.2 网页色彩的特性

色彩在计算机中的表达

计算机采用的是二进制计数方式，在对颜色的描述上也采用这种方法。如果是1位二进制，那么可以描述两种颜色，2位二进制就可以描述4种颜色，以此类推，8位二进制可以描述256种颜色。因为用二进制计数比较麻烦，在HTML中使用十六进制的数值来表示某个具体颜色。十六进制值描述的颜色方式是#号加上一个十六进制数值。例如，某种颜色由20% 的红色、80% 的绿色和40% 的蓝色混合而成，其十六进制表述就是#33CC66。常用颜色的代码列表如下。

白色 #FFFFFF。
黑色 #000000。
蓝色 #0000FF。
绿色 #008000。
红色 #FF0000。
黄色 #FFFF00。

在计算机的图形处理软件中，一种颜色的数值通常用RGB值来表示。RGB值是指该颜色中红（Red）、绿（Green）、蓝（Blue）的成分，通常情况下RGB每个颜色各有256级，用数字表示为0～255。按照计算，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777 216，也称为24位色（2的24次方）。从理论上讲，红、绿、蓝3种基色按照不同的比例混合可以调配出任何一种颜色来。白色的十六进制表述为#FFFFFF，它的RGB值为R：255，G：255，B：255，可以写为RGB（255，255，255）。

网页安全色

网页安全色是早期网页设计中经常提到的概念，是指在不同硬件环境、不同操作系统及不同浏览器中都能够正常显示的颜色集合。网页中的显示效果与所处的平台及不同的浏览用户所使用的显示设备有很大关系，选择使用网页安全色可以避免原有的颜色失真问题，从而保证这些颜色在任何终端浏览用户显示设备上的显示效果都是相同的。网页安全色的具体范围是指当红色（Red）、绿色（Green）、蓝色（Blue）的颜色数字信号值为0、51、102、153、204、255时构成的颜色组合，它一共有6×6×6=216种颜色，其中彩色为210种，非彩色为6种。

因为网页安全色的色彩范围有限，很难表达渐变或者真彩图像等内容，所以在实际设计过程中并不是一定只使用网页安全色。而且如今，绝大多数显卡和显示器都使用24位真彩色，网页设计师已经不再严格坚持只使用网页安全色，但如果希望网页能在计算机以外的设备（如手机）上保持足够出色的显示品质，那么设计师还是应该注意从这216种颜色中寻找配色方案。