在顏色論系列的前兩部分，我們主要討論了顏色背后的意義和關(guān)于顏色的術(shù)語(yǔ)。盡管這些信息非常重要，但我相信很多人都非常想知道什么時(shí)候才開始進(jìn)入討論創(chuàng)建一些實(shí)質(zhì)的配色方案。

好吧！本文，也就是本系列的第三部分將介紹這個(gè)問(wèn)題。我們將從頭開始討論創(chuàng)建屬于你自己的配色方案的方法。我們還將討論傳統(tǒng)的配色方案模式（例如單色設(shè)計(jì)，類比設(shè)計(jì)，互補(bǔ)設(shè)計(jì)等），以及如何創(chuàng)建自定義的并不嚴(yán)格基于一種模式的方案。在本文最后，你將學(xué)會(huì)使用工具和技巧為自己的設(shè)計(jì)項(xiàng)目創(chuàng)建漂亮的調(diào)色板。提高技能的最好方法是實(shí)踐，因此為自己設(shè)定一個(gè)目標(biāo)，每天創(chuàng)建一個(gè)新的配色方案是個(gè)好主意。

快速回顧

讓我們先回顧一下第一部分和第二部分的內(nèi)容。在第一部分，我們談到了不同的國(guó)家和文化，所有的顏色都具有傳承而固有的不同意義。這些含義對(duì)于網(wǎng)站訪客對(duì)網(wǎng)站是如何理解的有直接影響，即使這種影響只是潛意識(shí)層面的。 你所選擇的顏色對(duì)你試圖創(chuàng)建的品牌標(biāo)識(shí)既有可能起到促進(jìn)作用，也可能妨礙其發(fā)揮作用。

在第二部分，我們討論了顏色術(shù)語(yǔ)：色相（是什么顏色，如藍(lán)色或紅色），色度（色彩中包含的單種標(biāo)準(zhǔn)色成分的多少，缺乏白色，加入黑色或灰色），飽和 度（顏色的鮮艷程度是強(qiáng)還是弱），明度（顏色是亮還是暗）;色調(diào)（通過(guò)在純的色相中加入灰色創(chuàng)建）;陰影色（通過(guò)在純的色相中加入黑色創(chuàng)建）;以及淺色 （通過(guò)在純的色相中加入白色創(chuàng)建） 。對(duì)于要繼續(xù)學(xué)習(xí)創(chuàng)建屬于我們自己的配色方案來(lái)說(shuō)，熟悉這些術(shù)語(yǔ)是非常重要的。

傳統(tǒng)的配色方案類型

有許多使創(chuàng)建新方案更容易的預(yù)定義配色方案，對(duì)于初學(xué)者更是如此。下面是傳統(tǒng)的方案，每一種有幾個(gè)例子。

基本的12輻色輪是創(chuàng)建配色方案的重要工具。

單色
單色配色方案由不同的色調(diào)構(gòu)成，是在特定色調(diào)內(nèi)的陰影色和淺色。這是創(chuàng)建配色方案最簡(jiǎn)單的方法，因?yàn)樗鼈兌紒?lái)自同一色相，因此盡管也有一定的可能，但是很難創(chuàng)建出一個(gè)不和諧的或者丑陋的方案。

示例：

這里有三個(gè)單色配色方案的例子。對(duì)于這些配色方案大部分來(lái)說(shuō)，從左到右的第一個(gè)顏色通常被用作標(biāo)題的顏色。第二個(gè)顏色將用于正文，或者也可用作背景。第三個(gè)顏色將可能用于背景，如果#2顏色被用作背景的話，那么它將被用于正文。而最后兩種顏色將作為強(qiáng)調(diào)，或用在圖形中。

類比
類比配色方案是僅次于單色的一個(gè)易于創(chuàng)建的配色方案。類比方案是由在12輻色輪中相鄰的三種顏色創(chuàng)建的。一般來(lái)說(shuō)，類比配色方案都具有相同的色度水平，但通過(guò)色調(diào)、陰影色和淺色的使用，我們可以增加這些方案的趣味，并且可以適應(yīng)我們所設(shè)計(jì)網(wǎng)站的需要。

