[一文獲得配色能力]一勞永逸的配色方案，6大配色系統大放送(上)

表色系統分為幾大類

每天十分鐘，系統學習設計，成為設計師。終生學習，受益終生。這裡是【知更常青藤】，歡迎你的到來，這是我和你一起學習設計的第八天。如果你不想丟失這個體系，可以關注我，轉發本文。

由於篇幅所限，我們將6大配色方法論分為了上中下三冊。

文/萬歲爺 校驗/君 知更常青藤原創出品，轉載請註明出處，版權所有，侵權必究。

獻給學習設計的你

長久以來，我們已經走完了色彩體系的大部分課程。這些體系是未來深入學習色彩的基礎，讓我們回顧這7天的學習成果，並依據這些成果展開對色彩綜合學習。

當你還是一個沒有任何設計基礎的新手的時候，我們從物理的角度分析了色彩的本質，明白了物體並沒有色彩，也明白了色彩是電磁波與視覺系統的綜合反映。讓你對色彩有了最基本的認識。

隨後，我們透過案例展示了光影的關係。光與陰影對UI的互動起著至關重要的作用，利用光影提供易用的互動模式，利用光影提供利於閱讀的使用者體驗。也讓你明白了僅僅使用灰度就可以表現整個客觀世界。

然後是色彩的特性，你明白了什麼是固有色、物體色、光源色、環境色。儘管這些特性的理解不會在你設計的時候提供有效的幫助，但是卻能夠幫助你深刻理解色彩的本質，幫助你構建優秀的調色盤。

我們還學習了色彩的屬性：色相、飽和度、明度。這三個屬性正是我們後來學習色彩的基礎概念，它們時刻被提起，並時刻被應用。你應當明白如何利用色彩的三個屬性去定義和描述色彩，每當你看見色彩的時候，你都能夠利用色相、飽和度、明度這三個屬性去思考和觀察。

最終，我們利用前面的基礎概念過渡到了色輪。從此以後，色輪將是你一直使用的色彩工具，如果沒有色輪你將很難進行初級的配色。

這一章將是6種配色方法的學習，我們使用色輪來展現這種配色過程。因此，如果你還不明白色彩的三屬性以及基礎色彩理論，我想你值得看一看我的往期文章，去學習這些基礎理論，這是你看懂本章的基礎。

單色配色

儘管我們使用色輪來進行配色，但是你需要理解色輪並非必須是圓形，如果你提前使用了Photoshop（我們不推薦先學習軟體），那麼你需要明白這些軟體的取色器就是一個色輪，儘管它是矩形的。

當你進行設計的時候，配色是擺在你面前的首要問題。如果你是憑感覺在色輪中選擇色彩，那麼你的作品至少失敗了一半。

在所有配色的方法論當中，單色配色是最易上手的。如果一個設計中出現過多的鮮豔色彩，人的視覺系統會感到視覺疲勞，這種狀態不應當持續很久，這是不和諧的配色方法。

但是當你盯著藍色大海或者綠色森林看上一天也不會有這種感覺。你的視覺系統會感到異常放鬆。這並不意味著你只需要使用色相一致的純色單色，事實上，森林的綠色是豐富多彩的，儘管這些綠色都是同樣的色相，森林的細節裡有許多不同的明度和飽和度。自然的“配色”總是讓人感到和諧和震撼，如果你實在沒有配色靈感，嘗試從身邊的大自然尋找調色盤，你會有意外收穫。

單色配色的關鍵就在於：選擇一個合適的色相，在此基礎上，進行飽和度和明度的調整，並且這種色調最好不要過多。當超過7到8種單色之後，你就會很難分辨這些色彩之間的差異，因此，3-4個色彩是你最好的選擇。

我們以紅色和藍紫色的飽和版本為例，配置了單色的變化例子，請看下圖：

僅僅變化飽和度的單色漸變

在這幅圖中，我們給出了飽和度版本的單色配色，但是單色僅僅透過飽和度的變化是不夠的，你還記得我們說過明度最重要嗎？當你使用單色配色的時候，如果丟失了明度的變化，那麼你的場景將會失去深度，你要明白，世界的輪廓是透過明度來標識的，因此，當使用單色的配色時，你需要更寬廣的明度，否則會使你的設計顯得單調乏味，並且缺乏縱深。

