網站配色怎麼選？台灣小品牌用 60-30-10、對比度和兩個免費工具配出不亂的顏色

最後更新：2026/10/13

很多台灣小品牌的網站，顏色是一段一段加上去的：Logo 是紅的，按鈕想醒目一點用了橘色，活動區塊換成紫色，頁尾又套了主題預設的藍色。每一個單獨看都沒問題，放在同一頁就很亂，客人也分不出哪一個才是要按的。

教網頁設計時，學員遇到「選顏色」這種有變化的題目，總是比固定的操作步驟卡得更久，因為它需要判斷。好在配色有幾個可以照著做的方法：先定品牌色、再配一組色盤、用比例分配、最後用數字檢查看不看得清楚。

不想自己改？把這篇交給 AI

把這篇的網址（或全文）連同下面這段話貼給 AI：

我的網站是 WordPress。我想照下面這篇文章，用我的品牌色配出一組網站顏色，檢查文字和背景的對比夠不夠，再寫成 CSS 變數。
請先問我：我的 Logo 或品牌色、網站是哪一種行業、目前的網站顏色有哪些。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）

改之前先備份，密碼不要貼給 AI。

先從品牌色出發

網站的顏色，最好從你已經有的東西開始：Logo、招牌、包裝、名片。挑出一個最能代表你的顏色當主色，記下它的色碼（像 #2e7d32 這樣的六位數）。

想知道大品牌怎麼用顏色，可以逛逛 BrandColors 這個網站，它整理了六百多個知名品牌的官方色碼。你會發現大多數品牌的主色只有一兩個，靠的是同一個顏色一直重複出現，讓人記住。

用 Coolors 配出一組色盤

只有主色不夠，網站還需要背景色、文字色、強調色。Coolors 是一個免費的配色產生器：打開之後按空白鍵，它會一直產生新的五色組合；看到喜歡的顏色就鎖住，再按空白鍵，只換沒鎖住的。把你的主色輸入進去鎖住，讓它幫你找搭配的顏色，比自己一個一個試快得多。

配色時先想清楚這幾個顏色在網頁上各自負責什麼：哪個當大面積的背景、哪個當標題、哪個只用在按鈕，再來看漂不漂亮。顏色可以用來做出層次，例如淺色背景上放一張白色卡片、卡片下面一點陰影，就有了前後的空間感；也可以用來做對比，讓最重要的按鈕一眼就被看到。為了做層次和對比加顏色時，要隨時回頭看整頁會不會太亂太雜。

60-30-10：顏色的面積比例

配好色盤之後，用 60-30-10 來分配面積：大約 60% 是主要背景（通常是白色或很淺的顏色），30% 是次要的顏色（區塊底色、標題、圖示），10% 是最搶眼的強調色，只用在按鈕、重點、價格這些你最希望被看到的地方。

強調色用得越少越有效。如果每一段都有一個黃色按鈕、黃色標題、黃色框線，黃色就不再特別了。MIMI 的網站用了黃、綠、粉紅三個很亮的顏色，但大部分的面積仍然是白色和很淺的綠、淺黃，亮色只出現在色帶、按鈕和小圖示上。

區塊和區塊之間要換底色時，用同一個顏色的深淺變化，例如淺綠接白、白接淺黃，會比每一段換一個不同的顏色整齊得多。

用數字檢查：文字看不看得清楚

配色最常出的問題，是文字和背景的對比不夠。國際的網頁無障礙標準（WCAG）用一個「對比度」來衡量：一般大小的文字至少要 4.5 比 1，大字（大約 24 像素以上，或 19 像素左右的粗體）至少要 3 比 1。

我們拿 MIMI 網站的顏色實際算了一次：

文字／背景	對比度	一般文字	大字
黑字 #1d1d1f／黃底 #fff710	14.88	✅	✅
黑字／綠底 #62e79e	10.77	✅	✅
黑字／粉紅底 #ff497c	5.21	✅	✅
白字／粉紅底	3.23	❌	✅
白字／綠底	1.56	❌	❌
白字／黃底	1.13	❌	❌
淺灰字 #999999／白底	2.85	❌	❌
灰字 #767676／白底	4.54	✅	✅

結論很清楚：越亮的底色，越要配深色的字。白字放在黃色、綠色上幾乎看不見；放在粉紅色上只有大字勉強及格。很多網站喜歡用淺灰色的小字顯得精緻，#999999 在白底上並不及格，#767676 差不多是白底上還能及格的最淺灰色。

不用自己算，Chrome 的開發者工具在檢查文字顏色時會直接顯示對比度，網路上也有很多免費的對比度檢查網站，輸入兩個色碼就知道。

把色盤寫成變數

色盤定好之後，在 CSS 裡用變數寫一次，之後所有地方都用變數，不要到處寫色碼。哪天要調整品牌色，只改一個地方：

/* 色盤寫一次，到處都用變數 */
:root {
  --color-main: #2e7d32;   /* 主色 */
  --color-accent: #fff710; /* 強調色：只用在按鈕、重點 */
  --color-bg-soft: #e8fbf1;/* 淺色區塊底色 */
  --color-text: #1d1d1f;   /* 文字 */
}
.btn { background: var(--color-accent); color: var(--color-text); }
.section-soft { background: var(--color-bg-soft); }

CSS 放在「外觀 → 自訂 → 附加的 CSS」。用區塊主題的話，網站編輯器的樣式設定裡可以把這幾個顏色設成網站的色盤，編輯文章時選顏色，就只會看到這幾個，自然不會越用越亂。

顏色是品牌的一部分

顏色選定之後，網站、名片、社群貼文、包裝都用同一組，客人在不同地方看到你，都會認得出來。換來換去，反而讓人記不住。

如果你想要一個從配色、版面到細節都照你的品牌設計的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，配色會從你的品牌出發，連可讀性一起檢查。MIMI 提供台灣網頁設計服務，從臺北、新北到全台灣，都可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。