示例：

這是一個(gè)傳統(tǒng)的類比配色方案，雖然它的視覺感染力很強(qiáng)，但是對(duì)于設(shè)計(jì)一個(gè)讓人印象深刻的網(wǎng)站來(lái)說(shuō)，顏色的對(duì)比度不夠強(qiáng)。

這個(gè)一個(gè)和上圖有相同色相的配色方案，但是色度上的調(diào)整體現(xiàn)出多樣性。 它現(xiàn)在更適合用于網(wǎng)站設(shè)計(jì)。

另外一個(gè)傳統(tǒng)類比配色方案的例子。

以上主題經(jīng)過(guò)修正可以用于網(wǎng)站設(shè)計(jì)。

互補(bǔ)
互補(bǔ)配色方案是通過(guò)將色輪上對(duì)立面的顏色相融合來(lái)創(chuàng)建。這些配色方案最基本的形式是僅由兩種顏色構(gòu)成，但是可以很容易通過(guò)色調(diào)，淺色和陰影色的形式擴(kuò)展。 溫馨提示：即使使用彼此相鄰的具有相同色度或者明度而又完全相反的顏色可能看起來(lái)會(huì)很不和諧，從嚴(yán)格意義上來(lái)說(shuō)，它們的邊界看起來(lái)會(huì)很刺眼。因此最好通過(guò) 在它們之間留白，或者在它們之間加入另一個(gè)過(guò)渡色來(lái)避免這種情況。

示例：

廣范圍的淺色、陰影色、和色調(diào)的應(yīng)用讓這個(gè)配色方案看起來(lái)非常具有通用特性。

另一個(gè)具有廣范圍色度的互補(bǔ)配色方案。

別忘了米色和棕色其實(shí)是橙色的淺色和陰影色。

分列互補(bǔ)
分列互補(bǔ)配色方案和互補(bǔ)配色方案幾乎一樣簡(jiǎn)單。這種配色方案使用的顏色是和位于你的基礎(chǔ)色相對(duì)角位置的色相相鄰左右的兩種顏色，而非色輪上對(duì)角的顏色本身。

示例：

上圖是一個(gè)以黃綠色為基礎(chǔ)色相的配色方案。你所選擇的這種類型的配色方案的顏色間擁有足夠的色度和明度差別是非常重要的。

另一個(gè)具有廣范圍色度的調(diào)色板例子。

三元配色方案
三元配色方案由在12輪輻色輪中具有相等間隔的色相組成。和其他配色方案相比，這種方案稍顯不同。

示例：

在三元配色方案中，使用一種顏色的淺色或深色版本，與另外兩種顏色的兩種陰影色/色調(diào)/淺色一起運(yùn)用，讓這種單一的顏色在配色方案中顯得中立，可作為中和色使用。

或者，使用將一種非常明亮的色相搭配一對(duì)柔和的色相使用可以讓這種明亮的色相更加突出。

雙互補(bǔ)（四元）配色方案

四元配色方案可能是最難有效完成的一種方案。

示例：

上圖是非常不起眼四元配色方案。使用這種配色方案最好的方法是在設(shè)計(jì)中把一種顏色當(dāng)作主要顏色，其他的顏色僅僅用作突出它。

當(dāng)使用相似的色度和明度創(chuàng)建配色方案時(shí)，四維配色方案的效果非常好。只需添加一個(gè)中和色用作文本和強(qiáng)調(diào)，如使用暗灰色或黑色。

對(duì)于深色配色方案來(lái)說(shuō)，它的效果也非常好。

自定義
自定義配色方案是最難創(chuàng)建的。自定義配色方案并不基于任何正式的規(guī)則，而非像上面討論的那樣遵照某種預(yù)定義的配色方案。在創(chuàng)建這種類型的配色方案是，請(qǐng)謹(jǐn)記色度、明度和飽和度等等諸如此類的東西。

