2.5 网页配色技巧

网页配色很重要，网页颜色的搭配好坏与否直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不好的色彩搭配则会让访问者浮躁不安。下面就来讲述网页色彩搭配的技巧。

2.5.1 背景与文字颜色搭配

文字内容和网页的背景色对比要突出，底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。如图2-35所示就是背景与文字颜色搭配合理的一个示例。

图2-35 背景与文字颜色搭配合理

如图2-36所示就是网页背景与文字适合的搭配色。

图2-36 网页背景与文字适合的搭配色

★白色背景★
采用纯黑色的字效果最好。
采用蓝色的字效果也很好。
采用红色的字效果也不错。
采用浅黄色的字效果较差。
采用浅灰色的字效果也差。
采用绿色的字效果也较差。

如图2-37所示是白色背景的网页，黑色的文字效果就比较好，灰色的文字效果不是很好。

图2-37 白色背景的网页

★蓝色背景★
采用纯白色的字效果最好。
采用橘黄色的字效果也好。
采用浅黄色的字效果也好。
采用暗红色的字效果较差。
采用黑色的字效果也较差。
采用紫色的字效果也不好。

如图2-38所示蓝色背景的网页，白色的文字效果就比较好，黑色或灰色的文字效果不是很好。

图2-38 蓝色背景的网页

★黑色背景★
采用纯白色的字效果最好。
采用橘黄色的字效果也好。
采用浅黄色的字效果也好。
采用蓝颜色的字效果较差。
采用暗红色的字效果较差。
采用紫色的字效果也较差。

如图2-39所示就是黑色背景的网页，文字采用浅黄色，效果比较好。

图2-39 黑色背景的网页

2.5.2 使用一种色彩

同种色彩搭配是指首先选定一种色彩，然后调整透明度或饱和度，将色彩变淡或加深，产生新的色彩。这样的页面看起来色彩统一，有层次感，如图2-40所示就是使用同一种色彩的示例。

图2-40 同种色彩搭配

2.5.3 两色搭配是用色的基础

色彩搭配就是色彩之间的相互衬托和相互作用，两色搭配是用色的基础。那么怎样选择两色搭配呢？

1．选择相邻两色搭配

如图2-41所示就是相邻的两种色，相邻色的配色技巧如下。

图2-41 相邻的两种色

•一种颜色纯度比较高的时候，另一种颜色选择纯度低或明度低的。当你调节了颜色相互作用的力量，色彩之间有主次关系搭配效果自然就和谐了，如图2-42所示就是相邻色搭配的网页。

图2-42 相邻色搭配的网页

•可以将选定的同一色相，仅仅调整它的明度或纯度值，得到另一色彩后，将两者搭配。

2．选择对比色搭配

如图2-43所示就是对比色。对比色搭配的网页中，不同的区域要有区别，可适当调整其中一种颜色的明度或饱和度，如图2-44所示就是对比色搭配的网页。

图2-43 对比色

图2-44 对比色搭配的网页

2.5.4 色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。只要控制在不超出三种色相的范围即可，设计用色是越少越好，如图2-45所示就是色彩的数量不超过三种。

图2-45 色彩的数量不超过三种