前言

色彩學，或者說是配色技能，是我們設計師最需要的技能之一，普通人來說，談論一個物體外在，經常用到的2個緯度，那就是形色，形是指輪廓，色當然就是指它表現出來的顏色，色彩。

原理

我們看到的任何顏色的物體，其實都是沒有顏色的，是包含了各種顏色的光線，照射到物體的表面，例如一個綠色的蘋果表面，它吸收了陽光的大部分的色彩，唯獨綠色無法吸收，那就反射了綠色，你的眼球看到了這個反射的光線，於是你的大腦判斷，這個蘋果是綠色的。

對色彩的認知和配色的技巧，對於大部分人來說，都是靠天生的色彩感知和後天的環境影響，天生的感知來自眼球對色彩的敏銳度，大部分人都非常接近，甚至是一模一樣，但是後天環境的影響就大不同了。

黃色，人類最喜愛的顏色之一，尤其是男性朋友。

就如下面這張不知道日出還是日落的圖，就知道黃色是來自大自然的希望之色，生命之色。

如果用一句話概括黃色的特點，那就是：最明亮的顏色。

學過畫色彩的同學都知道，顏料三原色分別是紅黃藍，紅和黃都是屬於暖色，而黃就是真真正正的暖了，而不是熱。

上面說的是大自然賦予世界的顏色意義，而人類社會賦予黃色的意義又是什麼呢？

其實非常多，例如在中國，黃色代表收穫，權力，高貴，輝煌，舉個例子，如果你還記得《賣炭翁》一文，裡面有一句“翩翩兩騎來是誰？黃衣使者白衫兒。”

黃衣使者就是指在朝裡當大官的人。你就說黃色屌不屌？屌不屌？杰倫說：“超屌的！”

但是在西方，黃色並不是什麼好東西，除了象徵愛情這個比較靠譜之外，其它大部分都是貶義詞，例如，腐敗，例如，膽小，例如，卑鄙等等，哎，他們的世界我們不懂，我們只討論和學習中國的黃色用法，OK？

01 高貴

在中國古代，黃色常常被看作君權的象徵。這起源於中國農業民族的“敬土”思想。按照上古的陰陽五行之說，黃色在五行中為土，放在五行中是“土為尊”。而在儒學中也認為以漢族為主體的統一王朝是一個“中央土”的帝國，有別於周邊的“蠻夷”，從而將黃色與“正統、尊貴”聯絡起來，為君主的統治提供了合理性的論證。

為了強化皇家的權威，黃色就只能皇家的人才有資格使用。慢慢地，黃色在中國也就成了高貴的顏色。

普通老百姓可以穿什麼呢？

嗯，就是這種幾乎沒有什麼鮮豔色彩的衣服，這就是“布衣”，材料和色彩都是有強烈的廉價感，不過這個的確只是在古代，看看現代，這個配色幾乎就是高品質的代言詞啊！

是不是特別潮？

但是如果你穿上一身鮮黃色，那可能會有“帝王之氣”了！！

世界變得有點太快了，我們要跟得上世界運轉的速度才不會被拋棄。

好了，車開歪了，我們繼續回到講色彩配搭上。

需要特別指出的是，在很多情況下，我們都將黃色與金色混為一談，而實際上，金色並非單一的一種顏色，而是作為一種質感呈現的。在實際的使用當中，需要應用到多種黃色的組合才能實現，而在印刷中，也需要用燙金等特殊的印刷方式才能實現。

02.色*情

到了現代社會，我們卻更多的將黃色與色*情、低俗聯絡到了一塊。如小黃片、黃段子等說法。

這個觀點主要是起源於19世界末的英國，當時英國創辦了一本名為《The yellow book》的雜誌，裡面的內容經常涉及到一些色情內容，並且雜誌的封面也被設計成黃色。碰巧當時法國的許多廉價小說也喜歡將封面做成黃色的，慢慢地，黃書就被認為是難登大雅之堂的低俗之作，久而久之黃色就有了色情、低俗的寓意。

你看，知識太重要了！哪怕是流氓，你也得做一個有文化的流氓是不？

03注目

黃色是一個高可見的色彩，這個高可見是明顯引人注目的，因此它常常被用於健康和安全裝置以及危險訊號中。交通標示、安全島的塗色、減速板、警告標線、火車塗裝等等皆多采用黃色（與黑色相間）來提醒人們的注意力。

也正是因為黃色的這種高可見，所以在螢幕中可能過於吸引眼球。位於白色背景中的黃色看起來非常吃力。想要黃色有比較良好的閱讀舒適性，最好是搭配黑色應用。

每一個顏色，都可以分裂為千千萬萬種，例如電腦上就是用256個明度和純度級別去表達顏色，那麼黃色我們設計中經常使用到的有哪些，又該如何使用呢？

