2.2 网页色彩的搭配

学习时间：30分钟

网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景、文字、图标、边框、超链接……，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？下面来了解一些色彩的基本知识。

颜色是因为光的折射而产生的。

红、黄、蓝是三原色，其他的色彩都可以用这三种色彩调和而成。HTML中的色彩即是用这三种颜色的数值表示的，例如，红色是color（255，0，0），十六进制的表示方法为（FF0000），白色为（FFFFFF），我们经常看到的“bgColor=#FFFFFF”就是指背景色为白色。

颜色分非彩色和彩色两类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以外的所有色彩。

任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。

通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花，如图所示。

1.非彩色的搭配

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

2.彩色的搭配

色彩千变万化，彩色的搭配是我们研究的重点。

色彩对人的视觉效果非常明显，一个网站设计得成功与否，在某种程度上取决于设计者对色彩的运用和搭配，因为网页设计属于一种平面效果设计，在平面图上，色彩的冲击力是最强的，它最容易给客户留下深刻的印象，如图所示。

2.2.1 色彩处理

色彩是人的视觉最敏感的东西，主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。

1.色彩的感觉

色彩的冷暖感：色彩的冷暖感觉主要取决于色调。在色彩的各种感觉中，首先感觉到的是冷暖感。一般来说，看到红、橙、黄等颜色时感到温暖，而看到蓝、蓝紫、蓝绿颜色时感到冷。

色彩的软硬感：决定色彩轻重感觉的主要是明度，明度高的色彩感觉轻，明度低的色彩感觉重。其次是纯度，在同明度，同色相条件下，纯度高的感觉轻。

色彩的强弱感：亮度高的明亮、鲜艳的色彩感觉强，反之则感觉弱。

色彩的兴奋与沉静：这与色相、明度、纯度都有关，其中纯度的作用最为明显。在色相方面，凡是偏红、橙的暖色系具有兴奋感，凡属蓝、青的冷色系具有沉静感；在明度方面，明度高的色彩具有兴奋感，明度低的色彩具有沉静感；在纯度方面，纯度高的色彩具有兴奋感，纯度低的色彩具有沉静感。

色彩的华丽与朴素：这与纯度关系最大，其次是与明度有关。凡是鲜艳而明亮的色彩具有华丽感，凡是浑浊而深暗的色彩具有朴素感。有彩色系具有华丽感，无彩色系具有朴素感。

色彩的进退感：对比强、暖色、明快、高纯度的色彩代表前进，反之代表后退。

2.色彩的季节性

春季处处一片生机，通常会流行一些活泼跳跃的色彩；夏季气候炎热，人们希望凉爽，通常流行以白色和浅色调为主的清爽亮丽的色彩；秋季秋高气爽，流行的是沉重的暖色调；冬季气候寒冷，深颜色有吸光、传热的作用，人们希望能暖和一点，喜爱穿深色衣服。这就很明显地形成了四季的色彩流行趋势，春夏以浅色、明艳色调为主；秋冬以深色、稳重色调为主，每年色彩的流行趋势都会因此而分成春夏和秋冬两大色彩趋向。

3. 颜色的心理感觉

不同的颜色会给浏览者不同的心理感受。

红色：红色是一种激奋的色彩，代表热情、活泼、温暖、幸福和吉祥。红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人们注意，也容易使人兴奋、激动、热情、紧张和冲动，而且还是一种容易造成人视觉疲劳的颜色，如图所示为以红色为主色调的网页。

橙色：橙色是十分活泼的光辉色彩，与红同属暖色，具有红与黄之间的色性，它使人联想起火焰、灯光、霞光、水果等物象，是最温暖、响亮的色彩。感觉活泼、华丽、辉煌、跃动、甜蜜、愉快，但也有疑惑、嫉妒、伪诈等消极倾向性表情，如图所示为以橙色为主色调的网页。

黄色：黄色是亮度最高的色，在高明度下能够保持很强的纯度，是各种色彩中最为娇气的一种颜色，它具有快乐、希望、智慧和轻快的个性，它的明度最高，代表明朗、愉快和高贵。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化，如图所示为以黄色为主色调的网页。

绿色：绿色是一种表达柔顺、恬静、满足、优美的颜色，代表新鲜、充满希望、和平、柔和、安逸和青春，显得和睦、宁静、健康。绿色具有黄色和蓝色两种成分颜色。在绿色中，将黄色的扩张感和蓝色的收缩感中和，并将黄色的温暖感与蓝色的寒冷感相抵消。绿色和金黄、淡白搭配，可产生优雅、舒适的气氛，如图所示为以绿色为主色调的网页。

蓝色：蓝色与红、橙色相反，是典型的寒色，代表深远、永恒、沉静、理智、诚实、公正、权威，是最具凉爽、清新特点的色彩。浅蓝色系明朗而富有青春朝气，为年轻人所钟爱，但也有不够成熟的感觉。深蓝色系沉着、稳定，为中年人普遍喜爱的色彩。其中略带暖味的群青色，充满着动人的深邃魅力，藏青则给人以大度、庄重印象。靛蓝、普蓝因在民间广泛应用，似乎成了民族特色的象征。在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的表达效果构成较明显的影响，如图所示为以蓝色为主色调的网页。

紫色：紫色具有神秘、高贵、优美、庄重、奢华的气质，有时也感孤寂、消极。尽管它不像蓝色那样冷，但红色的渗入使它显得复杂、矛盾。它处于冷暖之间游离不定的状态，加上它的低明度的性质，也许就构成了这一色彩在心理上引起的消极感，如图所示为以紫色为主色调的网页。

