網站設計中配色技巧

顏色基礎知識

我們知道，人們視為“可見”的光可以分解為從藍色到紅色的一個漸進的彩虹光譜帶。

圖 1. 可見光譜

我們還見過（也許還用過）色環，色環顯示如何通過混合兩種或更多顏色來產生特定的顏色。色環實質上就是在彩色光譜中所見的長條形的色彩序列，只是將首尾串連在一起，使紅色串連到另一端的紫色。

圖 2. 色環

色環通常包括 12 種不同的顏色（）。雖然畫家對色環和顏色理論的重要方面已十分瞭解，但我們當中的一些程式員卻可能不十分清楚，這種理解上的不足會把事情弄得一團糟。

基色

圖 3. 基色

按照定義，基色是最基本的顏色，通過按一定的比例混合基色可以產生任何其它顏色。為了識別基色，首先需要確切知道使用的是何種媒介。您可能在小學裡學到基色有紅、黃、藍，但現在我們大多是用紅、綠、藍作為基色進行顏色顯示。我想這不足為奇。

但如果您使用彩色噴墨印表機，請開啟機蓋看看墨盒。是否看到了紅、綠、藍？沒有。您可能看見有四種墨水：青色、品紅色、黃色及黑色。顏色不同是因為電腦顯示器使用加色，而印表機使用減色。顯示器發射彩色光線，而紙張上的墨水則從它反射的光中吸收了某種顏色。有關此話題的更多論述將超出本文範圍，但如想瞭解更多一點的資訊，請訪問下面兩個連結：

• 加色合成（英文）， 由 Jim Scruggs 供稿

• 減色合成（英文）， 由 Jim Scruggs 供稿

除發射和吸收光線的不同外，本文討論的概念適用於加色和減色兩種模式—但根據我們的目的，我們將重點討論加色模式，在這種模式中，基色為紅、綠、藍。

次生色

圖 4. 次生色

為了建立色環，下面我們希望瞭解通過混合任何兩種鄰近的基色獲得的三種顏色。這些顏色即次生色：青、品紅和黃。咦，我們不是談到過這三種顏色嗎？是的，加色法中的次生色就是減色法中的基色。由此您可以推斷出，減色法中的次生色也就是加色法中的基色。這就是加色模式和減色模式之間的相互關係。

三次色

圖 5. 三次色

建立色環的最後一步是，再次找到現已填入色環的顏色之間的中間色。幸運的是，這些三次色對於加色法和減色法都是相同的。既然我們已經定義了在 12 點色環中使用的顏色，那麼就可以討論這些顏色之間的相互關係。

相似色

圖 6. 相似色

相似色是指在給定顏色旁邊的顏色。如果您以橙色開始並想得到它的兩個相似色，就選定紅色和黃色。使用相似色的色彩配置可以提供顏色的協調和交融，類似於在自然界中所見到的那樣。

互補色

圖 7. 互補色

也稱為對比色。互補色在色環上相互正對。如果希望更鮮明地突出某些顏色，則選擇對比色是有用的。如果您在製作一幅檸檬的圖片，使用藍色的背景將使檸檬更突出。

分列的互補色

圖 8. 分列的互補色

分列的互補色可由兩種或三種顏色構成。選擇一種顏色，在色環的另一邊找到它的互補色，然後使用該互補色兩邊的一種或兩種顏色。

三色組

圖 9. 三色組

三色組是色環上等距離的任何三種顏色。在色彩配置中使用三色組時，將給予觀察者某種緊張感，這是因為這三種顏色均對比強烈。基色和次生色均是三色組。

暖色

圖 10. 暖色

暖色由紅色調構成，如紅色、橙色和黃色。這種顏色選擇給人以溫暖、舒適、有活力的感覺。這些顏色產生的視覺效果使其更貼近觀眾，並在頁面上更顯突出。

冷色

圖 11. 冷色

冷色來自於藍色調，如藍色、青色和綠色。這些顏色使色彩配置顯得穩定和清爽。它們看起來還有遠離觀眾的效果，所以適於做頁面背景。

請注意，您可能發現這些顏色組在不同的書籍中所指的內容並不相同，但只要理解了基本原理，它們就都可以理解。

這使我最終進入到我想討論的主要概念，這就是對比。

利用對比

對比是兩種相鄰顏色之間感覺到的區別。由於白色和黑色不是真正的顏色，它們被說成是表現了非彩色的對比。黑色和白色也表現了最強烈的對比。色環中的互補色表現出大的彩色對比。人眼對非彩色的對比比對彩色的對比更敏感，這就是在您增加壓縮係數時 .jpg 壓縮演算法先去除彩色資訊而後再去除黑白資訊的原因。

圖 12. 黑色與白色：非彩色的對比條

圖 13. 使用藍色的單色對比條

當您使用一種顏色，然後增加或減少其亮度時，即建立起單色對比。

對比在 Web 設計中非常重要。使用對比有多種不同的方法，所有這些方法都基於上述的另一種顏色概念。每個人都明白，白色背景下的黑色文本最容易觀看，這是您看到的大多數印刷材料都是白背景下的黑色文本的部分原因。同樣地，黑底白字的對比也很強，但閱讀起來比較困難，因為黑色給人感覺比白色沉重，有鑒於此，請盡量少用。

圖 14. 高對比顏色組合

暖色和冷色產生同樣的效果。暖色給人略微突出螢幕的感覺，而冷色則顯得凹進螢幕。這意味著暖色/黑色最適合作為文本，而冷色/白色最適合作為背景。然而，這種方法也不是一成不變的。下面我們來看一個簡單的例子，其中選擇了兩個對比色，使用一個作為背景而另一個作為文本。

圖 15. 互補色組合

您會注意到效果非常差。這兩種顏色對比不鮮明，它們幾乎滲透在一起。這顯然不是個好的組合。還是保持顏色基本相同，而調整其亮度/暗度，使它們區分得更明顯。

圖 16. 修改後的顏色組合

可以看到這是一個好得多的組合，它表明在考慮對比時有一點很重要：不僅僅要在分析的意義上考慮，還要從視覺的角度考慮。

這些顏色和對比的應用對於在背景映像上疊加文本也許是最重要的。使用這些對比概念時，必須切記，頁面上的文本部分必須與背景映像中的所有顏色足以形成強烈的對比。例如，如果簡單地使用上述的一套三色組，您就能使這三種互相對比的顏色在頁面上爭奇鬥豔。

圖 17. 三色組組合；背景映像上的文本

一種更好的方法是使用一套分列的互補色，使用相似色作為背景，而文本使用互補色。這樣，背景顏色將適當地融合到一起而不致引起對它們本身明顯的注意，而文本將顯得突出。

圖 18. 分列的互補色組合；在背景映像上的文本

懂得顏色理論在您為網站選擇顏色基調時也會發生作用。根據您對背景顏色、導航組件和不同文本風格的需要，您可以從色環中選擇出高對比的圖案。然後，使用類似於我的安全調色盤計算表（英文）的某種工具，就可以輕鬆地選擇較暗的/較亮的顏色，將元素之間的對比增加到適當的水平。有許多組合適合於您的頁面，它們使色彩得到激動人心的使用，而不致讓使用者頭疼。所以，把那些止痛片放到一邊去吧，還是多花一點時間考慮一下在 Web 網站上如何使用顏色。