- 為什麼要學色彩學？
- 別人的配色方案我要怎麼運用？
- 推薦給新手的配色網站
- 題外話：黑白灰會算進配色方案裡嗎？
為什麼 UI 設計一定要懂色彩學？
我們人類透過視覺看到色彩，並馬上把色彩跟一些既定的感覺連結在一起。
這種反應是進化留下來的痕跡，畢竟遠古時代看到紅色的果實，大家就知道要嘛是超甜美，不然就是有毒不能碰，所以紅色才會讓人感到刺激。
相反地，藍色讓人聯想到天空、大海、寧靜和穩定，這就是為什麼很多銀行和顧問公司都愛用藍色。
顏色就像背景音樂一樣，它默默地設定了情境，讓我們自然而然地做出反應。
這也是為什麼設計師要學習色彩學的最大原因：色彩能夠傳遞訊息和情感，而這些訊息往往比文字還要強烈。
我們可以利用色彩來強化視覺層次、創造焦點，甚至影響使用者的情緒反應和決策。
一定要知道的色彩學超基本術語
色相 (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設計中，黑、白、灰經常用作背景色或文字顏色，因為它們不會搶其他顏色的風頭，而且能確保可讀性和視覺清晰度。
設計的基礎色：很多時候，設計師會用黑、白、灰作為基礎色，然後搭配其他鮮豔的顏色來創造出色的視覺效果。
黑白灰通常不會成為配色方案中的主色，而是用來支援主色和輔色的表現。
我自己「視情況」把黑白灰算進配色方案裡。
如果黑白灰是當是文字、陰影、邊框在使用，我不會算進配色方案裡。
但如果拿黑白灰當主色、輔色、點綴色在用，那當然要算進去啦！
