---
title: "配色法則完全指南：6 種色輪配色技巧，讓你的設計不再「怪怪的」"
slug: color-harmony-guide
url: https://rar.design/posts/color-harmony-guide
published_at: 2026-02-27
modified_at: 2026-02-27
author: "設計師 Riven"
category: "平面設計"
access: public_access
---

# 配色法則完全指南：6 種色輪配色技巧，讓你的設計不再「怪怪的」

> 互補色、類比色、三角配色、分裂互補、矩形配色、60-30-10 法則——從原理到實戰一次搞懂

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-02-27

📌 目錄01 為什麼你的配色總是「怪怪的」02 色輪基礎：一切配色的起點03 六種經典配色法則完整解析04 60-30-10 法則：配色的萬用比例05 配色工具推薦06 設計師的配色實戰建議07 重點整理與延伸資源你有沒有遇過這種情況——每個顏色單獨看都不錯，放在一起就是「哪裡怪怪的」？你嘗試了很多組合，但就是說不出來為什麼不好看，也說不出來為什麼某些設計的配色讓你覺得很舒服。這不是審美問題，是你還不知道顏色之間的搭配規則。色輪上的顏色不是隨便放的——它們之間存在數學關係，而這些關係直接決定了配色好不好看。這篇文章會帶你從色輪基礎開始，拆解六種經典配色法則（互補色、類比色、三角配色、分裂互補、矩形配色、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 黃金比例60% 主色背景、底色30% 輔色內容區、卡片10%強調色：CTA、高亮這個比例源自室內設計，被廣泛應用在 UI、平面、品牌設計中60-30-10 法則的核心邏輯是：人眼需要一個主導色來「安定」視覺，然後用輔色創造層次，最後用少量強調色引導注意力。具體在 UI 設計中怎麼用：6060% 主色——通常是背景色或最大面積的底色。在深色主題中可能是 #1a1a1a，在淺色主題中可能是白色或淺灰。它不需要搶眼，但決定了整個設計的基調。3030% 輔色——卡片背景、側邊欄、分區塊。和主色要有區分但不衝突，通常是主色的深淺變體或同色系。1010% 強調色——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——一鍵生成配色方案，支援匯出到 FigmaRealtime Colors——即時在 UI 模板上預覽配色效果WebAIM Contrast Checker——文字對比度檢測工具Happy Hues——由設計師策劃的配色方案庫，搭配真實網站預覽🎓 想系統性學習設計？配色只是視覺設計的一環——從排版、構圖到完整的自媒體視覺系統，自媒體設計學帶你建立可複製的設計方法論。查看課程內容 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →