設計師配色寶典!教你從零開始學配色(一)

4 評論 36389 瀏覽 15 收藏 15 分鐘

 

設計原則101——色彩理論

第一印象決定一切!大家都可以從各自的外表上大概看出一個人的性格。同樣的,這個理論也可以延伸到設計工作里。但是影響設計工作的因素有很多,但是 第一時間被關注到的應該是顏色。顏色反映了設計的整體感覺,有時候單憑顏色就可以調度起一個人的情緒、情感甚至回憶。如果沒有掌握色彩理論的基礎知識,你 會發現在日常工作和生活中,你忽略掉了很多細節。

找出哪些顏色配搭在一起很美膩并不是一件偶然的事兒,這其實是一項很科學道理的工作。不同的顏色組合適合不同的作品,而且這種類似固定搭配的組合規則并不能輕易被打破。讓我們從最基礎的部分開始了解色彩理論吧!

原色

設計師配色寶典!教你從零開始學配色(一)

所有顏色的源頭被稱為三原色,三原色指的是紅色、黃色和藍色。如果我們談論的是屏幕的顯示顏色,比如顯示器,三原色則分別是紅色、綠色和藍色,也就是我們熟悉的RGB。

間色

設計師配色寶典!教你從零開始學配色(一)

如果將紅色和黃色、黃色和藍色、藍色和紅色均勻混合,就會創建三種間色:綠色、橙色和紫色。將這些顏色應用進項目中,可以提供很強烈的對比。

三級顏色

設計師配色寶典!教你從零開始學配色(一)

三次色來源于間色與原色的混合,主要有:紅紫色、藍紫色、藍綠色、黃綠色、橙紅色和橙黃色?,F在,你應該了解了顏色到底都是怎么衍生出來的,也可以 了解色輪上的顏色組合都是從何而來。理解了色彩的原則將有助于在項目中選擇顏色。為自己的設計選擇一個合適的調性,并創建適量的對比度,讓設計工作更好地 展開吧!

接下來我們聊聊基于色輪我們可以得到的基本色彩組合。

互補色

設計師配色寶典!教你從零開始學配色(一) 設計師配色寶典!教你從零開始學配色(一)

互補色是指色輪上那些呈180°角的顏色。比如藍色和橙色、紅色和綠色、黃色和紫色等?;パa色有非常強烈的對比度,在顏色飽和度很高的情況下,可以創建很多十分震撼的視覺效果。

相似色

設計師配色寶典!教你從零開始學配色(一) 設計師配色寶典!教你從零開始學配色(一)

相似色是指在色輪上相鄰的三個顏色。相似色是選擇相近顏色時十分不錯的方法,可以在同一個色調中制造豐富的質感和層次。一些很好的色彩組合有:藍綠色、藍色和藍紫色;還有黃綠色、黃色和橘黃色。

三角色

設計師配色寶典!教你從零開始學配色(一) 設計師配色寶典!教你從零開始學配色(一)

三角色也是一組顏色。是通過在色環上創建一個等邊三角形來取出的一組顏色,可以讓作品的顏色很豐富。在上面的例子中,藍紫色和黃綠色就可以形成十分強烈的對比。

分散的互補色

設計師配色寶典!教你從零開始學配色(一)

分散的互補色和互補色的區別在于分散的互補色并不是取目標顏色正對面的顏色。拿上面的圖做例子來說吧,黃色的互補色應該是紫色,但是我們取紫色旁邊的兩個顏色——紫紅色和藍紫色。這樣子不僅可以有一個強烈的對比度,而且還可以讓顏色更豐富。

四方色

設計師配色寶典!教你從零開始學配色(一)

四方色是在色輪上畫一個正方形,取四個角的顏色。在上面的例子中是:紫紅色、橙黃色、黃綠色和藍紫色。這個顏色真的超棒的,不信可以自己用用感受一下,尤其是使用其中一個顏色作為主色,其他的三個顏色作為輔助色的時候。

四方補色

設計師配色寶典!教你從零開始學配色(一)

四方補色和四方色的差別在于四方補色采用的是一個矩形。通過一組互補色兩旁的顏色建立的色彩組合。如上圖中的互補色橙色和藍色,分別選用他們兩旁的顏色來建立矩形,最終取得橙紅色、橙黃色、藍綠色和藍紫色。

明暗

設計師配色寶典!教你從零開始學配色(一)

顏色的色調也可以影響顏色給人的感覺,就拿上圖的藍色來說,第一張是原圖,第二張添加了白色,第三張添加了黑色,同樣的藍色產生了不同的感覺。在實際應用中,可以在采用單色配色方案時,通過改變顏色的色調來創建不同的感覺。

暖色

設計師配色寶典!教你從零開始學配色(一)

暖色可以創造溫暖的感覺,暖色通常會讓人聯想起太陽、火焰和愛情。紅色是血的顏色,感覺是溫暖的,橙色和黃色會給人夏天的感覺。給圖像添加一個橙色的濾鏡,圖像看起來就會有溫馨快樂的感覺。

冷色

設計師配色寶典!教你從零開始學配色(一)

