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 色彩的數量不超過三種