示例：

上圖的所有顏色都有相同級(jí)別的色度和飽和度。

同樣，使用具有類似色度和飽和度的顏色是非常有效的，此外，能夠創(chuàng)建出的整個(gè)配色方案非常具有內(nèi)聚力。

在都是低色度的顏色中使用一種高色度的顏色是另一種有效的方法，這種高色度的顏色可以用作強(qiáng)調(diào)。

創(chuàng)建一個(gè)配色方案

創(chuàng)建屬于你自己的配色方案，可能聽起來(lái)有點(diǎn)讓人畏縮。但它并沒有很多人認(rèn)為的那樣復(fù)雜。從開始著手，就有很多小竅門可以運(yùn)用到創(chuàng)建一個(gè)非常棒的調(diào)色板中。

上文我們已經(jīng)介紹了不同種類的配色方案?，F(xiàn)在，讓我們開始嘗試建立自己配色方案的一部分。有大量的在線工具可以用來(lái)協(xié)助創(chuàng)建一個(gè)配色方案，但是從現(xiàn)在開始我們暫時(shí)摒棄這些工具，僅使用Photoshop來(lái)完成這項(xiàng)工作。

讓我們?cè)囍撾x上我已經(jīng)提到的配色方案，并創(chuàng)建了一些自定義的方案。雖然了解不同顏色之間相互作用的方式，以及傳統(tǒng)的配色方案是如何創(chuàng)建的是非常重要的，但是對(duì)于你有可能去創(chuàng)建自定義配色方案的大多數(shù)設(shè)計(jì)項(xiàng)目而言，無(wú)需嚴(yán)格遵循任何預(yù)定義的模式。

因此，為了我們的項(xiàng)目目標(biāo)，我們將創(chuàng)建三個(gè)配色方案，每一個(gè)用于兩個(gè)不同的網(wǎng)站。我們的虛擬客戶是一個(gè)現(xiàn)代建筑設(shè)計(jì)的博客和一個(gè)深受維多利亞時(shí)代風(fēng)格影響的高檔女性服裝零售商。

為了對(duì)每一種方案都有一個(gè)感性認(rèn)識(shí)，我們先從最基礎(chǔ)的單色配色方案開始。雖然我曾提到傳統(tǒng)的配色方案模式在設(shè)計(jì)中不常用到，但是單色配色方案確實(shí)這一規(guī)則的例外。你將可能發(fā)現(xiàn)所使用的單色方案是相當(dāng)常用的基礎(chǔ)原理。

對(duì)于我們的服裝店來(lái)說(shuō)，將加入的白色作為中和色是一個(gè)傳統(tǒng)的配色方案。

對(duì)于我們的設(shè)計(jì)博客，我們配以由陰影色和淺灰色組成的的配色方案。

上圖可以看作類比配色方案，但我們省略了一個(gè)顏色。它深紫色和紅紫色組成。在色輪上這兩個(gè)顏色彼此相鄰，看起來(lái)效果很好，特別是當(dāng)它們使用不同級(jí)別的明度和飽和度時(shí)。

在灰色配色方案中添加兩個(gè)紅色色調(diào)可以引起視覺上的關(guān)注，同時(shí)也為你設(shè)計(jì)中的特定部分增添了潛在的特別強(qiáng)調(diào)。

在上圖中，我們不再使用紫色色相，轉(zhuǎn)而使用酒紅色。酒紅色也是在色輪上與紅紫色相鄰的顏色。我們還增加在色輪上位于紫色對(duì)角上的淺黃色調(diào)。它充當(dāng)我們的中和色，并且和我們的其他色相相比，看起來(lái)更像是白色。

