配色法則完全指南：6 種色輪配色技巧，讓你的設計不再「怪怪的」
2026年2月27日 下午 1:40
平面設計
📌 目錄
你有沒有遇過這種情況——每個顏色單獨看都不錯，放在一起就是「哪裡怪怪的」？你嘗試了很多組合，但就是說不出來為什麼不好看，也說不出來為什麼某些設計的配色讓你覺得很舒服。
這不是審美問題，是你還不知道顏色之間的搭配規則。
色輪上的顏色不是隨便放的——它們之間存在數學關係，而這些關係直接決定了配色好不好看。這篇文章會帶你從色輪基礎開始，拆解六種經典配色法則（互補色、類比色、三角配色、分裂互補、矩形配色、60-30-10 法則），每一種都告訴你什麼時候用、怎麼用、要避開什麼坑。讀完之後，你的配色會從「碰運氣」變成「有方法」。
為什麼你的配色總是「怪怪的」
大多數人配色的方式是這樣的：
❌ 常見錯誤一：靠感覺選色
「我覺得藍色配紅色應該不錯」——但沒有考慮兩色的明度、彩度和面積比例。
❌ 常見錯誤二：照抄別人的色碼
直接複製某個作品的色碼，但不理解那組顏色為什麼好看，換個場景就失靈了。
❌ 常見錯誤三：用太多顏色
一次用五六種高飽和顏色，覺得「豐富」，結果視覺一團混亂。
這些問題的根源都一樣：不懂顏色之間的關係。
好的配色不是因為每個顏色都漂亮，而是因為顏色之間的「關係」是對的。就像音樂裡的和弦一樣——C 大調和絃好聽，不是因為 C、E、G 三個音各自好聽，而是它們之間的音程關係產生了和諧感。
配色也是一樣。色輪上的顏色有固定的搭配邏輯，掌握了這些邏輯，你就能解釋為什麼好看，而不只是感覺好看。
色輪基礎：一切配色的起點
在講配色法則之前，你要先認識色輪（Color Wheel）——它是所有配色理論的基礎。
🎨 基礎色輪：12 色環
紅
紅橙
橙
黃橙
黃
黃綠
綠
藍綠
藍
藍紫
紫
紅紫
色輪是一個連續的光譜，首尾相接形成環狀
色輪把所有色相排列成一個圓環。你需要知道三個基本概念：
1
相鄰的顏色 = 和諧——色輪上靠在一起的顏色（例如紅→橙→黃），看起來自然、舒服，因為它們有共同的色彩基因。
2
對面的顏色 = 對比——色輪上正對面的顏色（例如紅↔綠），視覺衝擊最大，最能互相凸顯。
3
等距的顏色 = 平衡——色輪上等距分布的顏色（例如紅、黃、藍各隔 120°），豐富又不會失衡。
所有配色法則都是從這三種「距離關係」延伸出來的。接下來我們一一拆解。
六種經典配色法則完整解析
以下六種配色法則涵蓋了從簡單到進階的所有搭配方式。每一種我都會告訴你：它是什麼、怎麼用、什麼場景最適合、以及容易踩的坑。
① 互補色 Complementary
色輪上正對面的兩個顏色
紅色
綠色
↔
藍 / 橙
↔
黃 / 紫
互補色是最直觀的配色法——找色輪上正對面的顏色就對了。這兩個顏色放在一起會產生最強烈的對比，視覺衝擊力最大。
為什麼？因為互補色的色相差距最遠（180°），人眼會自然被這種極端差異吸引。這就是為什麼聖誕節用紅配綠、IKEA 用藍配黃——它們要的就是「跳出來」。
💡 使用要訣
互補色千萬不要 50/50 平分面積。選一個當主色（大面積），另一個當強調色（小面積點綴）。經典比例是 80:20 或 70:30。
⚠️ 兩色面積相等會互相打架，看起來很吵。記得分主次——一個安靜當背景，一個出來搶眼球。
適用場景：需要強調某個元素的時候，例如 CTA 按鈕、促銷活動、運動品牌、食品包裝。不適合需要安靜氛圍的閱讀介面。
② 類比色 Analogous
色輪上相鄰的 2-3 個顏色
紅
橙
黃
冷色系
暖色系
類比色是最「安全」的配色方法，因為相鄰的顏色本來就有共同的色彩基因。紅→橙→黃之間有平滑的過渡，所以放在一起自然就和諧。
Instagram 的 Logo 就是經典案例——從紫色過渡到橘色、黃色，整個漸層就是一組類比色。日落色系 App、暖色系品牌形象、自然風景攝影的調色，都大量使用類比色。
💡 使用要訣
選一個主導色佔最大面積，其餘顏色做輔助。三色的話，中間的色當主角，兩側做配角。另外建議加入一個中性色（黑/白/灰）來創造呼吸感。
⚠️ 類比色太相似容易缺乏焦點，整個畫面「糊在一起」。這時候需要一個跳色或中性色來打破單調。
適用場景：品牌形象、個人網站、社群貼文背景、Nature 風格設計。想營造「統一氛圍」的時候就用類比色。
③ 三角配色 Triadic
色輪上等距 120° 的三個顏色
紅
黃
藍
△ 三色在色輪上形成正三角形
三角配色同時擁有色彩的豐富度和平衡感，是「多色配色」中最安全的入門選擇。三個顏色等距分布，不會有哪個顏色被「冷落」。
超人的配色就是標準的三角配色：紅色披風、藍色緊身衣、黃色腰帶。Google 的 Logo 也接近三角配色的邏輯——紅、藍、黃（加上綠做延伸）。這種配色給人的感覺是「豐富但不雜亂」。
💡 使用要訣
比例很重要：70% 主色 + 25% 輔色 + 5% 點綴色。絕對不要三色平均分配，那會讓畫面像雜耍。
⚠️ 三色都用高飽和會非常吵。建議至少降低一到兩個顏色的彩度或明度，只留一個全飽和做焦點。
適用場景：兒童產品、遊戲介面、活動視覺、需要「活潑感」的品牌。不適合金融、醫療等需要穩重感的領域。
④ 分裂互補 Split-Complementary
主色 + 互補色「兩側」的顏色
主色：紅
綠（互補旁）
藍（互補旁）
紅的互補色是綠，取綠兩側的「藍綠」和「黃綠」
分裂互補是互補色的「升級版」。原理很簡單：先找到主色的互補色，然後不用互補色本身，改用它兩側的顏色。
為什麼要這樣？因為直接用互補色有時候對比太強、太刺眼。分裂互補保留了對比的張力，但更溫和、更容易駕馭。很多電影海報和遊戲 UI 都在用這種手法——你看到畫面有張力但又不會覺得不舒服，大概率就是分裂互補。
💡 使用要訣
主色做大面積底色，分裂出來的兩色做小面積的裝飾和強調。這是新手跳脫「安全區」的最佳選擇——比互補色好控制，又比類比色有趣。
適用場景：電影海報、遊戲 UI、品牌視覺系統、需要「有個性但不過頭」的設計。推薦新手從這個開始練習。
⑤ 矩形配色 Square / Tetradic
色輪上形成矩形的四個顏色
紅
橙
綠
藍
□ 四色在色輪上形成矩形，包含兩組互補色
矩形配色一次用了四個顏色，是色彩最豐富的配色法，同時也是最難駕馭的。因為它本質上包含了兩組互補色，對比能量是雙倍的。
微軟 Windows Logo 就是矩形配色：紅、綠、藍、黃四色。能用得好看的關鍵在於——不是四色平均分配，而是嚴格控制比例。
💡 使用要訣
選一個絕對主色佔最大面積，其餘三色按 30%/15%/5% 分配。而且至少要降低兩個顏色的明度或彩度——四色全用高飽和度等於視覺災難。
⚠️ 新手不建議直接用矩形配色。先從互補色和三角配色練起，等你對比例有感覺了再來挑戰四色。
適用場景：需要豐富色彩的遊戲界面、兒童品牌、大型活動視覺、資訊圖表。但記住：用四色是為了功能區分，不是為了「看起來熱鬧」。
📊 五種配色法則比較
| 配色法則 | 色彩數 | 對比強度 | 駕馭難度 | 適合新手 |
|---|---|---|---|---|
| 互補色 | 2 | ★★★★★ | ★★★ | ✅ |
| 類比色 | 2-3 | ★ | ★ | ✅✅ |
| 三角配色 | 3 | ★★★ | ★★★ | ✅ |
| 分裂互補 | 3 | ★★★★ | ★★ | ✅✅ |
| 矩形配色 | 4 | ★★★★★ | ★★★★★ | ❌ |
60-30-10 法則：配色的萬用比例
這不是一種配色類型，而是所有配色都該遵守的面積比例。不管你用互補色、三角配色還是矩形配色，只要按照 60-30-10 的比例分配，結果都不會太差。
🎯 60-30-10 黃金比例
背景、底色
內容區、卡片
強調色：CTA、高亮
這個比例源自室內設計，被廣泛應用在 UI、平面、品牌設計中
60-30-10 法則的核心邏輯是：人眼需要一個主導色來「安定」視覺，然後用輔色創造層次，最後用少量強調色引導注意力。
具體在 UI 設計中怎麼用：
60
60% 主色——通常是背景色或最大面積的底色。在深色主題中可能是 #1a1a1a，在淺色主題中可能是白色或淺灰。它不需要搶眼，但決定了整個設計的基調。
30
30% 輔色——卡片背景、側邊欄、分區塊。和主色要有區分但不衝突，通常是主色的深淺變體或同色系。
10
10% 強調色——CTA 按鈕、連結、重要標籤、通知。面積小但飽和度高，一眼就被看到。這是轉換率的關鍵色。
💡 記住這句話
比例對了，就算配色普通也不會太差；比例錯了，再高級的顏色也救不回來。
配色工具推薦
理解了配色法則之後，你需要工具來快速生成和驗證配色方案。以下是我實際在用的幾個：
🎨 Adobe Color
最完整的色輪工具。可以直接選擇互補色、類比色、三角配色等模式，自動生成對應的色碼。支援從照片提取配色。免費使用。
🎯 Coolors
按空白鍵隨機生成配色方案，鎖定喜歡的顏色再重新生成其他色。速度最快，適合需要靈感時使用。支援匯出到 Figma。
📐 Realtime Colors
直接在一個網頁模板上預覽你的配色效果。調整顏色時即時看到在實際 UI 中的呈現，不用猜。適合 UI/UX 設計師。
🧪 Contrast Checker (WebAIM)
配完色之後一定要過這關——檢查文字和背景的對比度是否達到 WCAG 4.5:1 標準。配色再好看，讀不清就等於零。
設計師的配色實戰建議
知道法則是一回事，實際用是另一回事。以下是我在實際設計工作中總結的配色心得：
1
先確定主色，再推導其他色——不要一次想五個顏色。先從品牌色或最重要的色彩情緒開始，然後用色輪法則推導出輔色和強調色。
2
調整明度和彩度比調色相更有效——同一個藍色，降低彩度變成灰藍、提高明度變成淺藍，感覺完全不同。在確定色相之後，花更多時間調整 HSL 中的 S 和 L。
3
用灰色做「呼吸空間」——再好的配色也需要中性色來平衡。不同深淺的灰色（暖灰或冷灰）可以降低視覺噪音，讓彩色元素更突出。
4
在真實場景中驗證配色——Figma 裡看起來很好的顏色，在手機螢幕上可能偏色。一定要在實際裝置上檢查，特別是在不同亮度和光線環境下。
5
限制在 3-5 色以內——包含 1 主色、1-2 輔色、1 強調色，加上黑白灰中性色。顏色太多會稀釋品牌識別度，也讓設計系統難以維護。
6
學會從好設計中「逆向分析」——看到喜歡的設計時，不要只存圖。用吸管工具把每個顏色提取出來，分析它用了什麼配色法則、什麼面積比例、明度和彩度怎麼分配。
重點整理與延伸資源
📝 重點整理
→
配色好不好看不是靠感覺，而是靠顏色在色輪上的「位置關係」
→
互補色對比最強，適合需要視覺衝擊的場景；類比色最和諧，適合營造統一氛圍
→
分裂互補是新手跳脫安全區的最佳選擇——比互補色好控制，又比類比色有趣
→
不管用什麼配色法則，都要遵守 60-30-10 的面積比例——比例對了配色就不會太差
→
調整明度和彩度比換色相更有效，多花時間在 HSL 的 S 和 L 上
→
限制在 3-5 色以內，搭配黑白灰中性色，永遠確認 WCAG 4.5:1 對比度
🔗 延伸資源：
Adobe Color——免費色輪工具，直接選擇互補色、類比色等配色模式
Coolors——一鍵生成配色方案，支援匯出到 Figma
Realtime Colors——即時在 UI 模板上預覽配色效果
WebAIM Contrast Checker——文字對比度檢測工具
Happy Hues——由設計師策劃的配色方案庫，搭配真實網站預覽
