配色公式怎麼用?6 個讓你的畫面不會出錯的設計師思考結構
2026年5月26日 下午 2:05
AI 設計DESIGN SYSTEM · COLOR · 2026
QUICK ANSWER
配色公式不是「找兩個漂亮的顏色搭在一起」，而是把無限的色彩可能切成有限的決策結構。專業設計師會用 60-30-10 決定比例、用 HSL 而不是 HEX 思考色彩、用整套 9 階色階而不是單一色票，最後用語意化命名（primary、surface、accent）取代色名。這六個公式不是並列的選項，是一個從畫面比例到設計系統的完整思考路徑。
CHAPTER 01 · WHY YOU CAN'T NAIL COLORS
配色不是品味問題，是結構問題
打開 Figma，選了一個漂亮的紫色當主色。配上白色背景不對勁、配上黑色文字又太暗、加個按鈕反而吃掉視覺重點。整個畫面塌掉。
這個情境每個設計師都遇過。直覺反應通常是「我審美不夠好」、「我需要再去看更多 Dribbble」、「我應該再買一本色彩學的書」。但問題其實不在你的紫色不夠美，而在你只挑了一個顏色，然後試圖讓它去搭配整個畫面。
Tailwind CSS 為什麼能讓非設計師做出像樣的網站？因為它把「配色」這件事拆成了「選色階」。bg-blue-500 不是「藍色」，是「藍色家族的第 500 階」。第一次用的人不知道自己在做什麼，但成品就是不會難看——因為他們做的不是配色，而是從一個已經設計好的系統裡抽顏色。
這就是配色公式的真正意義。公式不是「設計法則」，公式是把無限的色彩可能，變成有限的決策結構。當你只需要決定六件事，而不是六萬件事，畫面就不會出錯。
接下來六個結構，從畫面比例一路推到設計系統，是業界做配色的標準思考路徑。
CHAPTER 02 · THE 60-30-10 RULE
先決定比例，再決定顏色
60-30-10 是 1950 年代就存在的室內設計法則，後來被搬到平面與 UI 設計。它規定一個畫面的顏色用量應該是：60% 主導色、30% 次要色、10% 強調色。
這個公式的關鍵不在比例本身，而在它強迫你先想「這個顏色用多少」，再想「這個顏色是什麼」。大部分新手的問題不是顏色挑錯，而是把三個顏色都用 33%——畫面變成三方搶位、沒有焦點。
THE 60-30-10 RULE
60%
DOMINANT
30%
SECONDARY
10%
ACCENT
背景、大面積區塊、整體基調
卡片、區隔、輔助元素
按鈕、連結、CTA
注意 10% 的位置。那是按鈕、連結、CTA、警示——所有你希望使用者注意到的東西。如果這 10% 變成 30% ，畫面就會變得吵雜，使用者反而不知道要點哪裡。Spotify 的綠、Notion 的紅、Stripe 的紫，都嚴格守在 10% 以下，這不是品牌個性，是注意力工程。
進階版的 60-30-10 還會再切：主導色裡分成「真的背景」和「容器背景」，兩者差個 5%-10% 明度，層次就會自然浮出來。蘋果的 macOS 視窗、Linear 的 dashboard 都是這樣堆出來的。
CHAPTER 03 · HSL OVER HEX
HEX 是字串，HSL 是座標
#3B82F6。這六個字加一個井字符號，是設計師最常複製貼上的東西。但它在你腦中只是一串 token，沒有任何幫你做決策的資訊。
HSL 不一樣。它是三個座標：H（色相）決定你選的是藍還是紫、S（飽和度）決定鮮豔還是灰白、L（明度）決定亮或暗。當你的腦袋習慣用 HSL 思考，改顏色就變成一件可控的事——「我要這個藍再暗一點」=L 降 10%、「我要這個藍再灰一點」=S 降 20%。每一個動作都對應到一個明確的軸。
HSL · THREE AXES OF COLOR DECISION
H
Hue 色相
0°-360°，色相環上的角度。決定「這是什麼顏色」。
S
Saturation 飽和度
0%-100%，顏色的純度。決定「這個顏色多鮮豔」。
L
Lightness 明度
0%-100%，顏色的亮度。決定「這個顏色多深或多淺」。
Steve Schoger 在 Refactoring UI 提過一個技巧：當你要讓一個顏色看起來「跟背景比較接近」（例如 disabled 狀態的按鈕），不要降透明度——透明度會讓顏色顯得髒。要做的是把這個顏色的 H 和 S 拉向背景色，只動 L 就好。這只有在 HSL 思維下才做得到。
Tailwind CSS v4 已經把預設色票從 HEX 換成 OKLCH（HSL 的進化版，加入感知均勻度），Apple 的 SwiftUI 也走語意色彩 + 明度自動適應。整個產業正在離開 HEX 思維。如果你還在用「複製這個藍、改一改」的方式做配色，你的工作流會越來越落後。
CHAPTER 04 · COLOR HARMONIES
色相環上的五種經典關係
色相環（Color Wheel）是配色公式裡最古老的工具。它把所有色相排成一個圓，然後用幾何關係幫你決定「哪些顏色放在一起會和諧」。
常用的關係有五種，最常被設計師拿來用的是其中三種：對面（補色）、隔壁（類似色）、三角形（三角色）。剩下的四方配色與分裂互補相對少見，進階需求才會用到。
Adobe Color、Coolors、Realtime Colors 這些線上工具都是根據這六種關係生成色票。但這裡有一個業界開放的秘密：大部分專業設計師其實只用其中一種——單色階。因為它最容易控制，99% 的 SaaS 介面都是單色階（只有主色和中性灰）構成的。剩下的五種配色關係，實際上更常出現在插畫、品牌識別、海報設計這類「需要表達情緒」的場景，而不是「需要清楚傳達資訊」的 UI。
所以下一次當你看到一個漂亮的網站，先問自己：它的主色是哪一個？如果答案只有一個顏色（再加上灰、白、黑），那它就是單色階。這比你想像的更常見。
CHAPTER 05 · BUILD A SCALE, NOT A SWATCH
不要選顏色，要建色階
如果整篇文章你只記得一條公式，記這個。
“一個顏色不夠用。
你需要的是九個。”
新手做配色：挑一個藍當主色、一個橘當輔助色、一個灰當文字色。三個顏色，接著就開始畫圖。
進入到第五個畫面，發現按鈕需要 hover 狀態（藍要再深一點）、disabled 狀態（藍要再淺一點）、selected 狀態（藍要再亮一點）。三個藍變成五個藍。第十個畫面，卡片陰影需要藍底裡更深一階、表單錯誤訊息需要紅色但不能太刺眼、圖表的三條線需要藍的三種變體。三個顏色變成三十個，然後失控。
正確做法是反過來：先建一整套色階，再從色階裡抽顏色用。一個主色拆成 9 階（100、200、300...一直到 900），先把所有可能用到的深淺都產出來，實際做設計時只是「從這套色階挑要用哪一階」。
這個結構之所以重要，有兩個原因。第一，它讓你的所有顏色互相和諧——因為它們本來就是同一個色相，只有 L 不同。第二，它讓未來的設計決策變簡單——當你需要一個「比 500 再深一點的按鈕」，你不用重新去調色，你直接用 600。
你需要建幾套色階？最少四套：一個主色（品牌色）、一個中性色（灰階，撐起整個畫面的 90%）、加上三個語意色（成功綠、警示橘、錯誤紅）。專業設計系統會更多——Material Design 3 用了 30 多個 token、Apple HIG 用了 60 多個語意色名，但起手式都是這四套。
FROM ONE COLOR TO A SYSTEM
STEP 1 · 挑一個品牌主色
通常是 L 在 45%-55% 之間最飽和的位置
STEP 2 · 同色相，往兩端延伸明度
50
100
200
300
400
500
600
700
800
900
STEP 3 · 把這個流程套到中性色與語意色
PRIMARY
NEUTRAL
SUCCESS
DANGER
自己手動調 9 階是可以的，但很耗時間。業界比較常用 UI Colors（uicolors.app）、Tailwind Color Generator 這類工具，輸入一個主色，自動生成完整 9 階。生成後再用眼睛微調——演算法產出的色階通常會有「中段塌掉」（明度跳得不均勻）的問題，需要手動補回去。
CHAPTER 06 · SEMANTIC NAMING
從 blue-500 進化到 action-primary
做完色階，你以為配色公式就結束了。其實這才是中間點。
問題出在使用色階時。當你的設計檔裡寫滿 blue-500、blue-600、blue-700，半年後想改主色——例如品牌從藍變成紫——你要去全檔案搜尋 blue-500 然後一個一個換成 purple-500。一千個元件就是一千次替換。
專業設計系統會多做一層抽象：語意化命名（Semantic Tokens）。它不是用色名定義顏色，而是用用途。
BAD · 直接用色名
GOOD · 語意化命名
blue-500
action-primary
gray-100
surface-subtle
gray-900
text-primary
red-600
feedback-danger
green-500
feedback-success
你的設計檔裡只會出現右邊那種命名。底層的色階變了沒關係，只要 action-primary 還指向「某一個顏色」，所有用到 action-primary 的元件都會跟著變。深色模式也是同理：action-primary 在白底時指向 blue-600、在暗底時指向 blue-400——同一個語意，不同主題，不同實體值。
這就是 Figma Variables 跟 Tokens 在做的事。也是為什麼 Apple HIG 從來不寫 #007AFF，只寫 systemBlue。當你的色票進到語意化命名，你的配色就不只是「好不好看」，而是「能不能規模化」。
CHAPTER 07 · AI & AUTOMATION
AI 工具不會幫你配色，只會幫你驗證配色
2026 年的現在，大概每個月都有人發一個「AI 配色生成器」。輸入幾個關鍵字、丟一張圖，自動生成色票。看起來省事，但真正用過的人都知道：這些工具生出來的色票，很難直接拿來用。
原因很簡單。AI 生成器只能告訴你「這幾個顏色放在一起不會醜」，沒辦法告訴你「這個顏色用在你的場景能不能傳達品牌個性」。配色的決策有 70% 是設計師對「這個品牌要給人什麼感覺」的判斷，30% 才是顏色的數學關係。AI 解決得了 30% 的部分，但 70% 必須由你自己決定。
所以這些工具的真正用途，是「驗證」而不是「生成」：
• Adobe Color 的色相環，適合驗證你選的兩三個色相之間的關係是不是符合上一章說的五種公式。
• UI Colors 與 Tailwind Generator，適合驗證你的主色拉到 9 階之後，中段會不會塌掉。
• Stark、Contrast Checker，適合驗證每個顏色組合在 WCAG 對比度標準下能不能過關（AA 至少 4.5:1）。
• Realtime Colors 適合驗證你的色票放在實際的網頁排版裡看起來是不是真的舒服。
把這幾個工具串成驗證 pipeline，你的配色決策會比 AI 自動生成的結果更穩——因為你做的是有觀點的判斷，只是讓 AI 幫你檢查數學。
DEEP DIVE
想再深入，看這支演講
Steve Schoger 是 Tailwind CSS 共同創辦人，也是 Refactoring UI 這本書的作者。這支 CSS Day 2019 的演講，把上面講的所有公式做成了真實的 UI 拆解示範，看完你會對「色階怎麼用在實際介面」有完全不同的理解。
CHAPTER 08 · TAKEAWAYS
配色不是天賦，是系統工程
回到開頭那個畫面——你選了一個紫色當主色，結果整個畫面塌掉。
現在你知道問題在哪了。你只挑了一個顏色，而沒有建立色階。你用 HEX 思考而不是 HSL，所以無法精準調整。你沒先決定 60-30-10 的比例，所以紫色搶走了畫面所有焦點。你沒做語意化命名，所以這個紫色綁死在 button-purple，半年後改不掉。
好的配色不是「選對顏色」，好的配色是「建一個讓你不容易選錯的系統」。Tailwind、Material Design、Apple HIG、IBM Carbon 這些業界標準設計系統，本質上都在做同一件事——把無限的色彩可能，變成一個 9 階 × 4 套 × 語意命名的有限結構。然後讓設計師在這個結構裡做選擇，而不是在無限的色相環上瞎挑。
你不需要更好的審美。你需要的是更好的結構。
常見問題
Q：配色公式真的能套用到所有設計嗎？
A：60-30-10、HSL 思維、9 階色階這三個公式，套用到 99% 的 UI 設計都有效。色相環的五種色彩關係，則更多用在品牌識別、插畫、海報這類需要表達情緒的場景。語意化命名只在你要建設計系統時才必要——做單一作品可以省。
Q：我是新手，從哪個公式開始最有效？
A：從 60-30-10 開始。它最容易看到立即效果——只要你開始壓低強調色的用量，畫面就會自動變得有焦點。學會 60-30-10 之後再學 HSL 思維，最後才碰色階系統。
Q：Figma 的 Color Variables 跟色階系統是同一件事嗎？
A：不是，Figma Variables 是承載色階的「容器」，色階是「內容」。你可以用 Variables 來實作 9 階色票，加上 modes 來切換深淺模式。沒有 Variables 一樣可以建色階，只是改起來會痛苦很多。
Q：用 AI 配色工具直接生成不行嗎？
A：可以當起點，不能當終點。AI 生成的色票要再經過手動微調（中段塌掉的問題）、對比度驗證（WCAG）、品牌個性檢查（顏色傳達的情緒對不對）三道關卡。AI 是加速器，不是替代品。
Q：深色模式的配色公式不一樣嗎？
A：結構完全一樣，但實作要小心。深色模式下，主色通常要降飽和度（暗底會把顏色壓得太鮮），提一階明度（暗底下需要更亮才看得清楚）。如果你的色階是 9 階，深色模式下常用的是 200-400 範圍，而不是淺色模式的 500-700 範圍。
Q：無障礙（WCAG）對比度標準是什麼？
A：WCAG 2.1 AA 等級要求一般文字對比度至少 4.5:1、大字（18pt 以上或粗體 14pt）至少 3:1。AAA 等級則要 7:1 與 4.5:1。建議至少達到 AA。Stark、Contrast Checker 這類工具可以即時驗證。