如今用到漸變色的設計作品越來越多。用好漸變色，能夠給設計作品帶來精緻感。
但是漸變也是一把雙刃劍，漸變色用的不好，就是一場災難。
在剛開始嘗試做漸變的時候，我們往往會做出辣眼睛色彩來，就像這樣。
如何提升顏色搭配的感覺呢？難道只有用吸管吸取別人已經做好的成果這一個途徑嗎？
光是用吸管，可能存在誤差，特別是當吸取對象是半透明的時候，並且拿來主義對於自己提升往往沒有太大幫助。
本文就來深入地扒一扒漸變的原則和漸變的技法，用數字來剖析顏色構成並輔助漸變設計。
01
漸變是自然，純色是人工
漸變是自然界當中最真實的顏色。
我們身邊的顏色往往並不是單純的，純色多存在於工業產品中。牆是純色的，衣服是純色的，電子設備是純色的。
但出門看看，光影給世界帶來很多的變化，天空，海洋，大地其實都是漸變的顏色。
如果漸變是光影的呈現，應當符合一些自然的規律。光從哪邊來，漸變的顏色就在哪邊亮一些，在另一邊暗一些，看着才舒服。
舉個例子，下面這頁PPT中，手機的陰影在右下角，因此背景的漸變色是從左上到右下，顏色由淺到深。
如果將漸變反過來，會比較奇怪。
01
利用RGB數值做漸變
什麼是RGB？指的是通過對紅（Red）、綠（Green）、藍（Blue）三種顏色的相互疊加，得到各種顏色。
幾乎所有的電子設備都是採用了這一個色彩模式來完成顯示。一組燈或者兩組燈就是一個像素，通過燈亮度的調節，顯示出了所有的顏色。
RGB是一種比較難主觀去判斷混合結果的顏色模式，我們很難說30%的紅色，加45%的綠色，再加上53%的藍色，最後混出來是一個什麼樣的顏色。
但如果混合是有限制的，我們可以提前判斷RGB的混合結果。
這裏還需要補充介紹一個概念，就是光色色輪。
當兩道有色光混合時，得到的顏色就是這兩個顏色在色輪上的間隔的中間值。
舉個例子，下圖中，兩個球的顏色是一樣的，都是正紅色。
我給圖片的右邊覆蓋上綠色的密集圓點，紅色的球本身並沒有任何變動，但覆蓋圓點這個操作相當於在紅色中加入綠色的小燈泡，大腦接受信息，自動混合得到紅色和綠色在色輪上的間隔色——橙色。
我以動圖演示一下。
在光色混合原理下，通過控制RGB數值，我們能夠控制漸變的趨勢。
首先，我們可以控制單一變量。在PPT當中用0~255的整數來表現紅、綠、藍三種顏色的亮度。
當R、G、B分別爲0、0、0的時候，得到黑色。當R、G、B分別爲255、255、255的時候，得到白色。如果R、G、B三個數值在（0,255）區間內相等，我們得到的就是灰色。
在灰色的基礎上，如果我們將某一個數值增加，就能判斷結果將偏向增加數值對應顏色。
舉個例子，R、G、B分別爲190、190、190，我們得到灰色，將數值調整爲200、190、190，顏色將偏紅。
將數值調整爲190、190、200，顏色將偏藍。
利用這個結論做漸變，會準確而有趣。舉個例子，我們來看看這一張產品圖。
產品本身的顏色的顏色有點綠，那我在漸變中，就希望環境也偏向這個顏色。
第一步，選中漸變光圈的滑塊，設置第一個滑塊爲白色。
第二步，選中第二個滑塊，單擊油漆桶，選擇其它顏色。
第三步，單擊自定義，將R、G、B的數字調整爲190、200、190。
我在設置的時候通過數字就能就知道，這個漸變是從白色到灰綠的漸變。
反之，通過減少某一個數值，得到的結果將偏向增加數值對應顏色的補色。
具體地講，減少紅色相當於增加青色、減少藍色相當於增加黃色、減少綠色相當於增加紫色。
舉個例子，下面這張PPT，產品是偏向青色的。
我希望漸變也營造一種偏青的環境，那就可以設置第一個滑塊是白色，第二個滑塊在R、G、B都爲230的基礎上，大幅度減少紅色的數值，相當於增加紅色的補色青色。
通過數值，我們可以得到精確的漸變。
以上是針對單一變量的控制，我們還可以對兩個變量進行控制、比如說我想得到一個偏橙色的漸變，那麼我就可以在RGB數值相等的情況下，去增加紅色，然後再配以一點點綠色，那麼我就得到了偏向橙色的結果。
03
科學地利用HSL做漸變
什麼是HSL？
我曾經舉過一個例子，是關於一頂帽子。
H代表色相，指色彩可呈現出來的質的面貌。有人說，這帽子顏色很獨特，其實在說色相。
色相即各類色彩的相貌稱謂，你能叫出來的名字，就是色相 ，紅色、綠色、黃色等等。
S代表飽和度，也叫純度。它表示顏色中所含有色成分的比例。含有色彩成分的比例愈大，則色彩的純度愈高，含有色成分的比例愈小，則色彩的純度也愈低。有人說，這帽子顏色有點深沉，其實在說飽和度。
L代表明度，表示色所具有的亮度和暗度。有人說，這帽子有點亮眼，其實在說明度。
我們之前講到顏色的漸變中，最好有一定的聯繫，而不是天馬行空亂配。亂點鴛鴦譜容易出問題，兩個顏色最好有一定的共同語言。
HSL就是這樣的一個共同語言，在色相、明度和飽和度當中，我們固定兩個要素不動，然後只去修改其中的一個要素，這樣得到的漸變就會看起來過渡自然。
舉個例子，我固定明度和飽和度，然後去修改色相。
第一個顏色的色相設置爲140。
第二個顏色的色相設置爲100。
得到的就是一個不錯的漸變。
這樣的漸變既可以做背景，也可以做透明修飾。
遵從這個規律，我做出了一組色相的漸變。
除了色相的變化之外，還可以嘗試其它單個參數的漸變，舉個例子，固定色相和飽和度，然後來修改明度。
例如，上面兩頁PPT，我將明度壓低一些。就得到的是同個色相明暗的漸變，這種漸變在背景當中非常常見。因爲它本身看起來是渾然一體的。
並不是說所有的漸變都應該固定其它參數，然後變化單一參數，也可以有拓展。例如我們可以在變化色相的基礎上，再壓暗偏冷色的顏色。
我們注意上例中的第三個數值，左上角明顯比右下角要暗很多。
04
總結一下
總結一下，漸變處處都存在，做漸變最好能夠符合光影的規律，並且從數值上看，要有一定的聯繫。
我們可以利用RGB色彩模式，控制單一變量或者是控制兩個變量來準確找到想要的漸變方向。
我們也可以利用HSL色彩模式來做出過渡自然的色相漸變，明度漸變和純度漸變。
這篇文章不僅是想要介紹怎樣去得到一個漸變的色塊，更多的是想要通過分析我們描述色彩的方式，找到搭配的規律併爲我所用。
以上就是本期的分享~
黑白間設計
致力於在美與實用間尋找平衡
讓設計變得簡單
∨