网页的色彩搭配

第四节　网页的色彩搭配

有了好的框架和页面设计，而色彩把握不准，也会导致整个设计失败。色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩和谐的重要性是不言而喻的。如何做好色彩的搭配呢？

一、色彩代表的含义

我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色（如蓝色）给人的感觉是安静、冰冷；而暖色（如红色）给人的感觉是热情、温暖。冷暖色的巧妙运用可以让网站产生意想不到的效果。

色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：

◇ 红色代表热情、活泼、热闹、温暖、幸福、吉祥。

◇ 橙色代表光明、华丽、兴奋、甜蜜、快乐。

◇ 黄色代表明朗、愉快、高贵、希望。

◇ 绿色代表新鲜、平静、和平、柔和、安逸、青春。

◇ 蓝色代表深远、永恒、沉静、理智、诚实、寒冷。

◇ 紫色代表优雅、高贵、魅力、自傲。

◇ 白色代表纯洁、纯真、朴素、神圣、明快。

◇ 灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞。

◇ 黑色代表崇高、坚实、严肃、刚健、粗莽。

二、色彩搭配的原则

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

1. 色彩鲜明

一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。

2. 色彩独特

一个网站的用色必须要有自己独特的风格，有与众不同的色彩，这样才能给浏览者留下深刻的印象。

3. 色彩搭配合理

色彩要根据主题来确定，不同的主题选用不同的色彩。网页设计虽然属于平面设计的范畴，但它又与其他平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。例如，用蓝色体现科技型网站的专业，用粉红色体现女性网站的柔情。

4. 讲究色彩艺术

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

三、色彩搭配的方法

网页色彩搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配会让访问者浮躁不安。

1. 使用单色

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

2. 使用邻近色

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

3. 使用对比色

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

4. 使用暖色

暖色色彩搭配是指使用红色、橙色及黄色等色彩搭配。这种色调的运用可为网页营造出稳定、和谐和热情的氛围。

5. 使用冷色

冷色色彩搭配是指使用绿色、蓝色及紫色等色彩搭配。这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色与白色搭配一般会获得较好的视觉效果。

6. 黑色的使用

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

7. 背景色的使用

背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。

8. 色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。

四、色彩的实用分析与搭配

（一）红色

1. 分析

红色色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动。红色在各种媒体中被广泛的运用，除了具有较佳的明视效果外，更被用来传达具有活力、积极、热诚、温暖以及前进等含义的企业形象与精神。另外，红色也常被用作警告、危险、禁止、防火等标识色。

2. 搭配

单纯以红色为主色调的网站较少，多用作辅助色，以达到陪衬、醒目的效果。红色与少量黄色搭配，会使其热力强盛，趋于躁动、不安，极富动感和张扬的个性。红色与黑色的搭配在商业设计中被誉为商业成功色，在网页设计中也比较常见，常用于较前卫时尚、个性的娱乐休闲区网页中。红色与灰色、黑色等暗色调搭配使用，给人以现代、激进的感觉。粉红色多用于女性主题，如化妆品、服装等，鲜嫩而充满诱惑，容易营造出柔情、娇媚、温柔、甜蜜、纯真、诱惑和艳丽等气氛。

（二）黄色

1. 分析

黄色是最明亮的色彩，因此常给人留下明亮、辉煌、灿烂、愉快、高贵和柔和的印象，同时又容易引起味觉上的条件反射，给人以甜美和香酥感。黄色有着金色的光芒，有希望与功名等象征意义，还代表着土地，象征着权力，并且还带有神秘的宗教色彩，黄色是明亮的且可以给人甜蜜和幸福感的颜色，在很多设计作品中黄色都被用来表现喜庆的气氛和华丽的商品。

2. 搭配

黄色是在网页配色中使用最为广泛的颜色之一，黄色与其他颜色配合很活泼，有温暖感，代表快乐、希望、智慧和轻快。黄色比较适合活泼跳跃、色彩绚丽的配色方案。高亮度的黄色与黑色相结合可以得到清晰整洁的效果，这种配色在网页设计中经常会见到。在配色时，黄色与绿色搭配会显得很有朝气和活力。通常，在商品网站中使用黄色与红色搭配来渲染热闹气氛。淡黄色几乎能与所有的颜色相搭配，但如果要达到醒目的效果，则不能将淡黄色放在其他的浅色上，尤其是白色，因为它将会是什么也看不见，深黄色一般不与深红色及深紫色相搭配。

（三）蓝色

1. 分析

蓝色给人以沉稳的感觉，具有深远、永恒、沉静、博大、理智、诚实和寒冷的意象。同时，蓝色还能够营造出和平、淡雅、洁净及可靠等氛围。在商业设计中强调科技、商务的企业形象时，大多选用蓝色当标准色。蓝色是冷色系中最典型的代表，是网站设计中运用最多的颜色。蓝色会使人自然联想起大海和天空，所以会使人产生一种爽朗、开阔和清凉的感觉。

2. 搭配

浅蓝色具有淡雅、清新、浪漫和高贵的特性，常被用于化妆品、女性、服装网站的设计中。浅蓝色和绿色、白色的搭配在网页中是比较常见的，它们之间的搭配可以使页面看起来非常干净、清澈，能体现出柔顺、淡雅和浪漫的气氛。蓝色是冷色系中最典型的代表，而黄色、红色是暖色系中的最典型的代表，冷暖色系对比度大，较为明快，很容易感染、带动浏览者的情绪，具有很强的视觉冲击力。深蓝色是沉稳的且较常用的色调，能给人以沉稳、冷静、严谨和成熟的心理感受。它主要用于营造安稳、可靠及略带神秘感的氛围，一般用于企业宣传类网站的设计中。

