上個(gè)月，本人提供了一些關(guān)于在 Web 站點(diǎn)上使用顏色和圖像的介紹性信息。這個(gè)專欄討論了一些基本技術(shù)方面的問(wèn)題，如頁(yè)面編碼、.jpg 格式與 .gif 格式之間的不同以及其它一些對(duì)“程序員”來(lái)說(shuō)可能已經(jīng)很熟練的主題。但這些主題對(duì)于一位圖形藝術(shù)家來(lái)說(shuō)，則可能感到某些不習(xí)慣，因?yàn)閳D形藝術(shù)家總是習(xí)慣于全面地控制作品的色彩和構(gòu)圖。在這次的文章中，我打算稍微變換一下方向，討論一下圖形藝術(shù)家耳熟能詳?shù)念伾?，而程序員在這方面可能要重溫一下。事實(shí)上，我發(fā)現(xiàn)許多站點(diǎn)未能正確應(yīng)用這些原理，由此可見(jiàn)有許多程序員需要對(duì)這些概念進(jìn)行進(jìn)一步的了解。
雖然本文的主要目標(biāo)是討論一種顏色與另一種顏色相互作用時(shí)的一些特性，但首先還需要講一些初級(jí)知識(shí)，以使我們的起點(diǎn)相同。
顏色基礎(chǔ)知識(shí)
我們知道，人們視為“可見(jiàn)”的光可以分解為從藍(lán)色到紅色的一個(gè)漸進(jìn)的彩虹光譜帶。
圖 1. 可見(jiàn)光譜
我們還見(jiàn)過(guò)（也許還用過(guò)）色環(huán)，色環(huán)顯示如何通過(guò)混合兩種或更多顏色來(lái)生成特定的顏色。色環(huán)實(shí)質(zhì)上就是在彩色光譜中所見(jiàn)的長(zhǎng)條形的色彩序列，只是將首尾連接在一起，使紅色連接到另一端的紫色。
圖 2. 色環(huán)
色環(huán)通常包括 12 種不同的顏色（如圖所示）。雖然畫(huà)家對(duì)色環(huán)和顏色理論的重要方面已十分了解，但我們當(dāng)中的一些程序員卻可能不十分清楚，這種理解上的不足會(huì)把事情弄得一團(tuán)糟。
基色
圖 3. 基色
按照定義，基色是最基本的顏色，通過(guò)按一定的比例混合基色可以產(chǎn)生任何其它顏色。為了識(shí)別基色，首先需要確切知道使用的是何種媒介。您可能在小學(xué)里學(xué)到基色有紅、黃、藍(lán)，但現(xiàn)在我們大多是用紅、綠、藍(lán)作為基色進(jìn)行顏色顯示。我想這不足為奇。
但如果您使用彩色噴墨打印機(jī)，請(qǐng)打開(kāi)機(jī)蓋看看墨盒。是否看到了紅、綠、藍(lán)？沒(méi)有。您可能看見(jiàn)有四種墨水：青色、品紅色、黃色及黑色。顏色不同是因?yàn)橛?jì)算機(jī)顯示器使用加色，而打印機(jī)使用減色。顯示器發(fā)射彩色光線，而紙張上的墨水則從它反射的光中吸收了某種顏色。有關(guān)此話題的更多論述將超出本文范圍，但如想了解更多一點(diǎn)的信息，請(qǐng)?jiān)L問(wèn)下面兩個(gè)鏈接：
除發(fā)射和吸收光線的不同外，本文討論的概念適用于加色和減色兩種模式—但根據(jù)我們的目的，我們將重點(diǎn)討論加色模式，在這種模式中，基色為紅、綠、藍(lán)。
次生色
圖 4. 次生色
為了建立色環(huán)，下面我們希望了解通過(guò)混合任何兩種鄰近的基色獲得的三種顏色。這些顏色即次生色：青、品紅和黃。咦，我們不是談到過(guò)這三種顏色嗎？是的，加色法中的次生色就是減色法中的基色。由此您可以推斷出，減色法中的次生色也就是加色法中的基色。這就是加色模式和減色模式之間的相互關(guān)系。
三次色
圖 5. 三次色
建立色環(huán)的最后一步是，再次找到現(xiàn)已填入色環(huán)的顏色之間的中間色。幸運(yùn)的是，這些三次色對(duì)于加色法和減色法都是相同的。既然我們已經(jīng)定義了在 12 點(diǎn)色環(huán)中使用的顏色，那么就可以討論這些顏色之間的相互關(guān)系。
相似色
圖 6. 相似色
相似色是指在給定顏色旁邊的顏色。如果您以橙色開(kāi)始并想得到它的兩個(gè)相似色，就選定紅色和黃色。使用相似色的配色方案可以提供顏色的協(xié)調(diào)和交融，類似于在自然界中所見(jiàn)到的那樣。
互補(bǔ)色
圖 7. 互補(bǔ)色
也稱為對(duì)比色?；パa(bǔ)色在色環(huán)上相互正對(duì)。如果希望更鮮明地突出某些顏色，則選擇對(duì)比色是有用的。如果您在制作一幅檸檬的圖片，使用藍(lán)色的背景將使檸檬更突出。
分列的互補(bǔ)色
圖 8. 分列的互補(bǔ)色
分列的互補(bǔ)色可由兩種或三種顏色構(gòu)成。選擇一種顏色，在色環(huán)的另一邊找到它的互補(bǔ)色，然后使用該互補(bǔ)色兩邊的一種或兩種顏色。
三色組
圖 9. 三色組
三色組是色環(huán)上等距離的任何三種顏色。在配色方案中使用三色組時(shí)，將給予觀察者某種緊張感，這是因?yàn)檫@三種顏色均對(duì)比強(qiáng)烈?；痛紊侨M。
暖色
圖 10. 暖色
暖色由紅色調(diào)構(gòu)成，如紅色、橙色和黃色。這種顏色選擇給人以溫暖、舒適、有活力的感覺(jué)。這些顏色產(chǎn)生的視覺(jué)效果使其更貼近觀眾，并在頁(yè)面上更顯突出。
冷色
圖 11. 冷色
冷色來(lái)自于藍(lán)色調(diào)，如藍(lán)色、青色和綠色。這些顏色使配色方案顯得穩(wěn)定和清爽。它們看起來(lái)還有遠(yuǎn)離觀眾的效果，所以適于做頁(yè)面背景。
請(qǐng)注意，您可能發(fā)現(xiàn)這些顏色組在不同的書(shū)籍中所指的內(nèi)容并不相同，但只要理解了基本原理，它們就都可以理解。
這使我最終進(jìn)入到我想討論的主要概念，這就是對(duì)比。
利用對(duì)比
對(duì)比是兩種相鄰顏色之間感覺(jué)到的區(qū)別。由于白色和黑色不是真正的顏色，它們被說(shuō)成是表現(xiàn)了非彩色的對(duì)比度。黑色和白色也表現(xiàn)了最強(qiáng)烈的對(duì)比。色環(huán)中的互補(bǔ)色表現(xiàn)出大的彩色對(duì)比度。人眼對(duì)非彩色的對(duì)比度比對(duì)彩色的對(duì)比度更敏感，這就是在您增加壓縮系數(shù)時(shí) .jpg 壓縮算法先去除彩色信息而后再去除黑白信息的原因。
圖 12. 黑色與白色：非彩色的對(duì)比條
圖 13. 使用藍(lán)色的單色對(duì)比條
當(dāng)您使用一種顏色，然后增加或減少其亮度時(shí)，即建立起單色對(duì)比。
對(duì)比在 Web 設(shè)計(jì)中非常重要。使用對(duì)比有多種不同的方法，所有這些方法都基于上述的另一種顏色概念。每個(gè)人都明白，白色背景下的黑色文本最容易觀看，這是您看到的大多數(shù)印刷材料都是白背景下的黑色文本的部分原因。同樣地，黑底白字的對(duì)比度也很強(qiáng)，但閱讀起來(lái)比較困難，因?yàn)楹谏o人感覺(jué)比白色沉重，有鑒于此，請(qǐng)盡量少用。
圖 14. 高對(duì)比度顏色組合
暖色和冷色產(chǎn)生同樣的效果。暖色給人略微突出屏幕的感覺(jué)，而冷色則顯得凹進(jìn)屏幕。這意味著暖色/黑色最適合作為文本，而冷色/白色最適合作為背景。然而，這種方法也不是一成不變的。下面我們來(lái)看一個(gè)簡(jiǎn)單的例子，其中選擇了兩個(gè)對(duì)比色，使用一個(gè)作為背景而另一個(gè)作為文本。
圖 15. 互補(bǔ)色組合
您會(huì)注意到效果非常差。這兩種顏色對(duì)比不鮮明，它們幾乎滲透在一起。這顯然不是個(gè)好的組合。還是保持顏色基本相同，而調(diào)整其亮度/暗度，使它們區(qū)分得更明顯。
圖 16. 修改后的顏色組合
可以看到這是一個(gè)好得多的組合，它表明在考慮對(duì)比度時(shí)有一點(diǎn)很重要：不僅僅要在分析的意義上考慮，還要從視覺(jué)的角度考慮。
這些顏色和對(duì)比的應(yīng)用對(duì)于在背景圖像上疊加文本也許是最重要的。使用這些對(duì)比概念時(shí)，必須切記，頁(yè)面上的文本部分必須與背景圖像中的所有顏色足以形成強(qiáng)烈的對(duì)比。例如，如果簡(jiǎn)單地使用上述的一套三色組，您就能使這三種互相對(duì)比的顏色在頁(yè)面上爭(zhēng)奇斗艷。
圖 17. 三色組組合；背景圖像上的文本
一種更好的方法是使用一套分列的互補(bǔ)色，使用相似色作為背景，而文本使用互補(bǔ)色。這樣，背景顏色將適當(dāng)?shù)厝诤系揭黄鸲恢乱饘?duì)它們本身明顯的注意，而文本將顯得突出。
圖 18. 分列的互補(bǔ)色組合；在背景圖像上的文本
懂得顏色理論在您為網(wǎng)站選擇顏色基調(diào)時(shí)也會(huì)發(fā)生作用。根據(jù)您對(duì)背景顏色、導(dǎo)航組件和不同文本風(fēng)格的需要，您可以從色環(huán)中選擇出高對(duì)比度的圖案。然后，使用類似于我的安全調(diào)色板計(jì)算表（英文）的某種工具，就可以輕松地選擇較暗的/較亮的顏色，將元素之間的對(duì)比增加到適當(dāng)?shù)乃?。有許多組合適合于您的頁(yè)面，它們使色彩得到激動(dòng)人心的使用，而不致讓用戶頭疼。所以，把那些止痛片放到一邊去吧，還是多花一點(diǎn)時(shí)間考慮一下在 Web 站點(diǎn)上如何使用顏色。要查找一些可能的選擇，請(qǐng)查看此動(dòng)態(tài)示例（英文）。
聯(lián)系客服
