60、30、10——這三個數字，決定的不是配色好不好看，而是一張設計看起來協調還是雜亂。很多人選色只靠感覺對不對，結果好幾個顏色的份量差不多重、每一個都在搶第一眼，讀者的視線反而不知道該先落在哪，這正是配色黃金比例要處理的問題。
配色黃金比例指的就是 60-30-10 法則，把畫面裡的顏色拆成主色、輔色、點綴色三個角色，再按面積比例分工，而不是每個顏色平均出力。它最早是室內設計圈用來安排家具、牆面、軟裝份量的經驗法則，後來被平面設計、UI 介面、品牌識別一路借用，道理都一樣，顏色的份量分工沒想清楚，配色再花時間調也容易白費工夫。
要用好這套比例，得先分清楚三個顏色各自扛的工作，這也是最容易搞混的地方。
60-30-10 配色法則是什麼？主色、輔色、點綴色各管什麼？
很多人一聽到 60-30-10，直覺會想找色票去對到小數點，其實這套比例從來不是精算題，而是拿眼睛概略估算版面上每個顏色佔了多少面積。
具體來說，60%主色是畫面裡佔比最大的顏色，通常落在背景，建議挑中性色或低彩度色來定調整體氛圍；30%輔色是第二大的區塊，用在色塊、標題文字、次要元件上，功能是撐出視覺層次，但份量拿捏不好就會跟主色打架；10%點綴色面積最小、對比最強，只保留給真正需要被注意到的地方，像按鈕、重點文字、小圖示。
這套抓比例的邏輯最早出現在室內設計，設計師拿它安排家具、牆面漆色與軟裝的份量分工，後來平面設計、UI 介面、品牌識別接連借用，判斷的邏輯不變，只是換了載體而已。分工講清楚了，接下來要問的是，這三個數字為什麼要抓在 60、30、10，而不是隨便切三等份。
為什麼設計圈都愛用 60-30-10？比例怎麼決定第一眼觀感？
一張版面如果三個顏色份量差不多重，眼睛完全找不到該先看哪裡，這正是 60-30-10 要解決的問題。它靠的是面積分級，做出一條視覺動線，大面積的主色先讓眼睛安定下來、讀出整體氛圍，接著輔色抓出畫面的結構分區，最後才輪到面積小、對比又高的點綴色把視線拉過去，落在真正該被注意的地方，像按鈕或關鍵數字。
這不只是設計師的經驗談，顏色對第一印象的影響也有研究數據佐證。加拿大溫尼伯大學一份 2006 年發表在《Management Decision》期刊、探討色彩與行銷關聯的研究指出，人們在初次接觸一項產品或一個人的 90 秒內就會形成第一印象，而這個第一印象裡有 62%到 90%單純取決於顏色本身。
換句話說，配色比例抓對抓錯，不是美感偏好的小事，而是真的會影響別人怎麼看你的設計、甚至怎麼看你的品牌。既然比例這麼關鍵，下一步就是把它落地成一套真的能動手做的流程。
主色、輔色、點綴色怎麼選？三步驟找出你的配色組合
決定這三個顏色，順序不能亂來，要先定主色，輔色跟點綴色才有依據可以挑，因為後兩色的深淺、對比都是相對主色而定，順序顛倒等於在瞎猜。
挑色時有兩種最基本的判斷方式可以先用：一種是同色系的深淺延伸，同一個色相，靠明度、彩度拉出主色、輔色、點綴色的層次；另一種是用對比色當點綴，靠色相本身的反差把焦點跳出來。這兩種先夠用，完整的色輪理論不是這篇要處理的範圍。如果想驗證配色組合順不順眼，Adobe Color 這類國際平台的免費配色工具可以直接拿來測試。
步驟一：先定主色，撐起整體氛圍
主色決定的是整個設計「感覺是什麼調」。先問這個設計要傳達的氛圍是沉穩、活潑、專業還是溫暖，再決定主色要走安全牌的中性色，像白色、淺灰、米色、深灰當背景，還是直接讓品牌代表色本身當主色。多數情況下，主色用中性色比較保險，因為它佔比最大，太搶眼容易讓整體顯得疲勞；但如果品牌色本身辨識度就很高，讓它當主色也合理，重點是先決定誰扛下這 60%的份量。
步驟二：再挑輔色，撐出層次不搶戲
輔色要跟主色有明顯區隔，不然畫面會沒有層次；但也不能搶過主色定下的氛圍。實務上有個簡單的判斷法，把設計縮小，或往後站一步看，如果輔色跳得跟點綴色一樣搶眼，代表輔色太強了，得降低彩度或明度。輔色通常會落在區塊背景、標題文字、次要按鈕、圖卡邊框這類撐結構的地方。
步驟三：最後放點綴色，讓焦點跳出來
點綴色是整套配色裡飽和度、對比都最高的顏色，只留給真正需要被第一眼抓住的元素，像主要按鈕、關鍵數字、小圖示、重點強調字。點綴色一旦用多，面積遠超過原本的 10%，例如逼近 20%到 25%，就會失去「焦點」的作用，變成事實上的第二個輔色，整個層次感反而消失，這是新手最容易犯的地方。
從網站到印刷品，60-30-10 要對應到不同版面
三個顏色的角色定義好之後，下一個問題是套到不同版位時，誰扮演 60%、誰扮演 10%，答案不會一樣。以下幾種常見情境可以直接對照著套。
- 網站／App 介面：60%通常是頁面背景（白色、淺灰，深色主題則是深底），30%用在導覽列、卡片區塊、標題文字，10%留給按鈕與連結。像 Apple News+的頁面就是以白色打底、深色文字撐結構，只留一個強調色用在行動呼籲上；Mailchimp 的服務頁面也是淺色調為主，單一對比色集中用在按鈕，兩者都能直接打開官網對照色彩角色是怎麼分配的。
- 簡報投影片：60%是版面底色，30%是內文文字與圖表的主要顏色，10%留給要特別強調的關鍵數字或重點框線。
- 社群貼文圖／輪播圖：如果版面以照片為主，照片本身的色調常常就吃掉了 60%的份量，這時輔色與點綴色要反過來配合照片色調去挑，而不是硬套固定色票。
- 印刷品（海報、DM、名片等）：60%通常是紙材底色或大面積背景色，30%是主要圖文色，10%留給最需要吸引目光的局部，像優惠字樣或行動呼籲，道理跟螢幕版面一致，差別只在載體換成了紙。
比例不是鐵律，這些情況該打破 60-30-10
60-30-10 好用，但它是一套經驗法則，不是絕對公式，套用時還是有幾種該打破常規的情況，免得反而綁手綁腳。
整版以攝影或插畫為主的設計，畫面本身已經很飽滿，硬套三色比例反而限制了畫面原本的表現力，這時可以把主色的角色改成讓照片色調本身趨於一致，而不是另外找一塊底色去佔 60%。活動、促銷類需要更強視覺衝擊的版面，也可以把比例調鬆一點，例如把點綴色的份量提高一些，但仍要守住一個顏色明確最大、一個顏色明確最搶眼的層次原則，不能讓三色平均分配。
如果品牌本身色彩就很豐富，識別色本身就有兩三種鮮豔色，不必勉強找一個中性色當主色，而是先決定這幾個既有顏色裡誰扛大面積、誰只出現一點點，比例思考的邏輯不變，只是主色不見得是中性色。
如果真的需要第四個顏色，可以把點綴色的份額切一小塊出來給第二個強調色，例如原本的 10%拆成兩個各 5%，而不是額外加一個新的大面積色，這樣整體才能維持住一個主導的視覺重心。
回到最前面那三個數字，配色從來不是先挑喜歡的顏色，再想辦法把它們塞進畫面，順序反過來才對，先想清楚誰扛 60%、誰撐 30%、誰只留 10%，顏色本身反而是整套流程裡最後一步才決定的事。手邊如果正好有一份還在做的設計，哪怕只是一張名片或一張社群圖，不妨現在就照這三個比例重新檢視一次，看看畫面裡的視線，是不是真的照你想要的順序在走。