冷色也有其獨特的含義,通常會讓人聯想起涼爽的氣候、冬季、死亡、悲傷、冰、夜晚和水這些事物。冷色可以給人平靜、安寧、新人、干凈的感覺。紫色與尊貴經常聯系在一起,看起來十分內斂。

顏色的意義

紅色

紅色是代表愛情和激情的顏色。情人節的禮物通常都有一個紅色的盒子,或者是粉紅色,也就是添加一些白色的紅色。紅色也代表憤怒和血液。在火焰中可以 同時找到紅色、橙色和黃色。紅色也表示危險,所以很多表示停止的標識牌都是紅色的,因為紅色可以很好地吸引人們的注意。紅色是很強勢的顏色,當它和其他顏 色相遇時,比如搭配黑色,可以創建非常強勢的感覺。紅色可以搭配一些嚴肅的語氣和強硬的命令。

設計師配色寶典!教你從零開始學配色(一)

橙色

橙色代表了溫暖,但是并不像紅色那樣咄咄逼人。橙色能夠創建一個有趣的氛圍,因為它充滿了活力,而且橙色創造出的活躍氣氛并沒有危險的感覺。橙色可以與一些健康產品搭上關系,比如維生素C,畢竟橙子里也有很多維生素C。

設計師配色寶典!教你從零開始學配色(一)

黃色

提到黃色,經??梢月撓氲教柡蜏嘏?。使用橙色的時候,可以創造出一種夏天的好玩的感覺,黃色則帶給人口渴的感覺,所以經??梢栽谫u飲料的地方看到 黃色的裝飾。黃色也可以和懦弱與恐懼聯系起來,這個則是因為以前“yellow”這個詞也代表著這個意思。當黃色與黑色搭配在一起時,十分吸引人的注意 力,一個絕佳的例子就是很多國家的出租車都采用這種配色。

clip_image018

綠色

在西方國家,綠色是錢的顏色,這與他們的文化和財富有關。因為大多數植物都是綠色的。綠色也代表著經濟增長和健康。綠色經常用作一些保健食品的LOGO,因為看起來就十分貼近自然。綠色還意味著利潤和收益。如果搭配上藍色,通常會給人健康、清潔、生活和自然的感覺。

設計師配色寶典!教你從零開始學配色(一)

藍色

藍色是一個神奇的顏色,因為不同明度的藍色會給人不同的感受、想法和情緒。如下圖中所示,深藍色可以給人一種悲傷的感覺,讓人聯想起傷心時怎么聽都 不夠的藍調音樂。而淺藍色則通常會讓人聯想起天空和水,給人以提神、自由和平靜的感覺。藍天永遠都是平靜的,水流可以沖走泥土,清洗傷口,所以藍色也代表 著新鮮和更新。藍色給人冷靜的感覺,會幫助人放松下來。

設計師配色寶典!教你從零開始學配色(一)

紫色

紫色總是讓人不禁想起皇室成員的長袍。紫色可以更多地與浪漫、親密、柔軟舒適的質感產生聯系。紫色給人一種奢華的感覺,也有一種神秘感。下面這個葡萄酒網站就是極好的例子。

設計師配色寶典!教你從零開始學配色(一)

白色

白色通常與醫院聯系在一起,因為醫生們都是穿著白大褂的,而且醫院內部的裝修通常也是白色的。此外,宗教繪畫有時候也是沒有色彩的,白色也代表著圣 潔。白色通常給人干凈的感覺,比如白色的床單和衣服都讓人感覺很干凈。也可以代表棉花和柔軟的云朵。心理健康相關的事物也可以選用白色,白色也同樣適用于 衛生、清潔相關的設計。比如下面這個網站,就很好地利用了白色。

設計師配色寶典!教你從零開始學配色(一)

黑色

黑色通常與死亡有關,尤其是在美國。它可以代表腐壞,因為很多食物腐壞變質以后就是黑色的。黑色也代表邪惡,因為是白色的對立顏色,而白色通常代表 著純潔美好善良。黑暗和未知也會給人焦慮的感覺。很多圖像中,黑色表達了抑郁、絕望和孤獨。雖然黑色有很多負面的含義,但是黑色也是一個萬能色彩,當黑色 遇上其他顏色的時候會產生其他的意義。比如當黑色邂逅金黃色,就可以給人一種奢華、高檔的感覺;當黑色偶遇銀灰色,則會給人一種成熟穩重的感覺。下面的網 站就完美詮釋了這一點。

設計師配色寶典!教你從零開始學配色(一)

總結

作為一名設計師,了解色彩是一件必不可少的事兒。在設計的時候應該慎重地考慮和選用顏色。通過不同的顏色,可以創造出不同感覺的圖像。合適的組合可 以獲得關注,通過視覺傳達設計師所想,進一步拉近設計師與觀眾的距離,讓圖像更具力量。如果之前并不仔細考慮用色,現在開始,應該培養對于色彩的感覺。相 信客戶會看到一個不一樣的你,你的設計作品將會通過顏色建立聯想,更好地傳達信息。

原文來自:優設

原文地址:sitepoint

優設網翻譯:@木草彌生

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!