黃色給人的印象就是這樣的，檸檬黃當然是鮮活輕快，偏向橙的黃，會輝煌，而深沉的黃，就變成了懷舊甚至是汙染。

這次我們換一個方式去表達，直接說一下黃色和其他顏色是如何配搭的，怎麼搭才更好看。

黃色與黑白搭配的組合是個非常經典，而且很有個性的配色方案。由於黃色明度非常高，因此很少出現搭配白色單獨使用。在大多數狀況下，黃色與白色、黑色這兩個無彩度的顏色可以搭配得相當好。

色彩明亮度、視覺強烈的黃色可以很有效地點亮純黑的沉寂，黑色的重量感也恰好可以壓住黃色的輕飄，因此黃黑配色是既衝突，又和諧的配色方案。

黃色為主色，黑色為輔色

有了黑色穩重，無論黃色怎麼跳脫，整個畫面都是和諧統一的。

黑色為主色，黃色為輔色

由於黃色的高亮度，作為點睛色也非常合適，能將畫面主題很好地突顯出來

黑色為主色，暗黃色為輔色 

在深色的襯托下，黃色更容易呈現出厚重感，形成我們常見的金色

下一個

黃+綠

黃色配綠色，讓人一下子就問道了酸酸的味道，當然，那也是年輕的人味道。

由於在色相環上相鄰，黃色與綠色的搭配是調和性相當高的色彩組合，並且也是自然界中很常見的色彩組合：想營造春天與自然的原野視覺效果，試試黃色與綠色的組合吧。

黃色為主色 ，綠色為輔色

由於黃色的高亮度，作為點睛色也非常合適，能將畫面主題很好的突顯出來

綠色為主色，黃色為輔色 

由於明度差的關係，黃色可以很好地從綠色中跳出。

黑色為主色，黃色為輔色 

低飽合度的黃色與綠色搭配，有種滄桑感，很有復古的風格

到了黃紫這個最讓人舒服也足夠潮的配色了。

色彩環中，黃色的互補色是紫色。它們是對比度差異大的一組互補色配色。由於紫色在視覺心理上帶有迷幻、神祕的感覺，但黃色可以很有效地平衡這種心理感受。也因此黃色與紫色的搭配容易產生相當強烈的視覺強度。

黃色為主色，紫色為輔色 

由於黃色的高亮度，非常活潑，如果輔助色比較冷靜，那麼一下子就可以把輔助色很好地突出，如右邊這個海報，不過，這個海報的標題字不應該和人物的腳重合，破壞了這個字型的完整性，當然，這個和配色無關，我就是多嘴說一句而已。

紫色為主色，黃色為輔色 

紫金，高貴、神祕的配色方案，剛剛說了，黃色和活潑，紫色很安靜，那麼如果紫色佔據大面積的時候，黃色必然非常非常跳！ 很適合做一些需要強力突出主題的設計。

好了，終於說到紅黃配搭了。

這個配色，全中國到處都是！！

不過，說真的，在畫這2個色塊的時候，我腦海中馬上出現了一個品牌，是哪個？

哈哈

這個啊！

如果你還是不太熟悉，下面這張你應該認識。

哈哈哈~這個logo設計得太強大，過目不忘啊！

說回到正經的。

黃色和紅色可謂是黃金搭檔。它們同為暖色系的色彩，並且在色彩環上擁有鄰近的共有色。大面積的黃色與紅色搭配讓人感覺版面非常溫暖甚至炎熱，用在促銷、運動類的設計上簡直最合適不過。

在中國傳統配色中，常使用視覺感受接近黃色的金色，來搭配紅色使用，容易讓人感受到華麗、節慶的氣息。

例如。。。

這個配色好不好看先不說，它必須是好吃！

對不對？

好了好了，看點正經的設計。

黃色為主色，紅色為輔色

雖然同樣是暖色，但是紅黃的對比還是非常強烈的，而且特別有買買買的衝動，也是有流口水的衝動。

黃色作為底色，紅色一下子就跳出來了。

紅色為主色，黃色為輔色 

紅色為主，其實就是非常的喜慶，隨便你怎麼配，反正都是熱情和喜慶。

而暗黃配暗紅，就是非常有故事性和質感的配色了。

黃藍，是標準的對比色配搭

黃色與藍色的組合亦具有相當高的對比度，並且都是鮮豔的色彩，所以容易營造出高彩度、活潑的感覺。

黃色與藍色可以合成綠色，因此在畫面中加入綠色，則可以減淡衝突性，讓顏色對比更協調。

在自然界中，色彩鮮豔的動物亦常演化出黃藍的配色組合。