黑色：黑色是最具有收敛性的、沉郁的、难以琢磨的色彩，给人以一种神秘感。同时黑色还表达凄凉、悲伤、忧愁、恐怖，甚至死亡，但若运用得当，还能产生黑铁金属质感，可表达时尚前卫、科技等，如图所示为以黑色为主色调的网页。

白色：白色的色感光明，代表纯洁、纯真、朴素、神圣和明快，具有洁白、明快、纯真、清洁的感觉。如果在白色中加入其他任何色，都会影响其纯洁性，使其变得含蓄，如图所示为以白色为主色调的网页。

灰色：灰色在商业设计中，具有柔和、高雅的意象，属中性色彩，男女皆能接受，所以灰色也是永远流行的主要颜色。在许多高科技产品中，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。使用灰色时，大多利用不同的层次变化组合或搭配其他色彩，才不会产生过于平淡、沉闷、呆板、僵硬的感觉，如图所示为以灰色为主色调的网页。

2.2.2 网页色彩搭配原理

色彩搭配既是一项技术性工作，也是一项艺术性很强的工作，因此，在设计网页时，除了要考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。

网页的色彩是树立网站形象的关键要素之一，色彩搭配却是网页设计初学者感到头疼的问题。网页的背景、文字、图标、边框、链接等应该采用什么样的色彩，应该搭配什么样的色彩才能最好地表达出网站的内涵和主题呢？下面介绍一下网页色彩搭配的一些原理。

色彩的鲜明性：网页的色彩要鲜明，这样容易引人注目。一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象，如图所示。

色彩的独特性：要有与众不同的色彩，使得大家对网站印象深刻。

色彩的艺术性：网站设计也是一种艺术活动，因此必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站，如图所示。

2.2.3 网页中色彩的搭配

色彩在人们的生活中都是有丰富的感情和含义的，在特定的场合下，同种色彩可以代表不同的含义。色彩总的应用原则应该是“总体协调，局部对比”，就是主页的整体色彩效果是和谐的，局部、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些是直接刺激，有些要通过间接的联想，更高层次则涉及人们的观念、信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不能忽视的。

对于网页设计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率、快节奏的现代生活方式的条件，这就需要做网页时把握人们在这种生活方式用网络的一种心理需求。

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

互补色：色环中相对的两种色彩。对互补色调整一下补色的亮度，有时是一种很好的搭配，如图所示为互补的颜色。

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

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

色彩均衡：网站让人看上去舒适、协调，除了文字、图片等内容的合理排版外，色彩均衡也是相当重要的一部分，一个网站不可能单一运用一种颜色，所以色彩的均衡问题是设计者必须考虑的问题。

2.2.4 网页元素的色彩搭配

为了让网页设计得更靓丽、更舒适，增强页面的可阅读性，必须合理、恰当地运用与搭配页面各元素间的色彩。

1.网页导航条

网页导航条是网站的指路方向标，浏览者在网页间跳转、了解网站的结构、查看网站的内容，都必须使用导航条。可以使用稍微具有跳跃性的色彩吸引浏览者的视线，使其感觉网站清晰明了、层次分明，如图所示。

2.网页链接

一个网站不可能只有一页，所以文字与图片的链接是网站中不可缺少的部分。尤其是文字链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。要让浏览者快速地找到网站链接，设置独特的链接颜色是一种驱使浏览者单击链接的好办法，如图所示。

3.网页文字

如果网站中使用了背景颜色，就必须要考虑到背景颜色的用色与前景文字的搭配问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，让人一目了然，如图所示。

4.网页标志

网页标志是宣传网站最重要的部分之一，所以这部分一定要在页面上突出、醒目。可以将Logo和Banner做得鲜亮一些，也就是说，在色彩方面与网页的主题色分离开来，如图所示。

2.2.5 网页色彩搭配的技巧

色彩的搭配是一门艺术，灵活运用它能让主页更具亲和力。要想制作出漂亮的主页，需要灵活运用色彩加上自己的创意和技巧，下面介绍网页色彩搭配的一些常用技巧。

使用单色：尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度，也可以产生变化，使网站避免单调，做到色彩统一，有层次感，如图所示。

使用邻近色：所谓邻近色，就是在色带上相邻近的颜色，如绿色和蓝色、红色和黄色就互为邻近色。采用邻近色设计网页，可以使网页避免色彩杂乱，以达到页面艺术的和谐与统一，如图所示。

使用对比色：对比色可以突出重点，产生强烈的视觉效果，通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用，如图所示。

黑色的使用：黑色是一种特殊的颜色，如果使用恰当、设计合理，往往能产生很强的艺术效果。黑色一般用来作为背景色，与其他纯度色彩搭配使用，如图所示。

背景色的使用：背景的颜色不要太深，否则会显得过于厚重，这样会影响整个页面的显示效果。一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时，背景色要与文字的色彩对比搭配好，使之与文字色彩对比强烈一些，如图所示。

色彩的数量：一般初学者在设计网页时往往使用多种颜色，使网页变得很花，缺乏统一和协调，缺乏内在的美感，给人一种繁杂的感觉。其实，网站用色并不是越多越好，一般应控制在3种色彩以内，可以通过调整色彩的各种属性来产生颜色的变化，保持整个网页的色调统一，如图所示。

要和网站内容匹配：了解网站所要传达的信息和品牌，选择可以加强这些信息的颜色，如在设计一个强调稳健的金融机构时，那么就要选择冷色系、柔和的颜色，如蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏该网站的品牌。

围绕网页主题：色彩要能烘托出主题。根据主题确定网站颜色，同时还要考虑网站的访问对象，文化的差异也会使色彩产生非预期的反应。另外，不同地区与不同年龄层对颜色的反应也会有所不同。年轻族一般比较喜欢饱和色，但这样的颜色却引不起高年龄层人群的兴趣。