浅谈网页配色的方法

邓晨

摘要：该文简要介绍了色彩的基本知识，提出了网页色彩搭配的基本原理、技巧及内涵，最后明确了网页色彩配色的基本方法。

关键词：色彩；网页配色；网站；色彩搭配

中图分类号：TP311文献标识码：A文章编号：1009-3044(2012)02-0445-03

On the Method of Web Page Color Schemes

DENG Chen

(School of Agriculture Guangxi Yulin, Yulin 537000, China)

Abstract: This paper briefly introduces the basic knowledge of color, presents a webpage with color matching principle, technique and connotation, finally clear the web color basic method.

Key words: color; page of color; Website; color matching

我们的世界是五彩斑斓、多姿多彩的。在当今信息时代的飞速发展时期，网络对于人们生活的影响越来越大。人们不再局限于简单的文字与图片，在要求网页信息量丰富的同时，还要看上去漂亮、舒适。所以如今的设计者不仅要掌握基本的网站制作技术，还需要掌握网站的风格，配色等设计艺术。其中色彩在网站设计中占据相当重要的地位。

1色彩的基础知识

1.1色彩的一些基本概念

自然界色彩是多种多样的，比如玫瑰是红色的，大海是蓝色的，桔子是橙色的……但是最基本的有三种（红，黄，蓝），其它的色彩都可以由这三种色彩调和而成。我们称这三种色彩为“三原色”。

现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其它的色彩都属于彩色。任何一种彩色具备三个特征：色相，明度和纯度。其中非彩色只有明度属性。

色相，指的是色彩的名称。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。比如说紫色，绿色，黄色等等都代表了不同的色相。同一色相的色彩，调整一下亮度，或者纯度很容易搭配，比如，深绿，暗绿，草绿，亮绿。

明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些购物，儿童类网站。用的是一些鲜亮的颜色，让人感觉绚丽多姿，生气勃勃。明度越低，颜色越暗。主要用于一些游戏类网站，充满神秘感；一些个人站长为了体现自身的个性，也可以运用一些暗色调来表达个人的一些孤僻，或者忧郁等性格。有明度差的色彩更容易调和。如紫色（#993399）跟黄色（#ffff00），暗红（#cc3300）跟草绿（#99cc00），暗蓝（#0066cc）跟橙色（#ff9933）等。图1中的（1）就是明度由高到低变化的例子。

纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。如图1中的（2）是纯度从低到高的变化。

相近色，色环中相邻的三种颜色。如图2中的黄绿色，黄色和桔黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。

互补色，色环中相对的两种色彩。如图3中的亮绿色跟紫色，另外如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。就拿蓝色跟橙色来打个比方吧，看图4，调整了蓝色的亮度以后其搭配效果是不是更好呢？补色在网站设计中用得也极为普遍。

（1）明度变化（2）纯度变化

图1

图2相近色

图3互补色

图4补色亮度调节

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

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

图5暖色

图6冷色

色彩均衡，网站让人看上去舒适、协调，除了文字、图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适，不刺眼；这就是一种均衡的色彩搭配。

1.2色彩的联想

色彩在人们的生活中都是有丰富的感情和含义的。比如红色让人联想到玫瑰，联想到喜庆，联想到兴奋。白色让人联想到纯洁，干净，简洁；紫色象征着女性化，高雅，浪漫；蓝色象征高科技，稳重，理智；橙色代表了欢快，甜美，收获；绿色代表了充满青春的活力，舒适，希望等等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。

1.3黑白灰的运用

黑白灰是万能色，可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰。当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会收到意想不到的效果。

对一些明度较高的网站，配以黑色，可以适当地降低其明度。

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

2网页配色的基本知识

2.1网页色彩搭配的原理

1)色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

2)色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。

3)色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4)色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

5)网页色彩掌握的过程。随着网页制作经验的积累，我们用色有这样的一个趋势：单色→五彩缤纷→标准色→单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意的色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的网站。

2.2网页色彩搭配的技巧

1)用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(也就是将色彩变淡或则加深)，产生新的色彩，用于网页，这样的页面看起来色彩统一，有层次感。

2)用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。这样制作出来的整个页面色彩丰富但不花稍。

3)用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝；确定色彩的方法因人而异。

4)用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。在网页配色中，忌讳的是：（1）不要将所有颜色都用到，尽量控制在三种色彩以内。（2）背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

2.3网页色彩搭配的内涵

1)红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成视觉疲劳的色。

（1）在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

（2）在红色中加入少量的蓝，会使其热力减弱，趋于文雅、柔和。

（3）在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

（4）在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

2)黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和性格均会发生较大程度的变化。

（1）在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

（2）在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

（3）在黄色中加入少量的黑，其色感和性格变化最大，成为一种具有明显橄榄绿的复色印象。其性格也变得成熟、随和。

（4）在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

3)蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

（1）如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

（2）在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

4)绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

（1）在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

（2）在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

（3）在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

5)紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

（1）在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

（2）在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

（3）在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

6)白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

（1）在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

（2）在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

（3）在白色中混入少量的蓝，给人感觉清冷、洁净。

（4）在白色中混入少量的橙，有一种干燥的气氛。

（5）在白色中混入少量的绿，给人一种稚嫩、柔和的感觉

（6）在白色中混入少量的紫，可诱导人联想到淡淡的芳香

3网页色彩配色的基本方法

3.1确定网站的主题色

一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏。一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不至于单调，乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。

一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重。当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系，要体现什么样的效果。另外哪种因素占主要地位，是明度，纯度还是色相。

3.2页面各要素

在了解了颜色的一些基本概念及颜色的一些搭配方法后，在具体运用到网页中，各要素的色彩搭配主要体现在以下方面：

3.2.1背景与文字

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

当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块，是不是让你豁然开朗呢！此时他为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。

3.2.2 LOGO和BANNER

LOGO和BANNER是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢？我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。

3.2.3导航，小标题

导航，小标题是网站的指路灯。浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰，明了，层次分明。想往哪里走都不会迷失方向。

3.2.4链接颜色设置

一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。现代人的生活节奏相当快，不可能浪费太多的时间在寻找你网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标。

总之，为了你的页面更美观，更舒适，为了增强你的页面的可阅读性，必须合理，恰当地运用与搭配页面各要素间的色彩。

参考文献:

[1]吕永杰,张芸.任我虚拟——精美网页设计与产品全景设计[M].北京:希望电子出版社,2002.

[2]董黎明.Internet网页设计实用手册[M].上海:上海科学技术文献出版社,1999.

[3]权智殷，设计师谈网页色彩与风格[M].北京:电子工业出版社, 2005.

[4]曹金明，程超，王骏网页设计与配色[M].北京:红旗出版社,2005.

[5]李强华[译].Web Color Design:设计师谈网页配色（全彩）[J].I.R.I色彩研究所.