上海網(wǎng)站建設(shè) 上海網(wǎng)站設(shè)計（m.outragednews.com）上海派琪網(wǎng)絡(luò)企劃品牌站

顏色、亮色、暗色

顏色，或色調(diào)，一般被劃分為原色、間色、復(fù)色。原色包括紅色、黃色和藍色，它們被稱為三原色，這是因為其它顏色不能調(diào)配出這三種顏色。在將三原色轉(zhuǎn)換為 Web 顏色時，你可以將它們表示為十六進制的顏色代碼，分別為 #ff0000，#ffff00 和 #0033cc，如圖1所示：

圖1：原色和間色，以及它們的十六進制顏色代碼

間色指紅、黃、藍三原色中的某二種原色相互混合的顏色，包括：

復(fù)色由間色混合調(diào)配而成，它們位于上圖色環(huán)中所示的原色和間色之間。盡管 Web 顏色與“畫家”通常使用的顏色并不相同，但手頭有一個色輪（色輪如圖2所示），還是有助于你學習各種配色方案。此外，色輪還顯示所有的亮色（tint）、灰色調(diào)（tone）和暗色（shade），這樣你就可以認識到各種可能的顏色組合和搭配。以下列出了需要學習的幾個重要術(shù)語：

亮色（Tint）：加入白色時顯示出的顏色

灰色調(diào)（Tone）：加入灰色時顯示出的顏色

暗色（Shade）：加入黑色時顯示出的顏色

圖2：色輪實樣

下面為圖2中箭頭所指的色帶的說明：

最外層色帶：黃色和橙色調(diào)配而成的復(fù)色

第二色帶：該復(fù)色的亮色（加入白色）

第三色帶：顏色的灰色調(diào)（加入灰色）

最內(nèi)層色帶：字輪上的暗色（加入黑色）

正如你們從以上的色輪中看到的那樣，向一種顏色加入的白色、灰色和黑色的數(shù)量是很小的，夠改變初始顏色和創(chuàng)建出所謂“單色方案”即已足夠。

單色方案

配色方案已通行很久了，因此沒有必要再重新設(shè)計一個色輪。盡管 Web 顏色與印刷顏色并不相同，但概念是一樣的。你只是把顏色名稱轉(zhuǎn)換為 16進制的顏色代碼，并使它們盡可能地完全匹配。我建議你們使用一個在線工具，即 ColorScheme Generator II（配色方案生成器II，如圖3所示），它不僅可以幫助你迅速和容易地確定配色方案，甚至還可以幫助你確定你選定的顏色是否為視力差或是色盲的用戶提供了足夠的對比度。

圖3：配色方案生成器 II

如果你在確定你選定的顏色是否提供了足夠的對比度時需要更多的幫助，可以使用我們 Paciello 小組提供的 Contrast Analyser（對比度分析器）。這個工具可檢查前景顏色和背景顏色之間的對比度。

為了實現(xiàn)在顏色生成器中生成黃橙色的亮色、灰色調(diào)和暗色，您要首先選擇上圖中箭頭所指的顏色，然后選擇色輪下方面板上的 Mono（單色）和圖右盒子下方面板上的 Default（默認），并在右底部的下拉式菜單中選擇 Normal Vision（正常視覺）選項。除非你是一個純粹主義者，不要在顏色盒上方的“reduce to ‘safe’ colours”（降至‘安全’顏色）方框中打勾。

備注：“Web 安全顏色”這個術(shù)語，產(chǎn)生于顯示器剛可以顯示 256色的那個時期，在 256色中，只有 216個顏色在 Windows/Mac/Unix 平臺上都是一樣的，因此就出現(xiàn)了“Web 安全顏色”這個名稱。盡管一些純粹主義者依然堅持使用“Web 安全調(diào)色板”，但現(xiàn)代的瀏覽器已經(jīng)能夠處理所謂“24位色”。每個通道有 10至 11位的 24位色，實際上已能生成 16,777,216 種不同的顏色。換言之，我們已經(jīng)可以有把握地說已不再需要“Web 安全調(diào)色板”了。

讓我們再回頭來看單色方案。遵照以上所描述的步驟，生成的顏色結(jié)果如下：黃橙色（#FFCC00）、亮色（#FFF2BF）、灰色調(diào)（#FFE680）、暗色（#B38F00）。與試圖通過將一個有形的色輪與一個 Web 瀏覽器的背光屏幕相匹配而做出的任何猜測相比，這些 16進制的數(shù)字的可靠度要高得多。同時，就像“Mono”（單色）所建議的，將這個方案轉(zhuǎn)化為一個單色方案，如圖4所示。

圖4：一個單色方案