（四）绿色

1. 分析

绿色所传递的是清爽、理想、希望和生长的意象，较符合服务业、卫生保健业、教育行业、农业类网页设计的要求。绿色通常与环保意识有关，也经常使人联想到有关健康方面的事物。绿色与人类息息相关，是自然之色，代表了生命与希望，也充满了青春与活力。它生机勃勃，象征着生命。所以，常用于与自然、健康相关的站点。此外，绿色还常用于一些公司的儿童站点或教育站点。绿色具有黄色和蓝色两种成分，绿色的性格最为平和、安稳，是一种柔顺、恬静、满足及优美的色彩。

2. 搭配

绿色在黄色和蓝色之间，属于较中庸的颜色，是和平色，偏向自然美，宁静、生机勃勃、宽容，可与多种颜色搭配而达到和谐的效果，也是网页中使用最为广泛的颜色之一。绿色与红色、蓝色与黄色两组对比色搭配在一起，虽然听起来好像颜色很杂，但是只要协调搭配，就能起到意想不到的效果。适当运用不同纯度的深绿色和浅绿色并不刺目，反而可使页面看起来很有朝气和活力。

（五）紫色

1. 分析

紫色具有创造、谜、忠诚、神秘及稀有等内涵，象征着女性化，代表着高贵和奢华、优雅与魅力，也象征着神秘与庄重、神圣和浪漫。紫色通常被用于以女性为对象或以艺术品介绍为主的站点，但很多大公司的站点中也喜欢使用蕴含着神秘、尊贵和高尚的紫色。

2. 搭配

紫色加入少量的白色，就会成为一种十分优美、柔和的色彩。随着白色的不断加入，也就不断产生不同层次的淡紫色，可使紫色的沉闷性格消失，变得优雅、娇气，并充满女性魅力。不同色调的紫色可以营造出非常浓郁的女性化气息，而且在灰色这一突出颜色的衬托下，紫色可以显示出更大的魅力。紫色与紫红色都是非常女性化的颜色，给人的感觉都是浪漫、柔和、华丽和高贵优雅，特别是紫红色更是女性化的代表颜色。高彩度的紫红色可以表现出超凡的华丽，而低彩度的紫红色可以表现出高雅的气质。紫色配合卡通人物，可以使页面具有非常强烈的现代感，给人以更深刻的印象。

（六）橙色

1. 分析

橙色是十分活泼的光辉色彩，是最暖的色彩，给人以华贵而温暖、兴奋而热烈的感觉，也是令人振奋的颜色，橙色具有健康、活力、勇敢和自由等象征意义，能给人以庄严、尊贵、神秘等感觉。橙色会使人联想到金色的秋天以及丰硕的果实，因此是一种富足、快乐而幸福的色彩。橙色适用于对视觉要求较高的时尚网站，也常被用于对味觉要求较高的食品网站，因橙色也是容易引起食欲的颜色。

2. 搭配

橙色可以通过变换色调营造出不同氛围的典型颜色，它既能表现出青春的活力，又能实现稳重的效果，所以橙色在网页设计中的使用范围是非常广泛的。使用了高亮度橙色的网页通常都会给人一种明朗和新鲜的感觉，而将浅黄色、黄色、黄绿色等邻近色与橙色搭配使用，通过不同明度和纯度的变化可以得到更为丰富的色阶，通常都能得到非常好的视觉效果，只要在视觉上处理得井然有序，将会使整个页面看起来华丽、新鲜、充满活力。通过将浅绿色、浅蓝色、蓝色与橙色搭配使用，可以构成最明亮、最欢乐的色彩。橙蓝对比色比较少见，给人印象深刻，使人很容易记住它。

（七）白色

1. 分析

白光是所有颜色光线的集合，白色反射所有的光线，不吸收任何可见光，因此白色被作为纯粹、虚无、轻盈、光明及金属的象征。在商业设计中，白色具有洁白、明快、纯真和清洁的意象。白色是网页设计中通用的颜色，它具有容易突出彩度的特性，当一个页面设计未使用白色时，往往会感觉空间减弱，容易造成彩度不够明确、页面沉闷等反应。

2. 搭配

白色通常与其他色彩搭配使用。黑色与白色表现出了两个极端的亮度，这两种颜色搭配使用通常可以表现出都市化、现代的感觉。因为黑白搭配给人以特殊的严肃感，所以也常用于庄重的场合。

（八）黑色

1. 分析

黑色的内涵最为丰富和复杂，黑色具有很强的感染力，能够表现出特有的高贵，显得严肃、庄严和坚毅。另外，黑色还具有恐怖、烦恼、忧伤、消极、沉睡、悲痛甚至死亡等意象。黑色用在宗教网站中显出严肃和庄严。

2. 搭配

黑色是一种流行色，适合于许多色彩搭配。黑色还具有高贵、稳重、科技的意象，是许多科技网站的主色调，配合其他辅助色营造出科技的神秘感。另外，在一些音乐网站中也常常用黑色为主色调，营造出炫酷的氛围。

（九）灰色

1. 分析

灰色介于黑色与白色之间，属于中午明度。灰色是色彩中最被动的色彩，受彩色的影响极大，靠邻近的色彩获得生命。灰色若靠近鲜艳的暖色，就会显出冷静的品格；若靠近冷色，则变为温和的暖灰色。灰色是视觉中最安静的色彩，有很强的调和对比作用。

2. 搭配

灰色是中性色，可以与任何色彩搭配，也可以帮助两种对比强烈的色彩实现和谐过渡。在许多高科技产品，尤其是与金属材料有关的产品中，几乎都采用灰色来展现高科技的形象。灰色也是网页设计中较为流行的颜色。