浅谈网页色彩的配色

王　萍

[摘要]在网页设计中，色彩有着不可或缺的重要地位。提出色彩运用应注意的原则、色彩搭配的建议，从美学角度探讨色彩在网页设计中的运用，以发挥色彩在网页中的视觉冲击作用，以高超的配色技巧大胆创新，创造出更时尚、更具吸引力的网页设计作品。

[关键词]网页设计 色彩 色彩搭配 视觉效果

中图分类号：TP3 文献标识码：A 文章编号：1671-7597（2009）0110124-01

色彩是艺术设计中重要的视觉元素之一，好的色彩搭配能够给人以强烈的视觉冲击力和艺术感染力，留下深刻的印象。

继书籍、报刊、广播、电视等媒体，网络成为新型传播信息的载体。在网页设计中也不例外，除文字、图像、版式设计、声音等元素外，色彩设计贯穿于以上各个元素之中，是不可或缺的重要元素。网页设计中色彩搭配肩负着浏览者是否有兴趣深入了解和阅读的重要任务。

一、网页色彩搭配作用

（一）突出主题：设计师可以利用色彩自身的表现力和情感，通过“色彩”这一无声的语言告诉读者所要表达的主题，使网页形式与内容相得益彰，体现网站特色和风格，突出主题。

（二）划分区域：网页内容丰富、信息量大、种类繁杂，设计者可以通过不同的色彩进行网页界面的视觉区域划分，按其功能、种类进行网页信息的分类划分，使网页有良好的易读性和视觉导向性。利用网页的色彩设计，可以给浏览者留下有序、完整的视觉印象。

（三）吸引视线：“远看色彩近看花，先看颜色后看花，七分颜色三分花”，打开网站首先吸引浏览者的并不是漂亮的版式、有价值内容，而是整个网页的色彩设计，因此，网页的色彩搭配不但可以留下深刻印象而且能够起到吸引视线的作用。

二、网页色彩搭配原则

（一）整体性：网页色彩要保持用色的整体性。同一个网站的不同页面能够大面积或小面积的使用同一色彩，甚至是一个小标志，通过色彩给浏览者一个说明，告知浏览者这几个页面之间的联系，因而产生韵律、和谐之美。

（二）适应性：色彩本身有自己的情感，不同的色彩能够表达不同的心理感受，色彩的选择应有针对性，要针对自身的特点，选择与主题相一致的色彩。

不同的类型的网站选择不同的色彩，例如教育机构类网站一般选择冷色系，以蓝色、灰色居多，表达一种含蓄、睿智，有一种内敛的、浓浓的书香气息；再例如面对大众服务的咨询类、娱乐类、搜索服务类网站大多以饱和、鲜艳的色彩为主。不同行业的网站用色也能够体现其行业的特征，比如航空航天类网站同样也是以象征天空的蓝色为背景色；儿童类网站以色彩丰富的鲜艳色彩为主。同样，网页的色彩还要迎合浏览者的喜好，尽可能的采用符合浏览者审美倾向的色彩，以吸引其注意力。

（三）独特性：在芸芸众生的互联网中，要想给浏览者留下深刻印象，能够脱颖而出，就必须具备与众不同的色彩设计，从而形成自己的风格与个性。在内容决定形式的基础上，对网页的色彩搭配进行大胆的尝试与创新，使色彩的独特性充分发挥魅力，创造出个性鲜明的网页。在一些个人网站上有时会见到采用反差强烈的黑、白两色搭配的网页，产生了视觉张力，表达鲜明的个性。

三、网页中色彩的配置

（一）主色与辅色：主体色应用在网页设计中，可能是静态的结构色彩、背景颜色、表格颜色，也可能是即时变化的插图、照片、动画广告。网页设计的颜色并不是越多越好，如果使用多种颜色会使整个页面变得很“花哨”缺乏内在的美感，色彩一般控制在三种以内，通过调整色彩的相关属性来产生变化。并且以一种颜色作为主体色彩并配以辅色，主体色彩就是具有行业特色的颜色。色彩搭配不仅体现着美学的诉求而且是可以强化的识别信号，能够使浏览者加强对企业形象识别系统地认识。比如：可口可乐公司以红色作为其公司的主体色，百事可乐则以蓝色作为其公司的主体色。

