60-30-10法則

一句話定義

將設計中的色彩配比固定成主色相 60% / 輔助色相 30% / 強調色相 10%，把「選色」與「配比」拆成兩個獨立決策、避免畫面凌亂或平淡。

記憶點不是看到最多的，而是看到最少的——「比起 60% 的顏色，人們對於那 10% 的強調色，印象更加深刻」（socialMORE）
比例先於色彩——選色再順眼，沒比例還是亂；先想清楚 60-30-10 各自負責什麼，再去填色
黑白測試——「將你的設計轉換成黑白，能夠清楚檢閱整個設計的色彩對比度」是檢查比例是否生效的最快方法
- 同源對位：2026-05-01-簡報懶人包在資訊層級場景提出的「瞇眼測試」（「只要瞇著眼睛，你看的到的地方就會被優先閱讀」）是同源直覺驗收哲學——黑白測試查色彩比例 / 瞇眼測試查資訊層級 / 兩者共享「把畫面虛化抽離後仍應能抓到主軸」的元命題

情境	主色（60%）	輔色（30%）	強調（10%）
Web/App 介面	中性背景（白 / 淺灰）	內容區塊或標題	CTA 按鈕 / 通知紅點
簡報 / 海報	主視覺底色	圖文區塊	重點標籤
Logo	（多數 logo 不適用本法則，logo 通常 1–2 色）	—	—
包裝	主視覺色	品牌色	促銷標 / 燙金細節

2026-05-09-60分鐘打造質感簡報-關鍵第一步使用「三一配色法則」教初學者把顏色先分配功能，而不是先問「哪個顏色比較好看」：

這個版本與 60-30-10 的差異在於：60-30-10 先談視覺權重比例，三一配色先談每種顏色的工作職責。兩者可合併使用：主色負責大面積風格，中性色確保閱讀對比，強調色只留給真正重點。

文字與底色至少其中一方應是中性色；若兩者都是高彩度非中性色，就容易像長輩圖一樣刺眼，讓配色本身變成閱讀負擔。

與色彩心理學：本頁決定配比，色彩心理學決定選色——色彩決策的兩個獨立軸
與排版 / 易讀性：本頁的 60% 中性色基底就是易讀性第 4 工具「顏色」的具體配比實踐——避免純黑、用主色暗色版的精神在比例層的對位
與 Logo設計原則：Logo 通常 1–2 色不直接套 60-30-10；但品牌延伸應用（網站 / 包裝 / 文宣）會用本法則
與包裝設計：包裝視覺多以本法則建立層次（主色 60% 包面 + 30% logo / 品牌資訊 + 10% 促銷標 / 認證 / 警示）
與資訊層級：兩者都是「克制 + 對比」哲學——本頁處理顏色比例（60-30-10）/ 資訊層級處理資訊比例（重要 / 副 / 輔助 / 冗餘）；元命題「重點不是看到最多的，而是看到最少的」共通；兩個直覺驗收方式（黑白測試 / 瞇眼測試）方法同源
與簡報設計：簡報配色用本頁的 60-30-10、資訊優先序用資訊層級、群組化用格式塔原則——三者構成簡報設計「視覺設計」第三層的核心工具集

本頁是新手色彩配比入門法則；資深設計師會根據視覺權重、品牌調性、媒介特性做變形
未來累積方向：(1) 比例變體（70-20-10 / 50-30-20）；(2) 多主色品牌的處理（如 Google）；(3) 動態介面的比例（Hover / Focus 狀態的色彩切換）
達 2+ 來源後可在本頁擴展「比例變體」段

tags	狀態/草稿, 領域/視覺設計
aliases	60:30:10 法則, 色相比例, 60-30-10 Rule, 主色輔色強調色