略過導覽
學習設計

終極配色指南

學習運用色環,找出最佳配色方案

無論您正在設計應用程式、插圖,或是您樂團的最新專輯封面,了解哪些顏色搭配起來好看,都會對您的設計產生巨大的影響。但是顏色種類繁多,我們該從哪裡開始呢?這時色環就派上用場了。

在本文中,我們將說明什麼是色環、它如何幫助我們理解不同顏色之間的關係,以及最佳的配色方案。

準備好了嗎?讓我們開始吧。

目錄

等等,什麼是色環?

我們在之前的文章中介紹過什麼是色環。但在此回顧一下,有助於了解配色方案。

簡而言之,色環是用於研究顏色及其相互關係的框架。顧名思義,它的形狀像一個輪子,由 12 種顏色組成。但我們可以將它們分成三組來更好地理解它們:原色、次要色和三次色。

原色是紅色、藍色和黃色。我們稱它們為原色,是因為與次要色或三次色不同,我們無法將兩種顏色混合在一起產生它們。

次要色來自兩種原色的混合:紅色和藍色形成紫色,藍色和黃色形成綠色,而黃色和紅色形成橙色。三次色來自一種原色和一種次要色的混合,總共產生六種顏色:紅橙色、紅紫色、黃橙色、黃綠色、藍綠色和藍紫色。

An image showing primary and secondary colors on the color wheel.

三次色來自一種原色和一種次要色的混合。

基於色環的配色方案

只需看看色環,您可能已經可以分辨出哪些顏色搭配起來好看,以及為什麼有些顏色最好分開🥴 這可能是因為顏色有影響我們情緒的力量。想想情人節產品通常是粉紅色和紅色,或者道路危險標誌通常是亮黃色或橙色。

雖然我們的情緒可以作為一個有用的指南,但它們並不是決定最佳配色方案的唯一方法。事實上,顏色在色環上的位置說明了很多問題。讓我們仔細看看。

什麼是暖色和冷色?

顏色分類的一種方法是根據溫度,即暖色和冷色。將色環分成兩半,您可以將所有暖色(如紅色、橙色和黃色)與冷色(如紫色、藍色和綠色)分開。

An image showing warm and cool colors on the color wheel.

我們可以將色環分成兩半,將暖色和冷色分開。

暖色系通常傳達興奮和警覺的感覺。想想有多少維他命 C 產品——旨在提升您的能量——是以橘色錠劑的形式出現。或者想想我們如何將黃色與陽光聯繫起來,因此也與積極性聯繫起來。

自然地,冷色系則帶來相反的效果。溫度較低的顏色,如藍色、綠色和紫色,通常會散發出冷靜、悲傷或反思的感覺。

An image showing warm colors depicted in a sunset and cool colors depicted by the seaside.

暖色系往往傳達興奮和警覺的感覺,而冷色系則散發出冷靜、悲傷或反思的感覺。

什麼是類似色?

在使用類似色組合時,您可能會更加注意到暖色和冷色之間的差異。類似色是指色環上任何三個相鄰的顏色。它們搭配起來效果很好,因為它們之間沒有太大的對比,可以互相強化彼此的效果。

An image showing an analogous color combination on the color wheel.

類似色組合包含色環上三個相鄰的顏色。

以黃色為例。當您將黃色與橙色和紅色組合在一起時,您可能會開始想到火或其他高溫的情況。

但如果著重於黃色在色環上的其他鄰近顏色,例如黃綠色和綠色,您可能會發現自己從火堆旁冷卻下來,喝一杯清爽的萊姆汁。

An image showing analogous color schemes in fire and in lemon-lime juice.

類似色組合中的顏色彼此之間對比度不高。相反地,它們會互相襯托彼此所傳達的感覺。

什麼是互補色?

與類似色不同,互補色彼此之間差異很大。事實上,這種組合指的是色環上兩個完全相對的顏色。一些例子包括橙色和藍色、紅色和綠色,或紫色和黃色。

An image showing complementary colors on the color wheel.

互補色是指色環上兩個完全相對的顏色。

由於位於色環的相對兩側,它們通常由一個暖色和一個冷色組成,這意味著它們彼此之間形成鮮明對比。

使用這些組合,您可以營造高對比度,並傳達大膽和積極的感覺——想像一下橙色的夕陽照耀在藍色的海面上。*或者*您可以專注於一種顏色,並將另一種顏色作為點綴——想像一下閃耀在綠色聖誕樹上的紅色裝飾品。

An image showing complementary colors in a sunset and in a Christmas tree.

