超多案例!零基礎學配色系列之黃色+綠色篇

@飛屋睿UIdesign?:人氣超高的從零開始學配色教程出進階版咯。進階版不僅增加了更多案例,而且案例的配色也越來越豐富,特別全面的系列教程,建議收藏。

往期回顧:

  1. 《帶你重新全面認識色彩系列之橙色進階篇》
  2. 《超多案例!零基礎學配色系列之紅色+藍色篇》

黃色

黃色是光之色彩,因此,在整個色譜上,它是最亮的存在。當你想要提亮整個畫面,黃色是不二之選。黃色同時也是一種暖色,可以表達出一種溫暖歡快的感覺,它是黯淡顏色的救世主,明亮的黃色一旦出現,必然賦予了畫面更多的活力。而我們對黃色的運用也必然需要進入其情感空間,才能更好掌握各種色調的黃色所賦予的不同魅力。

不同的黃色調表達了不同的情感基調,明度和飽和度都較低的黃色隱隱透出了綠色,因此,當你想要降低黃色的溫度,不妨考慮降低它的明度或飽和度

超多案例!零基礎學配色系列之黃色+綠色篇

在網頁中所使用的黃色,以明度較高為多。大多是在表達可愛、溫暖、歡快、活潑。大面積運用明亮的黃色,可以讓整個頁面充滿活力。由于黃色并不如紅色那么搶眼,但也足以奪人眼球,因此,增加頁面的吸引力,從某種程度上說,黃色是優于紅色的。

黃色的頁面給人以一種明亮、積極向上的活力,高明度、高飽和度的黃色作為背景色,以黑色作為搭配,剛好降低黃色的亮度和溫度,讓整個畫面光明和黑暗兼有,非常具有躍動感。

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

可見黃色作為光之色彩,想要平衡其強烈的光感,就要增加黑暗,比如純黑作為極好的搭配。這種強烈的對比,碰撞出了巨大的活力。很多創意機構的網頁都喜歡這一配色,也是希望能傳達出這一信息。

黃色和白色等其他無彩色搭配都非常相得益彰,尤其當它作為背景色時,會讓出現在這背景上的任何物體都顯得更加光亮。

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

黃色除了作為大面積背景使用,也可以作為強調色,在畫面比較暗的場景里運用黃色作為強調色,就會增加整個畫面的亮度,讓作品活躍起來。

如下頁面中,整個風景圖作為背景,天色顯得有點暗,這時在其上方增加黃色的文字就改變了整個背景的平淡無奇。 當明亮的黃色作為主色使用時,它其實也起到了強調的作用,這時無論背景是黑色亦或白色,它都能輕而易舉的凸顯出來。

超多案例!零基礎學配色系列之黃色+綠色篇

將黃色作為主色,讓畫面更加鮮明活潑。

超多案例!零基礎學配色系列之黃色+綠色篇

黃色常見的搭檔是藍色,黃色的溫暖和藍色的涼意,黃色的歡快與藍色的憂郁,在色輪上看它們彼此是相隔120度的對比色,因此能相互烘托對方的特色。

用黃色作為背景,也可以用藍色作為主色,搭配起來相得益彰,只是活力并不如黑色搭配來得多,而也適合用在相對需要冷靜的場合

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

黃色與藍色在比例上持平,也不會讓畫面顯得沖突。

超多案例!零基礎學配色系列之黃色+綠色篇

黃色可以與任何顏色搭配,而每種顏色都需要與黃色調整好彼此的比例,保持調性的和諧。

黃色和綠色是鄰近色,因此在運用配色時,降低其明度,就能讓畫面顯得更為“柔和”,整個畫面顯出古典的意味,低明度的黃色是具有懷舊色彩的,因此在懷舊這一主題中常常用到。

超多案例!零基礎學配色系列之黃色+綠色篇

黃色可以很張揚,也可以比較低調。低明度低飽和度的黃色是最接近自然的原色。由于它的存在感比較弱,可以作為閱讀的背景,而又比白色多了幾分陽光的味道。

柔和低調的黃色作為背景,類似紙的顏色,在此基礎上,選用金色作為主色,讓配色顯得溫暖又華麗。

