2024年4月15日发(作者：)

制作网页时色彩搭配

一、色彩的三个属性

色相 ( Hue )－也称为色度，可以想成特定波长的可见光，也就是平常我们讲的红色、

蓝色、草绿...等，

色相环-->

明度：可以理解为颜色的亮度，不同的颜色具有不同的明度，例如黄色就比蓝色的明

度高，

在一幅画中要合理安排不同明度的色块。

例如，如果天空比地面明度低，就会产生压抑的感觉。

黄色的明度最高，紫色最低。

同一色相的明度也有深浅变化，如绿色由浅到深有粉绿、淡绿、翠绿等明度变化。

所谓的饱和度，指的其实是色彩的纯度，也叫彩度。纯度越高，表现越鲜明，纯度较

低，表现则较黯淡，在英文中，Saturation 及 Chroma 讲的是同一回事。

色彩的纯度强弱是指色相感觉明确或含糊，鲜艳或浑浊的程度。

高纯度色相加白或黑可以提高或减弱它的明度，但都会降低他们的纯度。对比色混合，

最易降低纯度。

黑白灰无彩度，只有明度。也称为中性色。这种颜色通常很柔和色彩不那么明亮耀眼。

中性色是介于三大色红黄蓝之间的颜色，不属于冷色调也不属于暖色调。

三原色：红、黄、蓝

基础色：红橙黄绿蓝靛紫

二、色调：指的是一幅画中画面色彩的总体倾向，是大的色彩效果。

1、举例：大自然中，我们经常会看到这样一种现象，不同颜色的物体被笼罩在一片金

色的阳光之中，或被笼罩在一片轻纱薄雾中，淡蓝色的月光之中，或被统一在冬天的银白

色世界里。这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体都带有同一

色彩倾向，这样的色彩现象就是色调。

2、

色调不是颜色的属性。

一副绘画作品虽然用了多种颜色，但总体有一种倾向，是偏蓝还是偏红，是偏冷还是

偏暖。这种颜色上的倾向就是一副绘画的色调。

通常可以用色相，明度，纯度，冷暖来定义一幅画的色调。

3、色调的象征意义

暖色调。即红色、橙色、黄色、赭色等色彩的搭配，可使主页呈现温馨、和煦、热情

的氛围。

冷色调。即青色、绿色、紫色等色彩的搭配，可使主页呈现宁静、清凉、高雅的氛围。

对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、

橙与蓝等的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比

色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小

对比”这一个重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强

烈对比。

三、网页制作时颜色搭配

我们通常的做法是：要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术

语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜

色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就

要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明

度变化”。有些主页，底色是黑的，但文字也选用了较深的色彩，由于色彩的明度比较接近，

读者在阅览时，眼睛就会感觉很吃力，影响了阅读效果。当然，色彩的明度也不能变化太

大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

四、色彩的象征

也要考虑色彩的象征意义。颜色得配置，可以流露你的心情和喜好，也会暴露你对颜

色的驾驭程度。

在色彩的运用上，可以根据主页内容的需要和自己的喜好，分别采用不同的主色调。

因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、

秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有

明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民

族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用

色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

暗色中含高亮度的对比，会给人清晰、激烈、很有强烈的刺激如深黄到刺黄色;暗色中

间含高亮度的对比，会给人沉着、稳重、深沉的感觉，如深红中间是刺红;中性色与低亮度

的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰、

纯色与高亮度的对比，给人跳跃舞动的感觉。如黄色与白色的;

纯色与低亮度的对比，给人轻柔、欢快的感快。如浅蓝色与白色;

纯色与暗色的对比，给人强硬，不可改变的感觉。

以下是部分色彩的象征意义

>>色彩的心理感觉

不同的颜色会给浏览者不同的心理感受。每种色彩在饱和度，透明度上略微变化就会

产生不同的感觉。

红色：强有力，喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神

体现，愤怒，热情，活力的感觉

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

黄色：亮度最高，有温暧感，具有快乐、希望、智慧和轻快的个性，给人感觉灿烂辉

煌

绿色：介于冷暖色中间，显得和睦，宁静，健康，安全的感觉。和金黄、淡白搭配，

产生优雅，舒适的气氛。

蓝色：永恒、博大，最具凉爽、清新，专业的色彩。和白色混合，能体现柔顺，淡雅，

浪漫的气氛，给人感觉平静、理智

紫色：女孩子最喜欢这种色，给人神秘、压迫的感觉

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

白色：具有洁白，明快，纯真，清洁的感受

灰色：具有中庸，平凡，温和，谦让，中立和高雅的感觉

黑、白色：不同时候给人不同的感觉，黑色有时感觉沉默、虚空，有时感觉庄严肃穆。

白色有时感觉无尽希望，有时却感觉恐惧和悲哀。

五、网页色彩搭配的原理

 原理

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

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

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

柔性。

4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色

想到喜事等，选择色彩要和你网页的内涵相关联。

 网页配色忌讳

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(尽量不要用花纹繁复的图案和纯度很高的色彩作背

景)，以便突出主要文字内容。

 色彩搭配要注意的问题

1.使用单色

尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度

和透明度也可以产生变化，使网站避免单调。

2.使用邻近色

所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近

色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。

3.使用对比色

对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色

鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点

睛的作用。

4.黑色的使用

黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑

色一般用来作背景色，与其它纯度色彩搭配使用。

5.背景色的使用

6.色彩的数量

六、背景与字体的搭配经验

BGCOLOR=“＃f1fafa”>>//做正文的背景色好，淡雅

BGCOLOR=“＃E8FFE8” //做标题的背景色好，与上面的颜色搭配很协调

这两种颜色可以配黑字或FONT COLOR=“＃800080”

bgcolor=“＃E8E8FF”>>//做正文的背景色好，字体配黑色较好

bgcolor=“＃8080C0”>>//上配黄色白色字体较好

bgcolor=“＃E8D098” //上搭配浅蓝色或蓝色字体较好

bgcolor=“＃EFEFDA” //上搭配浅蓝色或红色字体较好

bgcolor=“＃F2F1D7”//配黑字素雅,红字醒目

bgcolor=“＃336699” //配白字做标题较好

bgcolor=“＃6699CC”和bgcolor=“＃479AC7”和bgcolor=“＃66CCCC"和

bgcolor=“＃00B271”和bgcolor=“＃B45B3E”配白字都较好看//可做标题

bgcolor=“＃FBF8EA"和bgcolor=“＃D5F3F4"和bgcolor=“＃D7FFF0"和

bgcolor=“＃F0DAD2"和bgcolor=“＃DDF3FF"配黑字都较好看 //一般做正文以上配

色方案都比较淡雅。

浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，

较深底色配黄字有效果。