方格精選

你一定要知道的5大配色手法:補色、相似色、三等分、補色分割、矩形

更新於 發佈於 閱讀時間約 4 分鐘
視覺設計師在選擇顏色時,不僅僅要了解到不同顏色會引發的不同感官效應,還要了解不同的色彩間是否能夠互相搭配。這篇文章中,哈利熊整理了根據色環(Color Wheels)理論延伸出的色彩搭配技巧,來幫大家進一步了解如何配色。

HoliBear - 設計色彩學


品牌的顏色至關重要!之前在品牌行銷的顏色使用大全:不同性別、年齡層分別該用什麼顏色中,我們提到不同的顏色會產生不同的情緒效果。而設計師在選擇品牌顏色時,不僅僅要考量到不同顏色會引發的不同感官效應,還要了解色彩學基礎來選擇適當的明度與彩度。

這篇文章中,哈利熊整理了色彩應用的技巧,來幫大家進一步了解如何配色。


什麼是色環(Color Wheels)?

色環(又稱色輪)是在1666年由Sir Isaac Newton所發展出來的一個色彩理論。而這12個基礎顏色也被稱為色相(Hues)

我們從色環來看之前所提到的三原色、三間色以及複色。

色環(Color Wheels),又稱色輪

色環(Color Wheels),又稱色輪

三原色指的是紅、黃、藍三種顏色。而三間色指的是將三原色兩兩混合而組成的顏色,複色則是將三原色與三間色再加以組合而成的顏色。

接下來,我們以色環來看5種常用的配色手法。


5大顏色配色技巧

5大顏色配色技巧

5大顏色配色技巧

1. 補色(Complementary Color Scheme)

補色(Complementary Color Scheme)

補色(Complementary Color Scheme)

補色是色環上180度角、色環正對面的兩種完全互補的顏色,比如說紅色與綠色。這種搭配會產生強烈的對比,如果想要凸顯某物,這種組合方式非常不錯。而互補色在完全飽和的屬性下,會呈現一種生動活潑的效果。但是互補色不適合大範圍的使用,也較不推薦將互補色應用在文字上。

2. 相似色(Analogous Color Scheme)

相似色(Analogous Color Scheme)

相似色(Analogous Color Scheme)

相似色指的是色環上相鄰的三色,它們通常搭配起來都非常協調,創造出一種寧靜、舒適的設計感。相似色在大自然中隨處可見,這種配色手法和諧、令人身心愉悅。但小心,設計師在使用這種配色手法時,必須確保顏色間的對比度。通常設計師會選一種顏色為主,第二種顏色為輔,而第三種顏色則會與黑、白、灰搭配作為重點的使用。

3. 三等分(Triad Color Scheme)

三等分(Triad Color Scheme)

三等分(Triad Color Scheme)

色環上相隔120度的三色,如紅、藍、黃。這種顏色的搭配手法會使畫面非常豐富,在使用不飽和色相的情況下,效果會特別顯著。使用這種搭配手法必需選擇一個主色調,而讓另兩種顏色作為重點的使用。

4. 補色分割(Split Complementary Scheme)

補色分割(Split Complementary Scheme)

補色分割(Split Complementary Scheme)

補色分割配色手法是由「補色」延伸出來的一種形式。在選用補色的同時,運用補色兩旁的相鄰色搭配使用。這種配色手法與補色法有著同樣的視覺效果,但又不會那麼緊繃。對於初學者來說,這種配色手法是最為推薦的。

5. 矩形(Tetradic Color Scheme)

矩形(Tetradic Color Scheme)

矩形(Tetradic Color Scheme)

這種配色手法是由兩組互補色組合而成,在使用可以產生非常多的變化。有如圖的這種矩形使用方式,也有相鄰兩組補色的使用方式。在使用這種配色手法時,記得要選用一種顏色為主色調,也要注意到冷色系與暖色系中的協調。

