配色入門：新手完整教學

60-30-10 比例、三種安全配法、對比度檢查，一篇建立配色手感；搭配色票產生器直接抽色。

搭配工具使用：色票產生器

60-30-10：先有比例再選色

新手配色失敗，九成是比例問題不是顏色問題。記住 60-30-10：主色六成（背景、大面積）、輔色三成（區塊、卡片）、點綴色一成（按鈕、重點標示）。

順序是先決定主色（決定整體感覺：藍＝專業、綠＝自然、暖色＝活力），再找輔色，最後才挑點綴色。用色票產生器抽出一組 5 色，直接按 3-1-1 分配就是一組能用的配色。

第一種單色系：同一個色相、只變明度深淺，怎麼配都不會錯，適合報表和正式文件。第二種鄰近色：色環上相鄰的兩三色（如藍＋綠），柔和耐看，適合部落格和簡報。

第三種互補點綴：大面積用安全的中性色，只把對比色用在按鈕和重點（如白底＋橘色按鈕）。記住：對比色是調味料不是主菜，用量一超過一成就刺眼。

內文與背景對比至少 4.5:1，大標題至少 3:1，這是無障礙（WCAG）的硬門檻。最常見的錯誤是淺灰字放白底——設計稿上好看，手機在戶外直接隱形。

深色模式不是把顏色反相就好：背景壓深、文字調淺之後，對比一樣要重驗一次；連結色和按鈕色在深底上通常要再調亮一階。

大自然是最強配色老師：海邊（藍＋沙＋白）、森林（深綠＋苔＋米）、夕陽（橘＋紫＋深藍）都是現成的 60-30-10。電影海報和優秀 App 的截圖也是好教材。

看到喜歡的設計，先問三句：主色輔色點綴各是什麼？比例大概幾比幾？文字對比夠嗎？練十次之後，你就有自己的配色直覺了。

完全沒美感怎麼辦？

用公式代替美感：單色系＋60-30-10＋對比 4.5:1，三條同時做到就是 70 分的配色。剩下的 30 分才是天份，日常使用不需要。

公司已經有主色怎麼配？

主色當 60％直接沿用，用色票產生器以主色為基底抽輔色和點綴色；Logo 顏色通常只適合當點綴，不要拿來當背景色。

深色模式怎麼配？

背景用深灰而非純黑（純黑對比太烈），文字用淺灰而非純白；品牌色在深底上調亮一階再驗一次對比，通過才算數。

顏色太多怎麼辦？

先砍到三色：一個主色、一個輔色、一個點綴，外加黑白灰。頁面看起來雜，兇手永遠是第四色以後，把它們全部換成灰階立刻乾淨。