一個單色方案等同于一種顏色，及其所有的亮色、灰色調(diào)和暗色。盡管這個配色方案是最容易使用的，但很多網(wǎng)頁設(shè)計師在進行網(wǎng)頁設(shè)計時，都不是很喜歡這種配色方案。因此，你可能希望學習其它的配色方案，為網(wǎng)頁中的鏈接、圖像和橫幅廣告添姿增彩。

互補色方案

下面我們學習互補色方案，即通過直接搭配色輪中相對的顏色，如圖5所示。

圖5：互補色方案的示例 當你選定一種顏色及其互補色時，你同時也選定了與這兩種顏色相關(guān)的亮色、灰色調(diào)和暗色。這提供了更廣的顏色選擇范圍，通過在線顏色工具可以很好地轉(zhuǎn)化為互補色方案，如圖6所示。

圖6：在線顏色工具生成的一個互補色方案 在上圖中，我選擇了橙色及其互補色藍色。為生成這個配色方案，我選擇的設(shè)置包括：色輪左下的Contrast（對比色）設(shè)置，生成器下方菜單中的 default（默認）設(shè)置，以及 normal vision（正常視覺）設(shè)置。請注意，所選定的主色在色輪的內(nèi)盤上以一個黑色圓點標示（在上圖中和生成器站點上都是這樣標示的），生成器自動為你選出該主色的互補色，以內(nèi)輪緣上的一個空心圓標示。有了這些標示符號，你就可以更容易地分析你的配色方案。

圖7：The Greenpeace site（綠色和平組織的網(wǎng)站）——使用互補色方案的一個模范實例 美國綠色和平組織的網(wǎng)站（見圖7）是很多使用對比色配色方案的網(wǎng)站中的一個，在這個網(wǎng)站的截圖上，你可以看到黃色和橙色，但主導(dǎo)顏色還是綠色和紅色，這是兩種在色輪中直接相對的顏色。使用這種互補色配色方法，你幾乎從不會出錯。實際上，使用“暖色”和“冷色”的搭配，可以使網(wǎng)站頁面顯得活潑，具有活力。 暖色 vs. 冷色 在網(wǎng)站中使用互補色方案效果非常好，這是因為互補色方案同時包含暖色和冷色。使用暖色和冷色提供了一種對比的效果。同時，哪些顏色是暖色，哪些顏色是冷色，是很容易記住的，你在圖8中就可以看到（在生成器網(wǎng)站上也可以看到）標出的暖色和冷色：

圖8：暖色和冷色 暖色是那些可以讓你聯(lián)想起夏天、太陽或火的顏色，包括色輪中從紫色起到黃色止的多種顏色。而冷色則是那些可以讓你聯(lián)想起春天、冰或水的顏色，包括色輪中從黃綠色起到紫色止的多種顏色。如果你仔細觀察一下色輪，就會很快發(fā)現(xiàn)你選擇一種主色后，生成器自動選出的相對應(yīng)的互補色在冷暖色方面與主色是相反的。因此，如果你選擇“暖”紅色，相對應(yīng)的互補色就是“冷”綠色；或如果你選擇“冷”綠藍色，則相對應(yīng)的互補色就是“暖”紅橙色。 Ecolution 網(wǎng)站就是在網(wǎng)站中各頁面都使用暖色和冷色搭配的一個實例，如圖9所示。

圖9：Ecolution網(wǎng)站——使用暖色和冷色搭配的一個模范實例 Ecolution 網(wǎng)站在其主頁上通常使用紅色作為強調(diào)色，以和綠色的網(wǎng)站標識形成對比。他們接著將這兩種對比色的亮色、灰色調(diào)和暗色在頁面中各處混合搭配。某個圖像中的“黑色”甚至都可以偏“暖”或偏“冷”，白色也同樣如此?？傮w來看，這張網(wǎng)站截圖的主色調(diào)是“暖色”，加上鮮明的純綠色作為搭配，整體視覺效果非常好。盡管 Ecolution 網(wǎng)站使用的是和綠色和平組織網(wǎng)站一樣的顏色，但由于 Ecolution 網(wǎng)站使用了很多灰色調(diào)和暗色，因此其外觀就沒有綠色和平組織網(wǎng)站的外觀那樣“耀眼”。 你從來沒有想到色彩理論會如此簡單易學，對吧？那好，下面我們就學習略微高深和復(fù)雜一些的內(nèi)容。 三色方案 三色方案是指在色彩圓環(huán)中選擇一個等邊三角形三個頂點上的顏色構(gòu)成的配色方案，如圖10所示：

