- 為什麼要學色彩學?
- 別人的配色方案我要怎麼運用?
- 推薦給新手的配色網站
- 題外話:黑白灰會算進配色方案裡嗎?
為什麼要學色彩學?
我們人類透過視覺看到色彩,並馬上把色彩跟一些既定的感覺連結在一起。
這種反應是進化留下來的痕跡,畢竟遠古時代看到紅色的果實,大家就知道要嘛是超甜美,不然就是有毒不能碰,所以紅色才會讓人感到刺激。
相反地,藍色讓人聯想到天空、大海、寧靜和穩定,這就是為什麼很多銀行和顧問公司都愛用藍色。
顏色就像背景音樂一樣,它默默地設定了情境,讓我們自然而然地做出反應。
這也是為什麼設計師要學習色彩學的最大原因:色彩能夠傳遞訊息和情感,而這些訊息往往比文字還要強烈。
我們可以利用色彩來強化視覺層次、創造焦點,甚至影響使用者的情緒反應和決策。
一定要知道的色彩學超基本術語
色相 (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
這個網站給出的配色方案由 4 種顏色組成,比例大約是:
- 1 主色(40%)
- 1 輔色(25%)
- 1 點綴色(20%)
- 1 點綴色(15%)
如果你不知道怎麼套用 2 個點綴色的話,也可以依照剛剛提到的60-30-10 法則,只用前 3 個色彩。
題外話:黑白灰會算進配色方案裡嗎?
這個問題分成兩派說法,我覺得兩派都有道理。
黑白灰不會算進配色方案裡
因為它們屬於「無色彩」的範疇,是設計中的基礎色。這些顏色經常用來作為背景、文字、邊框或陰影,為其他顏色提供對比和支持。
換句話說,當設計師在制定配色方案時,一般指的是有色彩的部分,而黑白灰則是預設存在的輔助色。
這些無色彩的元素可以幫助調和和支撐整體設計,而不會過多干擾主要的配色組合。
黑白灰會算進配色方案裡
根據設計需求,它們可能會佔用方案一定的比例,這三個顏色常常被用來:
平衡色彩:黑、白、灰能幫助其他色彩在設計中更突出,提供視覺上的對比或緩衝。例如,黑色常被用來強調,白色用來提供空間感和清新感,灰色則是中性的調和色,能夠平衡其他鮮豔的顏色。
背景或文字:在UI設計中,黑、白、灰經常用作背景色或文字顏色,因為它們不會搶其他顏色的風頭,而且能確保可讀性和視覺清晰度。
設計的基礎色:很多時候,設計師會用黑、白、灰作為基礎色,然後搭配其他鮮豔的顏色來創造出色的視覺效果。
黑白灰通常不會成為配色方案中的主色,而是用來支援主色和輔色的表現。
我自己「視情況」把黑白灰算進配色方案裡。
如果黑白灰是當是文字、陰影、邊框在使用,我不會算進配色方案裡。
但如果拿黑白灰當主色、輔色、點綴色在用,那當然要算進去啦!