60-30-10 法則
這是分配顏色比例時最好用的規則。它源自室內設計，但適用於任何專案。
- 60%：基礎色。通常是中性色或柔和的色調，占據背景和大面積區域。
- 30%：輔助色。用來增添個性，可以用在區塊、選單或家具上。
- 10%：點綴色。最吸睛的顏色，用在按鈕、圖示和細節上。
例如：米白色 60%、海軍藍 30%、橘色 10%。
不需要精確測量。重點是讓一個顏色當主角，一個當配角，一個負責吸睛。
中性色的作用
中性色指的是白色、黑色、灰色、米色、奶油色、淺棕色等顏色，幾乎可以和任何顏色搭配。
中性色能讓眼睛休息，也能襯托強烈的顏色。少了中性色的配色，通常會讓人覺得很累。
- 白色與米白色：乾淨、開闊。
- 灰色：現代、低調。依整體配色選擇偏暖或偏冷的灰色。
- 米色與沙色：溫暖、自然。
- 黑色或接近黑色：優雅、有對比。文字用極深的灰色，通常比純黑更不傷眼。
依色溫來搭配
顏色可以分成暖色（紅、橘、黃）和冷色（藍、綠、紫）。搭配方式有三種簡單的做法：
- 只用暖色：溫馨又有活力，最適合餐廳和親切的品牌。
- 只用冷色：沉穩又專業，最適合醫療、科技和金融。
- 冷色為底＋暖色點綴：最好用的做法。在沉穩的背景中，暖色點綴能吸引目光。
常見的錯誤是沒有決定主角色，就把很多強烈的暖色和冷色混在一起。
文字對比
顏色再漂亮，文字讀不清楚就沒有意義。文字與背景的對比，是可讀性與無障礙設計的關鍵。
- 淺色背景用深色文字，深色背景用淺色文字。
- 避免在白色背景上使用黃色、亮綠色或淺灰色文字。
- 避免把鮮豔的互補色疊在一起，例如紅底綠字，會產生閃爍感，讓眼睛疲勞。
- WCAG 規範要求一般文字的對比度至少 4.5:1，大字至少 3:1。
你可以用對比檢查工具確認顏色搭配。
15 組不會出錯的顏色搭配
下面這些搭配都是可以放心使用的起點。以它們為基礎，再視需要加上中性色或點綴色。
- 海軍藍與奶油色：經典、可靠又好讀。
- 黑色與金色：奢華又優雅。
- 藍色與橘色：互補色，充滿活力。
- 森林綠與米色：自然、沉穩。
- 粉紅色與炭灰色：現代又平衡。
- 黃色與黑色：對比最強，最適合提醒注意。
- 酒紅色與沙色：溫暖又有質感。
- 土耳其藍與珊瑚色：清爽、充滿夏天感。
- 紫色與淡丁香紫：單色配色，富有創意。
- 棕色與鼠尾草綠：大地色系，最適合自然風品牌。
- 灰色與蜜桃色：溫柔又親切。
- 石油藍與淡黃色：沉穩中帶一點明亮。
- 赤陶色與米白色：溫暖的地中海風。
- 深藍綠與芥末黃：復古又有個性。
- 白色與紅色：直接、有活力，從遠處也很醒目。
更多附上色碼的靈感，請看顏色搭配頁面。
各顏色適合搭配的顏色
如果主色已經決定好了，可以把下面的清單當作現成的起點。
- 紅色：白色、黑色、灰色、海軍藍、米色。想大膽一點可以搭粉紅色或橘色。
- 橘色：海軍藍、土耳其藍、白色、奶油色、棕色。
- 黃色：灰色、黑色、海軍藍、白色。芥末黃和深綠色很搭。
- 綠色：米色、白色、棕色、金色、淡粉紅色。
- 藍色：白色、橘色、灰色、黃色、珊瑚色。海軍藍幾乎可以當中性色使用。
- 紫色：灰色、丁香紫、金色、鼠尾草綠、白色。
- 粉紅色：灰色、海軍藍、橄欖綠、白色、金色。
- 棕色：奶油色、綠色、石油藍、橘色、米白色。
注意到了嗎？幾乎每份清單裡都有中性色。搭配強烈的顏色時，這是最不容易出錯的方法。
如何做出自己的配色
- 依照你想傳達的訊息，選一個主色。
- 用色環找輔助色：想要沉穩就選相鄰的顏色，想要吸睛就選對面的顏色。
- 加入 1～2 個中性色。
- 為最重要的部分，只選一個點綴色。
- 用實際的例子測試配色，例如網頁、投影片或房間照片。
拿不定主意時，就減少顏色的數量。大多數專案用 3～5 色就夠了。
配色常見的錯誤
- 顏色用太多。畫面雜亂，什麼都不突出。
- 每個顏色用量都一樣。沒有主角色，讓人不知道該看哪裡。
- 忘了對比。會出現文字讀不清楚、按鈕沒人注意到等問題。
- 全部都很鮮豔。全是高彩度的顏色會讓人疲勞，記得搭配柔和的色調。
- 沒考慮使用環境。顏色在自然光下、螢幕上和印刷品上看起來都不一樣。
- 直接照抄。在某個品牌行得通的配色，不一定適合你的目標族群。
- 混用色溫不同的中性色。冷灰色和暖米色放在一起，可能會顯得混濁。中性色請從同一個色系挑選。
- 沒在多種螢幕上確認。在電腦上好看，在手機上可能會顯得暗淡。一定要在多種裝置上檢查。