圖10：三色方案 我為這個配色方案選擇了原色，原因是想顯示在配色方案中可以包含這種可走向極端的配色方法。原色在色輪中所處的位置絕非偶然，因為在每個原色之間的顏色，都包含有相等數(shù)量的間色和復(fù)色。但由于原色三色方案已被過度使用，所以它看上去似乎有些過時了。你可以使用在線顏色生成器，選擇其它顏色來生成一個三色方案，如圖11所示：

圖11：另外一種三色方案 以上所示的這個三色方案由橙黃色、藍綠色、紅紫色構(gòu)建而成。我首先選擇橙黃色（請注意上圖中，色輪左邊內(nèi)圈上的那個黑色圓點），然后再選擇色輪下方面板上的 Triad（三色）選項，生成器自動選定三色組合，包括所有的亮色、灰色調(diào)和暗色。在色輪上，伴隨色以空心圓點標示，如同前面那個單色例子中互補色的標示一樣。 現(xiàn)在，我們手上需要一個真正的色輪，因為在線生成器的結(jié)果與真正色輪的結(jié)果并不是很一致。不過當我將色輪下方的 Angle/Distance（角度/距離）工具撥到“max”（最大）時，在線生成器的結(jié)果與真正色輪的結(jié)果似乎就完全一致了。上圖所示的結(jié)果是最接近真正的色輪生成的結(jié)果。 三色方案也包含有暖色和冷色，但以一種暖色或冷色為主導(dǎo)色。一般說來，那種可以讓其它顏色顯暗的暖色或冷色應(yīng)是你最先選擇的。在我的這個三色方案中，我最先選擇的是橙黃色，它是一種暖色。因此，在這個三色方案中，暖色就是主導(dǎo)色，其它兩種顏色中有一種是冷色，以產(chǎn)生對比。

圖12：Puzzle Pirates 網(wǎng)站——三色方案的一個模范實例 Puzzle Pirates 網(wǎng)站（如圖12所示），在其主頁上使用了三色方案。該網(wǎng)站使用的是三原色（紅-藍-黃）方案，這個三原色方案非常適合一個少兒游戲網(wǎng)站。注意在該頁面中，藍色是主導(dǎo)色，紅色和黃色被用作強調(diào)色，散布在頁面各處。 四色方案 你選擇的顏色越多，則配色方案就越復(fù)雜。不過竅門是，選定一種亮色、灰色調(diào)或是暗色，并注意面板上那些，與選定顏色形成交叉的區(qū)域，而不是去混合調(diào)配純色及它們的亮色、灰色調(diào)和暗色。這種方法很適用于四色方案這樣的配色方案。這種四色方案（見圖13）與互補色方案很相似，不同之處只在于使用了兩組等距的互補色。

圖13：四色方案 圖14顯示如何使用在線生成器生成一個四色方案:

圖14：在線生成器生成的一個四色方案 注意色輪左邊紅色下面的那個黑色原點，紅色是我選擇的第一個顏色。然后我點擊色輪下方面板上的Tetrad（四色）按鈕，顯示出來的四種顏色與我的手持式色輪顯示出來的顏色又有點不同，不過當我將色輪下方的 Angle/Distance（角度/距離）工具撥到“max”（最大），在線生成器生成的結(jié)果與我的手持式色輪生成的結(jié)果似乎就完全一致了。以上所示的結(jié)果是最接近真正的色輪生成的結(jié)果。 這種配色方案可以變得相當復(fù)雜，因此你可能會從右欄中的顏色中挑選出所有4種亮色或灰色調(diào)或暗色，為此你可以點擊右端的箭頭。例如，圖15就顯示了一個用這個配色方案的亮色填充的方塊： Jane Goodall 研究所的網(wǎng)站（圖17）是少數(shù)幾個成功運用四色方案的網(wǎng)站之一。請注意網(wǎng)站截圖中的紫色、黃色調(diào)、高亮紅色（頁面下部使用了更多的紅色）、綠色。紫色與在線顏色工具生成的配色方案并不完全一致，它更偏于像紅紫色。不過作為一個顯示你如何能同時運用色輪和在線顏色生成器為你的網(wǎng)站確定配色方案的例子，它的效果已經(jīng)很好了。 當你在網(wǎng)上搜索配色和設(shè)計的創(chuàng)意時，請將色輪放在手邊，以更多地了解網(wǎng)頁設(shè)計師是如何在你喜愛的 Web 站點上使用配色方案的。 總結(jié) 盡管色彩組合可能看起來有些復(fù)雜，但其實所有的配色方案都是遵循一定的“規(guī)則”的。了解這些指導(dǎo)原則，可以使我們易于理解色彩的搭配是如何為 Web 站點增添趣味和對比度的。 色輪就是為我們所用的有用工具。有了色輪和其它工具如在線顏色生成器等，就是尚缺乏經(jīng)驗的設(shè)計師也能容易地挑選出顏色。