雖然這個(gè)配色方案乍眼看上去像另一個(gè)標(biāo)準(zhǔn)的灰色和紅色調(diào)色板，但是如果更仔細(xì)的研究一下，你將會(huì)發(fā)現(xiàn)灰色其實(shí)是藍(lán)色調(diào)。藍(lán)色和紅色構(gòu)成了四階配色方案的三分之二，但在沒有黃色的時(shí)候看起來(lái)也很好，特別是在當(dāng)紅色保持高純度而藍(lán)色色調(diào)淡化到幾乎變?yōu)榛疑狞c(diǎn)時(shí)。

為什么陰影色、色調(diào)和淺色都很重要
正如在上文的配色方案中看到的那樣，在你的配色方案中使用淺色、色調(diào)和陰影色是至關(guān)重要的。純色相都有類似于明度和飽和度的等級(jí)。這導(dǎo)致了配色方案既具有不可替代的壓倒性，同時(shí)卻又很枯燥。

當(dāng)將色調(diào)、陰影色和淺色這些概念混合在一起時(shí)，原來(lái)12輻色輪的概念在你的設(shè)計(jì)中可以使用的顏色數(shù)量將擴(kuò)大為無(wú)限。創(chuàng)建具有專業(yè)外觀配色方案的最簡(jiǎn)單方法 是為某一非純色相的特定顏色選用一些色調(diào)、淺色和陰影色，加入到另一個(gè)純的、或者接近純的色相中，這些色相是在色輪中至少間隔三個(gè)顏色（是三維、四維或分 列互補(bǔ)配色方案）用于強(qiáng)調(diào)色。這種方法為你的配色方案增添了視覺沖擊力，同時(shí)仍不失平衡感。

加入一些中性色
中和色是創(chuàng)建一個(gè)配色方案的另一個(gè)重要組成部分。灰色，黑色，白色，棕色，棕褐色和灰白色通常被認(rèn)為是中性色。褐色，棕褐色，和灰白色往往使配色方案在視 覺上有溫暖的感覺（由于它們其實(shí)都是橙色和黃色的色調(diào)，陰影色和淺色）?；疑鶕?jù)周邊的顏色呈現(xiàn)出暖色或者冷色的效果。黑色與白色的同樣可以是暖色或冷 色，這取決于周圍的顏色而定。

黑色和白色是最簡(jiǎn)單的，幾乎可以加入任何一個(gè)配色方案中的中性色。 然而為了加入更多的視覺沖擊力，可以考慮使用稍亮或者稍暗的灰色置于白色或黑色的位置。

添加褐色，棕褐色，和灰白色色調(diào)更具技巧一些，但通過(guò)一些練習(xí)你將會(huì)發(fā)現(xiàn)漸漸變得容易了。對(duì)于褐色來(lái)說(shuō)，可以考慮在黑色的位置使用一種非常暗的巧克 力棕色。灰淡白色在很多情況下可以替代白色或者淺灰色。和棕褐色也可以取代灰色的位置（通過(guò)添加以小額灰色來(lái)創(chuàng)建色調(diào)會(huì)更容易些）。

配色方案中使用照片

我個(gè)人最喜歡的創(chuàng)建配色方案的方法是使用照片。在線的自動(dòng)化工具可以為你自動(dòng)完成這項(xiàng)工作（Adobe Kuler是這些工具中我個(gè)人最喜歡的一種），或者也可以使用Photoshop來(lái)完成制作。

使用Adobe Kuler，不僅可以搜索Flickr上的照片，也可以上傳自己本機(jī)上的圖片。如果你正在為在網(wǎng)站設(shè)計(jì)中使用什么顏色而絞盡腦汁的話，可以嘗試在Flickr中搜索相關(guān)的詞。有時(shí)，這種方法可以找到也許你自己都根本沒有想到的配色方案。

讓我們嘗試這種使用Kuler和Photoshop兩種方法。在Flickr中找到你喜歡的，可以激發(fā)出你希望創(chuàng)造出的設(shè)計(jì)感覺的照片。我選擇了這一張：

以下是Kuler基于這張圖片創(chuàng)建的原始配色方案：

