3.2 网页色彩的搭配

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

3.2.1 如何处理色彩

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

1．色彩的感觉

（1）色彩的冷暖感

红、橙、黄代表太阳、火焰；蓝、青、紫代表大海、晴空；绿、紫代表不冷不暖的中性色；无色系中的黑代表冷，白代表暖。

（2）色彩的软硬感

高明度、高纯度的色彩能给人以软的感觉，反之则感觉硬。

（3）色彩的强弱感

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

（4）色彩的兴奋与沉静

红、橙、黄，偏暖色系，高明度，高纯度，对比强的色彩感觉兴奋；青、蓝、紫，偏冷色系，低明度，低纯度，对比弱的色彩感觉沉静。例如，下图为橙色大气漂亮的果农蔬菜基地公司网站

（5）色彩的华丽与朴素

红、黄等暖色和鲜艳而明亮的色彩能给人以华丽感；青、蓝等冷色和浑浊而灰暗的色彩能给人以朴素感。

（6）色彩的进退感

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

对色彩的这种认识10多年前就已被国外众多企业所接受，并由此产生了色彩营销战略。许多企业将此作为市场竞争的有利手段和再现企业形象特征的方式，通过设计色彩抓住商机，像绿色的“鳄鱼”、红色的“可口可乐”、红黄色的“麦当劳”以及黄色的“柯达”等。在欧美和日本等发达国家，设计色彩早就成了一种市场竞争力，并被广泛使用。

2．色彩的季节性

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

3．颜色的心理感觉

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

（1）红色

红色是一种激奋的色彩，代表热情、活泼、温暖、幸福和吉祥。红色容易引起人们注意，容易使人兴奋、激动、热情、紧张和冲动，也是一种容易造成人视觉疲劳的颜色。

（2）绿色

绿色代表新鲜、充满希望、和平、柔和、安逸和青春，显得和睦、宁静、健康。绿色具有黄色和蓝色两种颜色成分。在绿色中，将黄色的扩张感和蓝色的收缩感中和，并将黄色的温暖感与蓝色的寒冷感相抵消。绿色和金黄、淡白搭配，可产生优雅、舒适的气氛。

（3）蓝色

蓝色代表深远、永恒、沉静、理智、诚实、公正、权威，是最具凉爽、清新特点的色彩。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛（像天空的色彩）。

（4）黄色

黄色具有快乐、希望、智慧和轻快的个性。它的明度最高，代表明朗、愉快、高贵，是色彩中最为娇气的一种色。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。

（5）紫色

紫色代表优雅、高贵、魅力、自傲和神秘。在紫色中加入白色，可使其变得优雅、娇气，并充满女性的魅力。

（6）橙色

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

（7）白色

白色代表纯洁、纯真、朴素、神圣和明快，具有洁白、明快、纯真、清洁的感觉。如果在白色中加入其他任何色，都会影响其纯洁性，使其性格变得含蓄。

（8）黑色

黑色具有深沉、神秘、寂静、悲哀、压抑的感受。

（9）灰色

在商业设计中，灰色具有柔和、平凡、温和、谦让、高雅的感觉，具有永远流行性。在许多的高科技产品中，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。使用灰色时，大多利用不同的参差变化组合和其他色彩相配，才不会过于平淡、沉闷、呆板和僵硬。

色彩在饱和度、亮度上略微变化，都会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、深沉。

3.2.2 网页色彩搭配原理

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

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

1．色彩的鲜明性

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

2．色彩的独特性

要有与众不同的色彩，使得浏览者对网站的印象强烈。

3．色彩的艺术性

网站设计也是一种艺术活动，因此必须遵循艺术规律。在考虑到网站本身特点的同时，应当按照内容决定形式的原则，大胆地进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。不同的色彩会产生不同的联想：蓝色想到天空、黑色想到黑夜、红色想到喜事等，选择色彩要和网页的内涵相关联。例如，下图为蓝色大气的APP应用产品网站。

4．色彩搭配的合理性

网页设计虽然属于平面设计的范畴，但又与其他的平面设计不同。它在遵循艺术规律的同时，还应当考虑人的生理特点。色彩搭配一定要合理，色彩和表达的内容气氛相适合，能给人一种和谐、愉快的感觉，要避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

3.2.3 网页中色彩的搭配

色彩在人们的生活中都是有丰富的感情和含义的。在特定的场合，同一种色彩可以代表不同的含义。色彩总的应用原则应该是“总体协调，局部对比”，就是主页的整体色彩效果是和谐的，局部、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。色彩具有象征性，例如，嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬；其次还有职业的标志色，例如，军警的橄榄绿、医疗卫生的白色，等等。色彩还具有明显的心理感觉，例如，冷、暖的感觉，进、退的效果，等等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在较大的差异。充分地运用色彩的这些特性，可以使网页具有深刻的艺术内涵，从而提升网页的文化品位。

1．色彩的搭配

（1）相近色

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

（2）互补色

色环中相对的两种色彩。对互补色调整一下补色的亮度，有的时候是一种很好的搭配。

（3）暖色

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

（4）冷色

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

（5）色彩均衡

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

|提示|

色彩的均衡包括色彩的位置，每一种色彩所占的比例、面积等。比如，鲜艳明亮的色彩面积应当小一点，让人感觉舒适、不刺眼，这就是一种均衡的色彩搭配。

下图所示的网站，虽然使用了多种颜色，但是各个颜色之间的合理搭配，让网站整体看起来很协调。

2．非彩色的搭配

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

3.2.4 网页元素的色彩搭配

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

1．网页导航条

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

2．网页链接

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

3．网页文字

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

4．网页标志

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

3.2.5 网页色彩搭配的技巧

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

1．使用单色

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

2．使用邻近色

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

3．使用对比色

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

4．黑色的使用

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

5．背景色的使用

背景的颜色不要太深，否则会显得过于厚重，这样会影响整个页面的显示效果。一般可采用素淡清雅的色彩，要避免采用花纹复杂的图片和纯度很高的色彩作为背景色。同时，背景色要与文字的色彩对比强烈一些。但也有例外，如黑色的背景衬托亮丽的文本和图像，会给人一种另类的感觉。

6．色彩的数量

一般初学者在设计网页时往往会使用多种颜色，使网页变得很“花”，缺乏统一和协调，缺乏内在的美感，给人一种繁杂的感觉。事实上，网站用色并不是越多越好，一般应控制在4种色彩以内，然后可以通过调整色彩的各种属性来产生颜色的变化，保持整个网页的色调统一。

7．要和网站内容匹配

应当了解网站所要传达的信息和品牌，进而选择可以加强这些信息的颜色。如在设计一个强调稳健的金融机构时，就要选择冷色系、柔和的颜色，像蓝、灰或绿，如果使用暖色系或活泼的颜色，可能会破坏该网站的品牌。

8．围绕网页主题

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

此外，白色是网站用得最普遍的一种颜色。很多网站甚至会留出大块的白色空间作为网站的一个组成部分，这就是留白艺术。很多设计性网站较多地运用留白艺术，给人一个遐想的空间，让人感觉心情舒适、畅快。恰当的留白对于协调页面的均衡会起到相当大的作用。

总之，色彩的使用并没有一定的法则，如果一定要用某个法则去套，效果只会适得其反。色彩的运用还与每个人的审美观、喜好、知识层次等密切相关。一般应先确定一种能体现主题的主体色，然后根据具体的需要应用颜色的近似和对比来完成整个页面的配色方案。整个页面在视觉上应该是一个整体，以达到和谐、悦目的视觉效果。