我們再次修改這個配色，這次加大他們之間的明度差別：

飽和度與明度變化的單色

我們給出了一個利用單色配色的完美案例，這是一個藍綠色的魔方，作者利用了單色配色方法。它的明度跨度非常顯眼，在這個案例中，為了突出魔方的立體效果，明度的變化是考慮的首要因素。由於採用了單色的配色方案，因此，我相信新手會很容易獲得這種配色能力。不過，你最好掌握色彩的本質和陰影的正確使用，這樣才能夠做到足夠優秀。你放心，單色配色已經足夠單純，相信你可以掌握。

單色的魔方

我們利用Photoshop的取色器提取了這個作品的色域，將其展示在作品下方，並且將調色盤中的每一個色彩的HSV（Hue=色相；Saturation=飽和度；Value=明度）資訊放到表格中。你會發現最左面的藍色明度非常低，很暗淡，但是飽和度卻很高，作品正是以這個低明度高飽和的色彩作為基本色進行調整的。我們發現這個調色盤的明度在逐漸提高，飽和度也隨著明度的變化逐漸降低，但是調色盤的第二個和第三個色彩的飽和度卻升高了，這是作品有意為之的。不過我們想表明的一個觀點是：單色配色，明度變化儘量保持較寬的範圍。

小貼士：你會發現我們利用取色器來歸納某些作品的調色盤，我們希望你也這樣做，這會讓你的色彩原理基礎能力提升很快。在這個過程中你會接觸大量作品，你要分辨哪些作品好，哪些是糟糕的設計。對於優秀的作品，你要能夠找出它們之間的共同點。我們的體系會一直帶著你做這種分析。幫助你更快地提升自己的欣賞和設計能力。很快你就會發現，自己會製作調色盤了。

下圖是一個應用軟體的UI介面，這個作品同樣使用了單色配色方法。請看下圖：

APP UI

在這個案例中，我們提取了3種色彩。這些色彩都是藍紫色的不同明度版本，它們都具有不高的飽和度，並且明度逐漸增強。值得注意的是，這個介面的字型同樣是藍紫色的高明度版本，有些字型的色彩幾乎接近白色，但是依然可以感受到藍紫色的成分。

小貼士：從視覺上看，由於介面背景使用了大量單色體系，而字型的比例在這個UI種並不高，在這種面積對比情況下，字型容易在視覺上受到藍紫色的影響，從而感覺有藍紫色的成分。當然，事實是：作者的確使用了藍紫色的字型，只不過明度非常高。

單色配色很容易構建和諧。對於新手，我們推薦你先使用單色配色，培養自己的經驗，進而掌握更多的配色方法。正如我一直所說，你對色彩的理解建立在色彩原理的基礎之上，如果你不具備這些色彩原理的知識，我想你應當填補你的知識盲區，而不是死記硬背這些配色方案或者去網上收集配色板。

接下來我給你幾個單色配色的案例，你可以慢慢觀察並且學習提取這些色彩，然後組合成自己的調色盤，切記：配色方案不可隨意複製，你應當根據產品面向的使用者以及產品本身的特點來構建基礎色彩，或者從自然界尋找配色方案，但絕不是複製別人的調色盤。

灰度的網站

這個網站的主圖採用了藍綠色的灰度配色，整個圖片保持了較高的明度和很低的飽和度。實際上它的色相十分接近灰色，這種色彩給網站一種輕盈的感覺，使得網站看起來不那麼頭重腳輕。

網站還有大量的留白。這種極簡的設計風格在近幾年非常流行，不過受限於扁平化設計的弊端，設計師們正在尋找一種更加飽滿同時兼具扁平化簡潔優點的設計：漸變色就是其中一種。請看下圖：

漸變設計

這個網站的頂部設計採用了漸變風格，儘管如此，作者也只採用了青色和紫色的漸變。過多的漸變色彩會產生許多設計噪點，我們甚至可以採用單色的不同明度或者飽和度的漸變版本來構建豐富的視覺設計。這種設計在今年（2018）正在變得流行。

