上個月，本人提供了一些關(guān)于在 Web 站點上使用顏色和圖像的介紹性信息。這個專欄討論了一些基本技術(shù)方面的問題，如頁面編碼、.jpg 格式與 .gif 格式之間的不同以及其它一些對“程序員”來說可能已經(jīng)很熟練的主題。但這些主題對于一位圖形藝術(shù)家來說，則可能感到某些不習慣，因為圖形藝術(shù)家總是習慣于全面地控制作品的色彩和構(gòu)圖。在這次的文章中，我打算稍微變換一下方向，討論一下圖形藝術(shù)家耳熟能詳?shù)念伾?，而程序員在這方面可能要重溫一下。事實上，我發(fā)現(xiàn)許多站點未能正確應(yīng)用這些原理，由此可見有許多程序員需要對這些概念進行進一步的了解。

雖然本文的主要目標是討論一種顏色與另一種顏色相互作用時的一些特性，但首先還需要講一些初級知識，以使我們的起點相同。

顏色基礎(chǔ)知識

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

圖 1. 可見光譜

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

圖 2. 色環(huán)

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

基色

圖 3. 基色

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

但如果您使用彩色噴墨打印機，請打開機蓋看看墨盒。是否看到了紅、綠、藍？沒有。您可能看見有四種墨水：青色、品紅色、黃色及黑色。顏色不同是因為計算機顯示器使用加色，而打印機使用減色。顯示器發(fā)射彩色光線，而紙張上的墨水則從它反射的光中吸收了某種顏色。有關(guān)此話題的更多論述將超出本文范圍，但如想了解更多一點的信息，請訪問下面兩個鏈接：

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

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

次生色

圖 4. 次生色

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

三次色

圖 5. 三次色

建立色環(huán)的最后一步是，再次找到現(xiàn)已填入色環(huán)的顏色之間的中間色。幸運的是，這些三次色對于加色法和減色法都是相同的。既然我們已經(jīng)定義了在 12 點色環(huán)中使用的顏色，那么就可以討論這些顏色之間的相互關(guān)系。

相似色

圖 6. 相似色

相似色是指在給定顏色旁邊的顏色。如果您以橙色開始并想得到它的兩個相似色，就選定紅色和黃色。使用相似色的配色方案可以提供顏色的協(xié)調(diào)和交融，類似于在自然界中所見到的那樣。

互補色

圖 7. 互補色

也稱為對比色?；パa色在色環(huán)上相互正對。如果希望更鮮明地突出某些顏色，則選擇對比色是有用的。如果您在制作一幅檸檬的圖片，使用藍色的背景將使檸檬更突出。

分列的互補色

圖 8. 分列的互補色

分列的互補色可由兩種或三種顏色構(gòu)成。選擇一種顏色，在色環(huán)的另一邊找到它的互補色，然后使用該互補色兩邊的一種或兩種顏色。

三色組

圖 9. 三色組

三色組是色環(huán)上等距離的任何三種顏色。在配色方案中使用三色組時，將給予觀察者某種緊張感，這是因為這三種顏色均對比強烈?；痛紊侨M。

暖色

圖 10. 暖色

暖色由紅色調(diào)構(gòu)成，如紅色、橙色和黃色。這種顏色選擇給人以溫暖、舒適、有活力的感覺。這些顏色產(chǎn)生的視覺效果使其更貼近觀眾，并在頁面上更顯突出。

冷色

圖 11. 冷色

冷色來自于藍色調(diào)，如藍色、青色和綠色。這些顏色使配色方案顯得穩(wěn)定和清爽。它們看起來還有遠離觀眾的效果，所以適于做頁面背景。

請注意，您可能發(fā)現(xiàn)這些顏色組在不同的書籍中所指的內(nèi)容并不相同，但只要理解了基本原理，它們就都可以理解。

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

利用對比

對比是兩種相鄰顏色之間感覺到的區(qū)別。由于白色和黑色不是真正的顏色，它們被說成是表現(xiàn)了非彩色的對比度。黑色和白色也表現(xiàn)了最強烈的對比。色環(huán)中的互補色表現(xiàn)出大的彩色對比度。人眼對非彩色的對比度比對彩色的對比度更敏感，這就是在您增加壓縮系數(shù)時 .jpg 壓縮算法先去除彩色信息而后再去除黑白信息的原因。

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

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

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

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

圖 14. 高對比度顏色組合

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

圖 15. 互補色組合

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

圖 16. 修改后的顏色組合

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

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

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

一種更好的方法是使用一套分列的互補色，使用相似色作為背景，而文本使用互補色。這樣，背景顏色將適當?shù)厝诤系揭黄鸲恢乱饘λ鼈儽旧砻黠@的注意，而文本將顯得突出。

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

懂得顏色理論在您為網(wǎng)站選擇顏色基調(diào)時也會發(fā)生作用。根據(jù)您對背景顏色、導(dǎo)航組件和不同文本風格的需要，您可以從色環(huán)中選擇出高對比度的圖案。然后，使用類似于我的安全調(diào)色板計算表（英文）的某種工具，就可以輕松地選擇較暗的/較亮的顏色，將元素之間的對比增加到適當?shù)乃?。有許多組合適合于您的頁面，它們使色彩得到激動人心的使用，而不致讓用戶頭疼。所以，把那些止痛片放到一邊去吧，還是多花一點時間考慮一下在 Web 站點上如何使用顏色。要查找一些可能的選擇，請查看此動態(tài)示例（英文）。