雖然這些顏色與色環上的藍色、橙色、綠色或紅色並非完全相同的色調,但它們仍然向我們展示了互補色如何直接對比或互相襯托。

什麼是分裂互補色?

喜歡讓一種顏色成為焦點,同時添加一些點綴的想法嗎?分裂互補色組合就是您的最佳選擇!

您可以使用等腰三角形來識別分裂互補色組合,其中每個角都指向不同的顏色。這意味著總共有三種顏色。一些例子包括紅色、黃綠色和藍綠色,或黃色、紅紫色和藍紫色。

**提示:**使用等腰三角形來識別分裂互補色組合?您需要確保兩個底色之間只有一種顏色。
An image of split-complementary color scheme on the color wheel.

使用等腰三角形,我們可以在紅橙色、綠色和藍色之間識別出分裂互補色方案。

不確定如何運用分裂互補色?您可能只需要從您的設計中退一步,散散步,讓大自然激勵您——尤其是如果您有幸住在被綠樹和藍天環繞的橙色岩石山脈附近的話。

雖然下圖中的顏色與我們在色環中看到的顏色並不完全匹配,但它仍然使用了紅橙色、藍色和綠色的色調——以紅橙色為中心。

An image showing a split-complementary color scheme in nature.

分裂互補色組合非常適合用於聚焦一種顏色,並使用另外兩種顏色作為點綴。

什麼是三元色?

秉持著使用三角形的精神,我們需要另一個三角形來找出下一個配色組合:三元色。這次我們需要一個等邊三角形,因為我們要找的是在色環上平均分佈的三種顏色——例如紅、藍、黃!

由於每種顏色之間的距離相等,三元配色組合會產生高對比度的效果。但這也意味著沒有兩種顏色太過接近,因此您不必擔心過於強調暖色或冷色。換句話說,三元配色方案非常適合傳達平衡與和諧的感覺。

An image showing a triadic color combination on the color wheel.

三元配色組合由在色環上平均分佈的三種顏色組成。

紅色、藍色、黃色、平衡——如果這些顏色和詞彙聽起來很熟悉,那麼您很有可能想到了荷蘭畫家彼埃·蒙德里安,他以只使用原色來傳達不對稱感而聞名。

An image showing the three primary colors Piet Mondrian used in his paintings in the 1930s.

荷蘭畫家彼埃·蒙德里安以只使用原色來傳達不對稱感而聞名。

什麼是四元色?

如果您認為三種顏色組合起來已經很多了,那麼準備好挑戰極限吧。四元色組合了兩對互補色——總共四種顏色。在色環上,您可以使用矩形或正方形來找出四元配色方案,每個角指向不同的顏色。

An image showing tetradic color combinations on the color wheel.

在色環上,您可以使用矩形或正方形來找出四元配色方案。

四元配色方案會讓您使用色環的三分之一。因此,如果您想要一種充滿活力、色彩繽紛的外觀,無論您是在設計引人注目的標誌還是製作冰淇淋聖代,這可能是您的完美選擇。

An image of a parrot with a tetradic color scheme.

雖然紅色很細微,但這隻鸚鵡就是一個活生生的(可能還會說話的!)四元配色組合。

但如果您擔心它可能有點太過花俏,您會想看看我們的下一個建議 👀

什麼是單色配色?

正在尋找與四元配色方案相反的方案嗎?您可能會對單色配色組合感興趣。單色配色方案不是在色環上組合不同的顏色,而是使用單一顏色的各種色調。您可能已經從它的名稱中猜到了——「單」(mono)表示單一,「色」(chromatic)指的是顏色。

An image showing a monochromatic color scheme on the color wheel.

單色配色方案不是在色環上組合不同的顏色,而是使用單一顏色的各種色調。

透過運用各種色相和亮度級別,單色配色組合讓您可以深入探索單一顏色。如果您希望在不失控的情況下增加一些色彩變化,這是完美的選擇。

An example of a monochromatic color scheme found in Nature.

我們可以在這張照片中識別出不同的藍色陰影——在天空中、水中,甚至在山脈中。

就是這樣!您現在不僅了解色環,而且還準備好像專業人士一樣混合和搭配顏色。要測試您學到的知識,請嘗試識別一些您最喜歡的設計中的配色組合。您也可以嘗試建立自己的調色盤,並使用我們的Mac 應用程式將其應用到您自己的設計中。如果您這樣做了,別忘了在InstagramTwitter上使用 #MadeWithSketch 標籤與我們分享!

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來看看有什麼新功能,我們都能讓您在幾分鐘內設定好並準備好開始創作。

免費開始使用
免費開始使用