青色的不同明度和飽和度的漸變版本

對單色配色的講解到此為止，我們為你總結了單色配色的知識點：

選擇一個基礎色

在基礎色的基礎上，進行飽和度和明度的變化，明度的範圍可以適當放寬，以獲得深度感

可以利用單色的不同飽和度和明度來進行漸變設計，這可以使設計更有視覺魅力

相似色

色輪上3至5個相鄰色彩的組合形成相似色。

鄰近色

我們還可以利用相鄰的4個色彩的組合來建立鄰近色。當超過5種相鄰的色彩組合，臨近色系兩邊的色彩之間的色相差距過大，這會導致主題的表達產生不和諧的感覺。

鄰近色

你可以直接選擇一組鄰近色，通常這是有效的，如上述兩組鄰近色的選擇。但是在色輪上，為鄰近色選擇一種基本的色彩，只是該調色盤走向精細化的一個開始。

與單色配色一樣，你要為你選擇的基本色彩進行進一步地變化。你可以對一個色彩進行深、淺、明、暗四個調子的調整，請保證總是能夠對一個色彩的明度和飽和進行變化和調整。正如上述的4個鄰近色組合，儘管你選擇了相鄰的藍色、藍紫色、紫色、紫紅色，但是這只是你的開端，你可以進一步地對每一個色彩進行明度和飽和度的調整，你不必擔心這會違反鄰近色的定義。

如果你對上述的紫色進行變化，可能會有三個版本的紫色，色彩更深、明度更亮、二者兼備。同理其他三個基本色彩。為此，我給出了一個案例，這個案例不是高畫質的，但是它卻能夠說明問題。

鄰近色的變化和應用

你看到上面的圖形了嗎？是的，請先觀察右上方的色輪，我們選擇了藍紫色、藍色、藍綠色三個相鄰的基本色彩，在每個基本色彩的基礎上，我們調整了各自的明度和飽和度，尤其是明度的變化非常大，請記住：明度最重要。

透過這種配色方式，我們得到了3組一共9種豐富的色彩，請你放心，在經過明度和飽和度的變化之後，這些色彩的色相併不明顯，不會如補色那樣對立和衝突，相反，其中有兩種基本色彩是複色，通常複色的影響是最小的。

我們利用這9種色彩，繪製了色輪下方的抽象畫。在這幅畫中，你能夠感受到空間感，這是由明度的差異化導致的，同時一些高飽和的色相使得畫面的視覺效果變得豐富。

這些所有的色彩並不會有衝突的感覺。它們都是鄰近色組成的，鄰近色的定義使得各自都包含有兩邊的成分，因此，容易形成和諧一致的觀感。

儘管鄰近色的配置通常是安全的，但是你還是要注意，位於鄰近色最兩端的色彩依然相隔遙遠，如上圖的藍紫色和藍綠色，有些鄰近色的兩端相隔更加遙遠，這種情況下，二者會產生一些如混色和互補色的效果。這是你需要注意的，當你需要這種效果的時候，你可以組合鄰近色最兩端的色彩。這種合理的差異化設計，使得鄰近色不僅可以應對肯定和支援等和諧主題，也可以應對需要產生衝突和強對比的主題場景。

總結

如你所見，我們介紹了單色配色和鄰近色配色的原理和方法論。我們希望你能夠從根本上理解這種理論，這使得你的設計生涯種有更多的可能。

正如文中所言，你不應當死記硬背這些配色方案，而應當吸取其中的配色思路和原理。

由於篇幅所限，我們將6大配色方法論分為了上中下三冊，期待你的下一次光臨。

下章內容

「一文掌獲配色能力」一勞永逸的配色方案，6大配色系統大放送（中）

如果文章對你有價值，讓你得到了提升，請你相信作者，並且關注他，轉發文章讓更多的人看到有質量的內容。或者用【打賞】餵食作者，讓他繼續為你奮鬥。如果你有疑問或建議，請留言告訴我。