超多案例!零基礎學配色系列之黃色+綠色篇

后記

可以看到黃色作為背景色出現的時候居多,它應該是一個能承載一切的顏色,它的功能有點像陽光。有黃色在的地方,就象征著溫暖。

綠色

綠色所表現的最大特質就是綠色植物,因此它會讓人聯想到森林或草原。綠色本身是一種中性色,也就是它可暖可寒。夾雜黃色的綠色就會具有暖意,而夾雜藍色的綠色則帶著寒冷。前者會聯系到陽光下的嫩芽,而后者會浮現出湖水的畫面。

某些時候,綠色象征著和平,帶來寧靜溫馨,而又有一些時候綠色則象征妒嫉、邪惡等緊張,總之,綠色的色調寬泛到幾乎任何行業都可以運用到它。寬泛的綠色色調充滿了非常廣闊的情感空間。

超多案例!零基礎學配色系列之黃色+綠色篇

綠色屬于大自然色系,在大自然的色彩中,最飽和的綠色幾乎是不多見的,因此中等以及中等以下飽和度的綠色相對較多,因此在運用時需注意這一點。

飽和度并不是越濃烈就越能凸顯它的特質,往往過高的飽和度色彩會毀掉原本自然的一面而顯得非自然。

利用青蘋果本身的色彩作為大圖背景就可以讓綠色表現出其豐富而細膩的自然感覺。

超多案例!零基礎學配色系列之黃色+綠色篇

茶文化為主題的網站也非常適宜綠色作為主色,配色時,為了表現一種古舊典雅,最好能壓低綠色的明度。

超多案例!零基礎學配色系列之黃色+綠色篇

綠色帶來和平,同時也能給人以朝氣蓬勃的感覺。它象征著一種生命力。這是其他任何色彩都不能比擬的。而單一的綠色近兩年越來越少用到,而更多和藍色或黃色等臨近的色系搭配,讓畫面更加柔和豐富。

下面這兩個頁面都采用了綠色的漸變色系作為背景,表現出綠色更加自然的一面,讓綠色不至于呆滯。

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

綠色和紅色是一組對比色,對比色的搭配顯得跳脫而活躍,應用得當時效果相當出彩。

下面這個頁面帶著藍色調、高飽和度高明度的活潑的青綠色,與熒光粉紅搭配顯得分外明朗,時尚感滿溢。

超多案例!零基礎學配色系列之黃色+綠色篇

柔和的綠色搭配粉色盡顯甜美溫馨,盡管是對比色,保持了豐富的色彩層次。

超多案例!零基礎學配色系列之黃色+綠色篇

 

超多案例!零基礎學配色系列之黃色+綠色篇

低明度的綠色帶著冷感,色相上稍微增加點黃,最終表現為豆綠色,頗有自然風的感覺,而配圖的選擇也應該盡量增加色溫,讓整個畫面暖和起來。而飽和度、明度略低的綠色,則擁有一襲復古氣質。這樣的配色顯得非常別致。

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

超多案例!零基礎學配色系列之黃色+綠色篇

后記

綠色搭配的重點在于找準其自然的屬性,大自然是最好的調色師,當你學會了自然的一招半點,靈感的小宇宙都會不期而遇來個小爆發。

2016年流行色:《2016流行色彩!如何在設計中運用潘通年度代表色?(附優秀案例)》

「色彩科普系列教程」

  1. 紅色篇:《設計師的讀書筆記!帶你重新全面認識色彩系列之紅色篇》
  2. 橙色篇:《深入淺出學配色!帶你重新全面認識色彩系列之橙色篇》
  3. 黃色篇:《深入淺出學配色!帶你重新全面認識色彩系列之黃色篇》
  4. 綠色篇:《深入淺出學配色!帶你重新全面認識色彩系列之綠色篇》
  5. 藍色篇:《深入淺出學配色!帶你重新全面認識色彩系列之藍色篇》
  6. 紫色篇:《深入淺出學配色!帶你重新全面認識色彩系列之紫色篇》

原文地址:ifeiwu

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 22
點贊 18

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。