Kuler上基于圖片創(chuàng)建配色方案最棒的功能就是它的“選擇基調(diào)”選項(xiàng)。包括彩色，亮色，柔和色，深色，和暗色。以下的配色方案是我們使用同一張照片得到的每一種基調(diào)。

彩色

亮色

柔和色

深色

暗色

現(xiàn)在讓我們使用同一張圖片在Photoshop中創(chuàng)建一個(gè)彩色配色方案。和Kuler相比，這種方法的科學(xué)性稍遜一籌。我通常使用滴管工具選擇一種 顏色，然后在圖像中的不同點(diǎn)上點(diǎn)擊直到找到和它相配的另一種顏色。以下是結(jié)果。這種方法比使用Photoshop節(jié)約不超過(guò)五分鐘，因此它并非像傳說(shuō)的那 樣節(jié)省時(shí)間：

在Photoshop中基于一張圖片創(chuàng)建配色方案是最簡(jiǎn)單的方法，可以從相關(guān)的單色開始。使用色彩相對(duì)豐富的圖像會(huì)使難度增加。

這次讓我們嘗試一個(gè)顏色更豐富的例子。下面這張圖片是我們將要基于工作的：

以下是Kuler給我們的基于這張圖片的五種配色方案：

彩色

亮色

柔和色

深色

暗色

下圖是基于同一張圖片使用Photoshop得到的配色方案：

正如你所看到的，使用Photoshop得到的版本和Kuler提供的版本完全不同，但是以上的所有配色方案都具有視覺上的吸引力。這里的Photoshop版本了比上例用了更長(zhǎng)的時(shí)間，部分原因圖像顏色的多樣性。

最簡(jiǎn)單的配色方案

正如我們前面提到的那樣，在別的中性色調(diào)色板中添加強(qiáng)調(diào)亮色是創(chuàng)建配色方案的最簡(jiǎn)單方法。運(yùn)用這種方法也可以創(chuàng)造出最引人注目的視覺效果。如果你對(duì)自己在創(chuàng)建自定義配色方案的技術(shù)方面沒有自信的話，可以先從這種類型的調(diào)色板開始。

這里有幾個(gè)例子可以讓你理解我剛剛說(shuō)的內(nèi)容：

這里可以看到如何使用棕色，而不是灰色使整個(gè)方案看起來(lái)更偏向于暖色，即使在用藍(lán)色來(lái)強(qiáng)調(diào)的時(shí)候。

在這種類型的方案中，可以使用任何顏色的色調(diào)代替灰色或者棕色，只需要保持接近灰色的范圍內(nèi)就可以得到最簡(jiǎn)單的結(jié)果。作為一般規(guī)則，冷灰色和純灰色對(duì)于現(xiàn)代設(shè)計(jì)是最好的選擇。在傳統(tǒng)的設(shè)計(jì)中，偏向暖色的灰色和棕色搭配在一起看起來(lái)更好。

有多少種顏色？

您會(huì)注意到本文通篇使用的配色方案只有五種不同的顏色。五是一個(gè)很好的數(shù)字，它為這里的概念圖解提供了許多的選擇，同時(shí)，在設(shè)計(jì)中它也是一個(gè)可行的數(shù)字。當(dāng)然在你自己的方案中可以任意選擇更多或者更少的顏色。

絕大多數(shù)網(wǎng)站可能只在其設(shè)計(jì)使用3種顏色。甚至有一些只使用2個(gè)。而有些可能使用8種或10種，這相對(duì)于僅使用少量顏色的網(wǎng)站來(lái)說(shuō)難度更大。通過(guò)實(shí) 驗(yàn)決定在你的設(shè)計(jì)中使用多少顏色。但是你可能希望從五種顏色的調(diào)色板開始，然后在設(shè)計(jì)的過(guò)程中決定是增加還是減少顏色以達(dá)到最合適的狀態(tài)。