當然，藍黃也是非常具有高貴的帝王之氣，例如龍袍就是黃中帶藍。

又或者你看看今年騰訊的月餅。

就是黃藍配搭的。

黃色為主色，藍色為輔色 

在淺藍和檸檬黃的配搭上，非常青春活力，經常看這種配色，會讓你覺得自己年輕了幾歲。

藍色為主色，黃色為輔色 

藍色是冷靜的，如果想打破這種平靜，一個跳躍的黃色就是最佳選擇。

左邊這個飲料是藍色的，所以廣告選擇了藍色主題，為了創造活躍的氣氛，設計師選擇了檸檬黃的字型+動感的人物素材，一下子就活力十足了。

黃藍的深色系配搭

幾乎不用多說了，這種高貴感，一般配色根本出不來這個效果。

給一張大圖大家感受一下對比。

下面這瓶啤酒的高貴感，根本不比軒尼斯少。

無論是設計方式和配色方案，都是一級棒！

最後，講一下褐色。

復古色-褐色

在黃色中加入適度的灰色，就可以形成一種完全不像黃色的黃色——褐色，我們也常稱作咖啡色、茶色。它完全不具有黃色原本明亮、輕快的特徵，而是呈現出渾濁、滯重的感覺。

暗淡的褐色在視覺上給人傳遞出頹廢、消沉的情緒，不太適合用在積極的主題上，但它卻非常適合營造工業化、復古的氛圍，配合紋理、材質的使用，可以給人飽經歲月打磨的厚重感。

基本上，案例就講完了，我們來總結一下。

在大多數的設計中，我們之所以選擇黃色，是因為想表達充滿能量、溫度、生命力的主題，所以我們多數會選擇明度較高的黃色。大面積運用明亮的黃色，可以讓整個頁面充滿活力。

由於黃色高明度的特性，在網頁頁面配色的時候可適當新增明度較深的顏色，色階層拉開，並起到協調刺眼的豔度作用。黃色飽和度、明度的不同變化傳達不同的意義和作用。

雖然黃色並不如紅色那麼搶眼，但也足以奪人眼球，從增加頁面的吸引力的角度來看，黃色甚至是優於紅色的。

講得那麼好聽，你倒是操一個案例啊！

好，操！

我們來以TFBOYS的專輯為素材和內容，設計一個宣傳網站。

一、確定主色調及大框架

1、選擇明黃色為主色調，能很好的體現TFBOYS青春、陽光、正能量的形象氣質。  

2、採用左右均分非對稱的頁面結構。

二、將內容排版好

1、字型選擇簡潔無襯線偏現代的字型。

2、字型顏色以黑色為主，壓住明度高的背景色，輔以紅色，豐富頁面對比度。

三、排版細節解析

四、新增對比模組

1、由於當前文字佔版面比例比較大，加入圖片及色塊模組可以很好的豐富頁面視覺效果。

2、增加高飽合度的對比色，使頁面在視覺上有跳躍性。

duang~~~ 一個頁面的大部分設計完了~

看一下細節的處理

中英文字型大、小 、粗、細有明顯對比，形成節奏感

左邊色塊的高彩度，與右邊偏灰暗的照片形成對比，視覺上顯得豐富而不雜亂。

這個位置的摳圖用到了一個小技巧，那就是圖層疊加模式。

一般如果是淺色背景的圖，我們可以直接採用正片疊底模式，這樣照片就會直接透到背景上，並且可以保留原照片的光影，當然還是需要你用畫筆處理一些細節，最後才能達到想要的效果。

最後把衣服的紅色改成了黃色，整體會更加協調一些。

最後，走一張完整大圖！

感覺如何？

是長大後的tf你喜歡多一些還是小時候的tf你更喜歡？

不不不，是這個案例你喜歡不？

再來多一個案例吧！

我們來做一個餐廳的海報，

因為是定義為早餐的，

所以我們只會用清淡一些的黃色，

不會濃厚得像晚餐！

一張食物的元素圖。

1.摳好素材，大致確定版式。

2.調整背景的顏色，加入一點點明暗對比，形成一點空間感。

色調控制好了，接下來。

3.加入點綴素材，注意素材的色調以及光影一致性。

4.將標題和影象的關係處理好。

基本的骨骼佈局也全部出來了，繼續細節部分。

5.利用圖片的空隙新增文案(其實是設計佈局的時候，就要預留好輔助文案的位置的)

6.新增光影細節， 以及點綴小素材等

在素材的選取上要多注意元素之間的一致性

很多圓形元素在重複出現，這樣就千萬不要出現其它奇怪的形狀了。

duang~ 一張促銷的早餐海報就出來了。

編輯：千鋒UI設計

來源：龐門左道