《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——1.8　网页配色技巧

本节书摘来自异步社区《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》一书中的第1章，第1.8节，作者： 安道通 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.8　网页配色技巧

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

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

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

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

采用纯白色的字效果最好。

采用橘黄色的字效果也好。

采用浅黄色的字效果也好。

采用蓝颜色的字效果较差。

采用暗红色的字效果较差。

采用紫色的字效果也较差。
如图1-29所示黑色背景的网页，文字采用浅黄色，效果比较好。

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

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

（1）选择相邻两色搭配

相邻色的配色技巧如下。

若一种颜色纯度比较高，另一种颜色就需要选择纯度低或明度低的。当你调节了颜色相互作用的力量，色彩之间有主次关系搭配效果自然就和谐了。如图1-31所示相邻色搭配的网页。
可以先选定一种色相，通过调整它的明度或纯度值，得到另一色彩后，将两者搭配。
（2）选择对比色搭配

对比色搭配的网页中，面积要有区别，可适当调整其中一种颜色的明度或饱和度，图1-32所示为对比色搭配的网页。