（二）色彩的对比调和

1.运用色彩对比，强调视觉中心，突出主题。通常有明度对比、纯度对比、色相对比、冷暖对比、面积对比，其中色相对比是最生动、效果最强烈的一种对比。比如：红色与绿色，黄色与紫色、蓝色与橙色等，色相对比关系越清晰，视觉效果就越强烈。运用对比强调视觉中心，一般来说，页面中的导航色彩、静态框架色彩比较重要，其次是信息区的背景色彩以及文字的色彩；如微软的页面设计就采用了对比比较强烈的蓝色和红色。

2.运用调和统一美化页面效果。色彩的调和方法有：隔离调和、近似调和、同一调和、秩序调和等等，比如红色和蓝色是两个对比强烈的颜色，分别加上黄色，变成橙色和绿色，使视觉效果达到调和。色彩的对比和统一是相互对立的两个方面，既相互矛盾又相辅相成，当色彩搭配和谐时，视觉上有审美快感。

网页色彩设计总的遵循的原则就是：对立中统一，具体有以下几种手法：

1.同类色对比：运用同一色相，改变色彩的明度对比、纯度对比，例如深浅不同的蓝色搭配在一起，或是红色、橘红色的同一色相搭配在一起，对比不强烈，使页面容易达到统一和谐的效果，这也是比较常见的配色方法。同一色相，明度和纯度对比相似的会营造出色调柔和、神秘、深沉幽暗的不同氛围。如联想集团的蓝色系列、海尔集团的绿色系列；同一色相，明度和纯度对比强烈的配色能够营造出活泼、有趣、轻快的氛围。

2.邻近对比：即色谱中邻近颜色的对比，比如蓝色和紫色、黄色和橙色等，这种搭配色彩丰富而不花哨，如荷兰博物馆的网页色彩以蓝色和紫色为主。

3.对比色对比：以一种颜色为主体色，再辅以对比色加以点缀于装饰。色相对比色对比，明度和纯度对比相似的配色也能够达到柔和的网页设计效果。色相对比色对比，明度和纯度对比强烈的配色会营造出具有强烈的变化感和视觉落差的效果。强烈的色彩对比可以加深印象，产生特殊的色彩情感。为了能够产生统一和谐的效果可以适当的调整色彩分布的面积、位置等。柯达公司运用蓝色与黄色体现该公司的快乐与迅速的一贯形象。

4.无彩色和有彩色配色：无彩色通常指黑、白、灰。无彩色与有彩色进行搭配也是常见的配色形式。当网站采用多种不同色相或在画面中包含强烈色彩时，都可以加入黑色，来稳住这些跳跃的色彩，使页面和谐，以达到统一的视觉效果。一个名为progression的有关音乐俱乐部的网页就是在深灰的背景下，配上鲜亮的黄绿色与湖蓝色，整个页面效果和谐响亮。通常在网络上，以白色和灰色作为背景色比较常见，因为它们对视觉没有刺激，适合阅读。人们总是忽略它们，其实白与灰在协调各种色彩的关系上起了很大的作用，可以分割色彩，使对比弱化，以便容易在视觉上统一。

（三）背景色与文字：背景一般采用素淡清雅的颜色，避免使用花纹繁杂和高纯度的色彩，同时背景要与文字的色彩有足够的明暗对比，才能达到视觉清晰的效果。

参考文献：

[1]梁景洪，网站设计与网页配色实例精讲[M].北京：人民邮电出版社.

[2]张帆、罗琦、宫晓东，网页界面设计艺术教程[M]北京：人民邮电出版社.

[3]李莉婷，色彩构成[M].武汉：湖北美术出版社.