本节书摘来自异步社区《网页美工设计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所示为对比色搭配的网页。

