配色速成:如何使用配色方案?

  • 為什麼要學色彩學?
  • 別人的配色方案我要怎麼運用?
  • 推薦給新手的配色網站
  • 題外話:黑白灰會算進配色方案裡嗎?

為什麼要學色彩學?

我們人類透過視覺看到色彩,並馬上把色彩跟一些既定的感覺連結在一起

這種反應是進化留下來的痕跡,畢竟遠古時代看到紅色的果實,大家就知道要嘛是超甜美,不然就是有毒不能碰,所以紅色才會讓人感到刺激。

相反地,藍色讓人聯想到天空、大海、寧靜和穩定,這就是為什麼很多銀行和顧問公司都愛用藍色。

顏色就像背景音樂一樣,它默默地設定了情境,讓我們自然而然地做出反應。

這也是為什麼設計師要學習色彩學的最大原因:色彩能夠傳遞訊息和情感,而這些訊息往往比文字還要強烈

我們可以利用色彩來強化視覺層次、創造焦點,甚至影響使用者的情緒反應和決策

一定要知道的色彩學超基本術語

色相 (Hue)

色相就是我們平常說的「顏色的名字」,比如紅色、藍色、黃色。
當你在說「這是一件檸檬黃的襯衫」,其實是在說襯杉的色相是檸檬黃色。

明度 (Value)

明度是指顏色的「亮度」或「暗度」。

你可以把它想像成光線的開關,越亮的顏色明度越高,像是白色或淺黃色。

越暗的顏色明度越低,像是深灰色或黑色。

所以,明度高低決定了這個顏色是接近光亮淺色、還是接近陰影深色。

彩度 (Saturation)

彩度可以理解成顏色的「純度」或「飽和度」或「鮮豔度」。

彩度高的顏色很鮮豔,就像夏季陽光燦爛大晴天萬里無雲的超藍天空。

彩度低的顏色則顯得有點灰灰的,像是冬季陰天又起了濃霧,看什麼都灰濛濛淡淡的感覺。

當然還有更多術語,但最基本先知道這幾點,開設計軟體選色才會知道為什麼選色器介面長這樣。

什麼是無色彩?

黑、白和各種灰色就是「無彩色」,沒有彩度的顏色。

因為彩度指的是顏色的鮮豔程度,而黑、白、灰這些顏色本質上沒有飽和度,所以它們不是 「紅橙黃綠藍紫」這種「有彩色」(有彩度的顏色)

但是黑白灰能夠搭配所有的顏色,在介面設計上非常常用。

有個業界流傳的潛規則:盡量不要使用色碼 #000000 的純黑色

因為在大自然裡很少有真正的「純黑色」,所以純黑色會顯得突兀不和諧。

當然,如果是為了強調凸顯什麼,純黑色還是挺好用的。

別人的配色方案我要怎麼運用?

自己不知道怎麼配色比較好看的話,參考別人幫你整理好的配色方案、模仿別人的最快。

講是這樣講,我保證一個新手看著配色方案那整排顏色,還是不知道自己該怎麼套用在產品上。

通常在設計中,我們會有一個主色(這是設計的核心顏色),然後搭配 2-3 個輔助色來支持主色,增強設計的多樣性和層次感。

當然也不一定非得 5 個顏色都用上,配色方案只有 3 種顏色或 4 種也可以。

60-30-10 法則

在設計中,主色和輔色的比例有一個簡單好懂的「60-30-10 法則」。

  • 主色(60%):這個顏色是整個設計的基調,通常用於最大的設計區域,如背景、主要的 UI 元件或是整個品牌的代表色。它確定了設計的整體風格和氛圍

  • 輔色(30%):這些顏色用來支持和強化主色,通常應用在次要元素上,比如按鈕、標題、圖示等。輔色的作用是增添變化和層次,讓設計不會顯得過於單一。

  • 點綴色(10%):這些顏色是用來突出設計中的關鍵元素,通常是最醒目的部分。它們可以用來吸引注意力,強調行動呼籲(CTA)按鈕,或是其他需要重點突出的地方

推薦給新手的配色網站

如果你超超超新手上路,我推薦這個網站:

Color Hunt - Random Color Palettes

https://colorhunt.co

這個網站給出的配色方案由 4 種顏色組成,比例大約是:

  • 1 主色(40%)
  • 1 輔色(25%)
  • 1 點綴色(20%)
  • 1 點綴色(15%)

如果你不知道怎麼套用 2 個點綴色的話,也可以依照剛剛提到的60-30-10 法則,只用前 3 個色彩。

題外話:黑白灰會算進配色方案裡嗎?

這個問題分成兩派說法,我覺得兩派都有道理。

黑白灰不會算進配色方案裡

因為它們屬於「無色彩」的範疇,是設計中的基礎色。這些顏色經常用來作為背景、文字、邊框或陰影,為其他顏色提供對比和支持。

換句話說,當設計師在制定配色方案時,一般指的是有色彩的部分,而黑白灰則是預設存在的輔助色

這些無色彩的元素可以幫助調和和支撐整體設計,而不會過多干擾主要的配色組合。

黑白灰算進配色方案裡

根據設計需求,它們可能會佔用方案一定的比例,這三個顏色常常被用來:

  • 平衡色彩:黑、白、灰能幫助其他色彩在設計中更突出,提供視覺上的對比或緩衝。例如,黑色常被用來強調,白色用來提供空間感和清新感,灰色則是中性的調和色,能夠平衡其他鮮豔的顏色。

  • 背景或文字:在UI設計中,黑、白、灰經常用作背景色或文字顏色,因為它們不會搶其他顏色的風頭,而且能確保可讀性和視覺清晰度。

  • 設計的基礎色:很多時候,設計師會用黑、白、灰作為基礎色,然後搭配其他鮮豔的顏色來創造出色的視覺效果。

黑白灰通常不會成為配色方案中的主色,而是用來支援主色和輔色的表現。


我自己「視情況」把黑白灰算進配色方案裡。

如果黑白灰是當是文字、陰影、邊框在使用,我不會算進配色方案裡。

但如果拿黑白灰當主色、輔色、點綴色在用,那當然要算進去啦!

Akane Lee

Akane Lee

幫助你快速學會 UI/UX 實用技巧,結合理論與實作,短時間內擺脫設計瓶頸,讓你每個專案都能交出滿意的成果!

Comments

wave
comments powered by Disqus

Press ESC to close