添加一種顏色最簡(jiǎn)單的方法是立足于已有的傳統(tǒng)配色方案，然后基于這些配色方案來(lái)開始工作。這至少給你一個(gè)方向定位，直到有其他的顏色可以考慮。

配色方案精美的10大網(wǎng)站

為了給你更多的靈感，這里有10個(gè)具有完美配色方案的網(wǎng)站可以參考。下面的一些配色方案可能乍眼看起來(lái)有些奇怪，但是可以參考他們是如何使用極盡可能廣范圍的配色方案來(lái)展現(xiàn)的。

Wentings 自行車 & 山地車店

配色方案：

Trivuong.com

配色方案：

Oscar理發(fā)師

配色方案：

東北地區(qū)和平伙伴

配色方案：

mbA建筑

配色方案：

13工作室

配色方案：

Joy項(xiàng)目

配色方案：

Morphix博客

配色方案：

薩爾瓦多合作設(shè)計(jì)

配色方案：

LemonStand

配色方案：

結(jié)論

本系列中我們只是觸及顏色理論的皮毛。有專門的專家，他們花了很多年來(lái)使其挑選顏色的能力精益求精，可以讓它適合任何環(huán)境。

學(xué)習(xí)創(chuàng)建出色配色方案的最好方法就是實(shí)踐?？梢灾付ㄒ粋€(gè)每天的學(xué)習(xí)計(jì)劃。您可以使用自動(dòng)工具來(lái)先（如Kuler的形象創(chuàng)造的這個(gè)計(jì)劃的工具），或只 開放Photoshop和啟動(dòng)。 開始的時(shí)候可以使用自動(dòng)工具，如Kuler基于圖片創(chuàng)建配色方案的工具來(lái)做這項(xiàng)工作，或者可以從使用Photoshop開始。如果在日常生活中開到了特別 美麗或者引人注目的顏色，可以嘗試圍繞這個(gè)顏色創(chuàng)建配色方案。可以利用那些讓你上傳配色方案并將其組織起來(lái)供以后參考的網(wǎng)站。這種方法可以讓那些配色方案 更貼合實(shí)際并在今后更易于使用。

更多資源

以下的資源應(yīng)當(dāng)有助于你建立自己的配色方案，還有更多的關(guān)于傳統(tǒng)的配色方案的鏈接。

*10種超級(jí)有用的選擇正確調(diào)色板的工具
從Web Design Ledger匯總的10種尋找并創(chuàng)建調(diào)色板很棒的工具。

*100 Random Colors 2.0
該網(wǎng)頁(yè)包含以十六進(jìn)制代碼表示的100種隨機(jī)顏色，。如果你正在尋找色彩靈感的話，這個(gè)網(wǎng)站是個(gè)好地方。

*經(jīng)典配色方案
這篇Color Wheel Pro上的文章涵蓋了所有傳統(tǒng)配色方案的詳細(xì)信息和例子。

*ColorMunki
另一種配色方案工具。它的顏色庫(kù)標(biāo)簽在尋找和創(chuàng)建單色配色方案時(shí)非常有用。

*ColorSchemer
一種配色方案庫(kù)和工具的免費(fèi)在線版本。

*ColourLovers
一種顏色和設(shè)計(jì)界，包含一個(gè)調(diào)色板，搜索功能以及工具巨大的畫廊創(chuàng)建自己的調(diào)色板。 一個(gè)顏色和設(shè)計(jì)的社區(qū)，包括大量的調(diào)色板素材、搜索功能和創(chuàng)建屬于自己的調(diào)色板的工具。

整個(gè)系列
設(shè)計(jì)師的配色理論：你真懂顏色了嗎？
設(shè)計(jì)師的配色理論：你真懂這些色彩術(shù)語(yǔ)嗎？
設(shè)計(jì)師的配色理論：創(chuàng)建自己的調(diào)色板

 

【enqoo原文】@應(yīng)酷愛網(wǎng)頁(yè)設(shè)計(jì)