留言
avatar-img
留言分享你的想法!
avatar-img
哈利熊HoliBear的沙龍
142會員
199內容數
哈利熊的職場生存之道與專業技能分享!
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/12
B2B行銷,也就是企業對企業的業務拓展,是一種常見的模式,但是市面上關於網路行銷的資訊,大部分都在B2C的面向上討論。其實網路行銷也可以對B2B行銷帶來很大的助益,尤其在Covid-19疫情肆虐的今天,網路行銷工具更是可以派上用場。今天我們邀請訪問到具有9年B2B行銷經驗的專家張毓瑋來為我們分享
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/05/06
價格是行銷4P中最有趣的部分之一,有許多行銷策略都是憑藉著在價格上面動的一些小心思,而讓大大提升客單價、企業營收增長。今天我們就來跟大家分享許多商家都愛用的「誘餌效應」!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
2021/03/17
接觸網路行銷的人,相信對SEO(搜尋引擎優化)這名詞不陌生,那SEM(搜尋引擎行銷)又是什麼呢?和SEO的差別在哪裡?在網路行銷中有什麼不同的用處?我們將為你解答!
Thumbnail
看更多
你可能也想看
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
當你邊吃粽子邊看龍舟競賽直播的時候,可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢? 本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章,你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!
Thumbnail
打造具有邏輯的 Figma 顏色命名體系,是提高設計效率並增添專業感的關鍵一環。 這不僅是優化工作流程的實用方式,更是為你的設計注入有條理的美感。
Thumbnail
打造具有邏輯的 Figma 顏色命名體系,是提高設計效率並增添專業感的關鍵一環。 這不僅是優化工作流程的實用方式,更是為你的設計注入有條理的美感。
Thumbnail
理解和實踐設計的「基本」原理對於任何設計項目的成功都是至關重要的。研究其他設計師如何實踐這些想法來構建他們自己的設計,也是學習創造更好設計的一個非常有價值的工具。然而,這通常是由「設計師的直覺」透過時間慮積經驗去實踐完成的。 那麼沒學過「藝術設計基礎」怎麼辦? 入來看看你也可以搞得懂!
Thumbnail
理解和實踐設計的「基本」原理對於任何設計項目的成功都是至關重要的。研究其他設計師如何實踐這些想法來構建他們自己的設計,也是學習創造更好設計的一個非常有價值的工具。然而,這通常是由「設計師的直覺」透過時間慮積經驗去實踐完成的。 那麼沒學過「藝術設計基礎」怎麼辦? 入來看看你也可以搞得懂!
Thumbnail
在上一篇文章,說明了如何使用向量圖層來描線之後,求好心切的朋友一定會想到,線稿畫完,要塗色了! 但是當你選擇向量圖層,把工具調成油漆桶之後,悲劇發生了,你會發現向量圖層是無法使用油漆桶的😭 起初可能以為自己眼花,但是月英這邊可以很肯定的告訴你,向量圖層無法用油漆桶。 解套方案是,需要設定把向量圖層
Thumbnail
在上一篇文章,說明了如何使用向量圖層來描線之後,求好心切的朋友一定會想到,線稿畫完,要塗色了! 但是當你選擇向量圖層,把工具調成油漆桶之後,悲劇發生了,你會發現向量圖層是無法使用油漆桶的😭 起初可能以為自己眼花,但是月英這邊可以很肯定的告訴你,向量圖層無法用油漆桶。 解套方案是,需要設定把向量圖層
Thumbnail
這是上Krenz老師的透視課第三堂筆記。 這堂課的重點是「旋轉」。
Thumbnail
這是上Krenz老師的透視課第三堂筆記。 這堂課的重點是「旋轉」。
Thumbnail
我們從小認識色彩,很習慣以彩虹的七色:紅、橙、黃、綠、藍、靛、紫做為色彩的分類,也朗朗上口,但彩虹七色的說法是從何而來呢? 另外一提,中國大陸的彩虹七色是紅橙黃綠青藍紫,青是藍綠之間的色彩,靛是藍紫之間的色彩,隨著文字敘述的差異,彩虹的樣貌也隨之不同呢。
Thumbnail
我們從小認識色彩,很習慣以彩虹的七色:紅、橙、黃、綠、藍、靛、紫做為色彩的分類,也朗朗上口,但彩虹七色的說法是從何而來呢? 另外一提,中國大陸的彩虹七色是紅橙黃綠青藍紫,青是藍綠之間的色彩,靛是藍紫之間的色彩,隨著文字敘述的差異,彩虹的樣貌也隨之不同呢。
Thumbnail
基本字型有玄機 字型是構成文字的基本元素,可分為中文與英文兩個組合。 中文的基本字型為明體與黑體。 明體的特徵為橫筆劃較細,豎筆劃較粗,橫筆劃的尾部份呈三角狀。由於明體給人纖細、高貴的印象,所以被運用於書籍內文。 黑體橫豎筆劃的粗細相同,故予人強而有力又理性的形象,常被用在主題標語或是小標題等地方。
Thumbnail
基本字型有玄機 字型是構成文字的基本元素,可分為中文與英文兩個組合。 中文的基本字型為明體與黑體。 明體的特徵為橫筆劃較細,豎筆劃較粗,橫筆劃的尾部份呈三角狀。由於明體給人纖細、高貴的印象,所以被運用於書籍內文。 黑體橫豎筆劃的粗細相同,故予人強而有力又理性的形象,常被用在主題標語或是小標題等地方。
Thumbnail
自然界及日常生活中有許多的物體會發光。藉由適當的檢測技術,我們可以對物體所發的光進行量測及分析,而其中一種常見的方式是利用「光譜儀」量測光的「光譜」。光譜量測可以告訴們許多光的資訊,如強度、波長等。但是當偵測到的光譜十分複雜時,可利用「光譜擬合」技術進行分析,找出光譜背後隱含的意義。
Thumbnail
自然界及日常生活中有許多的物體會發光。藉由適當的檢測技術,我們可以對物體所發的光進行量測及分析,而其中一種常見的方式是利用「光譜儀」量測光的「光譜」。光譜量測可以告訴們許多光的資訊,如強度、波長等。但是當偵測到的光譜十分複雜時,可利用「光譜擬合」技術進行分析,找出光譜背後隱含的意義。
Thumbnail
大家久等的九種構成原理下集來囉!讓我們看看還有哪一些超實用的構成能用在我們的設計上吧! 第五種: 十字構成 十字構成為垂直與水平的構成方式,可以增加畫面的平衡感, 其中一條線需為斜線,比較不死板更為動態。 參考:“日本KORIN展”海報設計 第六種: 圓形(方形)構成 圓形構成具有曲線美又有視覺
Thumbnail
大家久等的九種構成原理下集來囉!讓我們看看還有哪一些超實用的構成能用在我們的設計上吧! 第五種: 十字構成 十字構成為垂直與水平的構成方式,可以增加畫面的平衡感, 其中一條線需為斜線,比較不死板更為動態。 參考:“日本KORIN展”海報設計 第六種: 圓形(方形)構成 圓形構成具有曲線美又有視覺
Thumbnail
視覺設計師在選擇顏色時,不僅僅要了解到不同顏色會引發的不同感官效應,還要了解不同的色彩間是否能夠互相搭配。這篇文章中,哈利熊整理了根據色環(Color Wheels)理論延伸出的色彩搭配技巧,來幫大家進一步了解如何配色。
Thumbnail
視覺設計師在選擇顏色時,不僅僅要了解到不同顏色會引發的不同感官效應,還要了解不同的色彩間是否能夠互相搭配。這篇文章中,哈利熊整理了根據色環(Color Wheels)理論延伸出的色彩搭配技巧,來幫大家進一步了解如何配色。
Thumbnail
要如何為品牌設計一套獨特配色,使它既可以傳遞產品資訊,實現商業效益,同時又符合美學法則?這樣的色彩構成,需要協調多方面元素,如不同色彩間的關係與比例,以及對比、過渡、調和等色彩效果。 色彩對比是常用的手法,是把兩種或兩種以上的色彩並置所產生的對比現象。
Thumbnail
要如何為品牌設計一套獨特配色,使它既可以傳遞產品資訊,實現商業效益,同時又符合美學法則?這樣的色彩構成,需要協調多方面元素,如不同色彩間的關係與比例,以及對比、過渡、調和等色彩效果。 色彩對比是常用的手法,是把兩種或兩種以上的色彩並置所產生的對比現象。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News