網頁設計配色實戰指南：4 步驟打造高質感網站色彩計畫
網頁設計配色是結構問題，與美感天分無關。固定「主色＋輔色＋強調色＋中性色」四個角色，套用 60-30-10 面積比例，最後跑一次 WCAG 對比檢查（正常文字需達 4.5:1，大字…
網頁設計配色是結構問題，與美感天分無關。固定「主色＋輔色＋強調色＋中性色」四個角色，套用 60-30-10 面積比例，最後跑一次 WCAG 對比檢查（正常文字需達 4.5:1，大字 3:1，資料來源為 W3C WCAG 2.1 官方文件），配出來的網站就會同時有質感、有品牌感、又讀得到字。這套流程不管你有沒有美術底子都能照著跑一遍。
重點先看：網站配色的成敗取決於角色分工與面積比例，與工具貴不貴無關。四個色彩角色固定下來、主色只佔三成面積、強調色嚴守一成，加上 WCAG AA 4.5:1 對比檢查，配出來的網站就有質感又可讀。
很多站長以為網站配色技巧就是「在 Coolors 上按空白鍵，按到喜歡的就收」。盯著色盤挑半小時，配出來的網站還是怪，因為配色成果的好壞取決於角色分工與比例，工具只是加速器。這篇把整套工作流拆給你看：固定四個色彩角色、從品牌情緒反推主色、用 60-30-10 分配面積、從 現有 LOGO 延伸整套色階、挑一個順手的 配色工具，最後補上兩個網頁專屬、卻最常被忽略的條件：WCAG 對比度與深淺色模式相容。整體觀念可以先讀過 網頁設計從零到一的完整指南 再回來聚焦配色。
配色之所以是結構問題，因為每個環節都有可量測的判斷標準：色相對應品牌情緒、飽和度對應質感、明度對應可讀性、面積比例對應視覺層次。這四個變數都能用數字描述、用工具檢查，跟「我覺得這樣好看」的主觀判斷不同。把變數拆開處理，失誤率會大幅下降，因為每個顏色都有明確角色與位置，不會出現「這個紅到底要不要用」的反覆爭論。
網頁設計配色的起點：先把四個色彩角色固定下來
網站配色的第一步要先決定四個色彩角色：一個主色、一個輔色、一個強調色，加上兩到三個中性色（黑、白與兩三階灰階）。這四個角色是整份網站色彩計畫的地基。把角色固定下來，之後不管換主題、做幾頁，配色都會一致。這是品牌與介面設計中常見的角色分工，也是避免「整個網站看起來很亂」的根本辦法。
很多人把問題歸咎到「顏色用太多」，其實顏色數量從來不是重點。用八個色票還是很乾淨的形象網站，與只用了三個顏色卻整頁花掉的 銷售頁，差別都在於有沒有角色分工。沒有分工，每個顏色都在搶戲；有分工，每個顏色知道自己什麼時候該出場、什麼時候該退到背景。
| 色彩角色 | 數量 | 主要用途 | 面積建議 |
|---|---|---|---|
| 主色（Primary） | 1 個 | Logo、主要按鈕、重點標題 | 約 30% |
| 輔色（Secondary） | 1 個 | 區塊層次、支援主色 | 含在主色 30% 內 |
| 強調色（Accent） | 1 個 | CTA、連結、重要提示 | 約 10% |
| 中性色（Neutral） | 2 到 3 個 | 背景、大量文字、邊框 | 約 60% |
主色是品牌識別的核心，通常只選一個，一出現兩個品牌識別就會分裂。輔色與主色同色系或鄰近色，用來支援主色、做出區塊層次；最常見的做法是同一個色相、明度或飽和度拉開一階，視覺上像同一家族又分得出層次。強調色與主色形成對比，常用 色相環上的互補色或分割互補色，只留給 CTA 行動呼籲按鈕、連結與重要提示，面積一定要小；它本質上是「指路用的螢光筆」，滿頁都是螢光筆等於沒有重點。中性色是網站可讀性的骨幹，負責背景、文字與邊框，沒有大面積的中性色讓眼睛休息，主色與強調色會顯得刺眼，這也是很多配出來「很土」的根源。想更深入色彩關係，可以延伸讀 色彩學完整指南與對比色互補色觀念 與 RGB 與 CMYK 色彩模式 的差異。
從品牌情緒反推主色
選主色要從「你想讓訪客感覺到什麼」開始，不是從色盤開始。真正決定成敗的是有沒有先想清楚品牌情緒。先把品牌情緒定成一個詞（專業、溫暖、活力、信任），再對照該情緒常用的色相區段，縮小到兩三個候選色，最後用飽和度與明度微調，主色就會自然浮現。沒有美術底子的人用這個方法，反而比盯著色盤亂挑更準。
色彩心理學研究中常見這類聯想：信任與專業落在藍色系、溫暖與食慾落在橙紅系、自然與健康落在綠色系、奢華則落在深紫與金黑。這是通論不是鐵律，但對沒有方向的人來說，已經足夠把無限的色盤收斂成一個色相區段。想要更系統化的情緒對照，可以讀 色彩心理學與顏色情緒聯想應用。
| 品牌情緒詞 | 常用色相區段 | 常見應用場景 |
|---|---|---|
| 信任、專業 | 藍色系 | 金融、科技、企業形象 |
| 溫暖、食慾 | 橙紅系 | 餐飲、烘焙、親子 |
| 自然、健康 | 綠色系 | 有機、保養、醫療 |
| 活力、年輕 | 黃橙、桃紅 | 活動、娛樂、電商促購 |
| 奢華、高級 | 深紫、金黑 | 精品、美容、訂製服務 |
鎖定一個色相區段後，不要一次看十幾個版本，那會讓你陷入選擇癱瘓。挑兩到三個明度飽和度不同的版本並排比較就好。一個要特別小心的陷阱：飽和度拉到極高的純色在螢幕上會刺眼，新手常誤以為鮮豔等於有質感。真正有質感的網站，主色飽和度多半不會頂滿，而是略降一階、明度也微調過，這也是 最新網頁設計趨勢與風格解析 裡常見的做法。
判斷飽和度是否過高有一個簡單的辦法：把候選主色放進滿版的純白背景上，如果你的眼睛在兩秒內就覺得「刺、悶、想移開視線」，這個色就是飽和度過頭。把飽和度往下調 10% 到 15%，明度也微調，再放回背景看一次，多半就會變得耐看。這個微調幅度不大，但對整頁的質感影響明顯，因為主色會出現在 Header、按鈕、標題這些高頻位置，一點點刺眼感都會被放大。
最快的主色來源往往是品牌現有的東西。直接從 Logo 標準字設計 或 CIS 企業識別系統 裡抽色，能保證一致性，還省下挑色的時間。實務上先寫一句品牌情緒詞鎖定方向，再花十分鐘微調明度飽和度，整個流程比從零挑色快上好幾倍；定案前再放進 UI 原型設計 軟體看實際排版效果，不要只看單色色票。
配色比例：用 60-30-10 原則讓網站不會看起來很亂
比例是網站配色是否乾淨的關鍵，與顏色數量無關。套用室內設計與品牌設計常用的 60-30-10 原則：中性色與背景佔約六成、主色與輔色佔三成、強調色只佔一成。這是一條業界通用的經驗法則，沒有單一權威出處，但被廣泛用於品牌、空間與介面設計；比例對，即使用了五六個色票，視覺上依然乾淨。
60-30-10 的核心邏輯是「讓眼睛有地方休息」：六成中性背景提供呼吸空間、三成主色建立品牌辨識、一成強調色把目光拉到該點擊的地方。三層一旦失衡，視覺重心就會跑掉：強調色超過一成，CTA 反而失去聚焦效果；主色壓不到三成，品牌辨識變弱。
| 比例 | 色彩角色 | 常見出現位置 |
|---|---|---|
| 60% | 中性色（白、淺灰、深灰） | 頁面背景、大量內文、留白 |
| 30% | 主色＋輔色 | Header、區塊標題、圖片色調、卡片底 |
| 10% | 強調色 | CTA 按鈕、連結、重要提示、Icon |
六成中性色裡，白、淺灰、深灰各有任務：白負責最大面積的背景，淺灰負責次要區塊與卡片底，深灰負責主要文字與頁尾。把主色當成大面積背景是常見錯誤，整個網站會看起來壓迫、主色也因為過度曝光而失去辨識力。主色留給 Header、區塊標題與圖片色調「點綴式」出現，反而更能建立品牌感。在 網頁版面設計與 RWD 響應式排版 的框架下，比例還會跟版面區塊大小連動，建議兩邊一起規劃。驗收時把網站截圖轉成灰階，如果還看得出層次，代表比例沒有崩壞。
一個實用的檢查技巧是灰階測試。把整頁截圖丟進任何 Figma 或影像軟體轉成灰階，如果畫面變成一片死灰、分不出輕重，代表你的對比全靠色相撐、明度層次是空的。這種配色在 響應式網頁設計 的小螢幕上特別容易崩，因為手機會壓縮區塊、讓層次更難看出來。手機流量在 2026 年第一季佔全球網站流量的 52.27%（不含平板），是相對多數的來源，這也代表你的配色在手機上的表現，會決定過半訪客對網站的第一印象 [來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]。
用 LOGO 當取色源頭，做出整站一致的色階
把 Logo 放進配色工具，吸出主色當網站主色，再從同一個色相往深淺延伸做出輔色與中性色階，最後用色環挑一個對比色當強調色。這套流程能保證網站配色與品牌 Logo 完全一致，是接案設計師做 品牌形象網站 時最常用的取色法。一致性是品牌辨識的命根子：訪客記住你的方式多半是「那個藍藍的網站」「那個橘色的品牌」，網站主色跟 Logo 對不上，等於每次曝光都在稀釋品牌記憶。直接從 Logo 抽色，能讓網站、社群、名片、包裝共用同一組色票，這也是 品牌官網架設 時最該先處理的一件事。想確認各通路曝光是否維持一致，可以用 Ahrefs Brand Radar 追蹤品牌提及與色票一致性。
流程拆開來看：用檢色器或配色工具的 photo 功能讀出 Logo 主色的 HEX 值（例如 #2A5CAA）當網站主色；以主色為基準往明度兩端延伸做出 50 到 900 的色階，淺色階當背景與輔色、深色階當標題與邊框；再到色環上找主色的互補或分割互補色當 CTA 強調色（主色藍就用橙黃）；最後另選兩到三階真正的灰階，不能直接把主色降明度充數。色階生成是這套流程的精髓，能讓網站從單調的「一個藍」變成有層次的「藍色家族」，這些層次剛好對應介面設計的不同狀態：淺色階做 hover 背景、中間階做主要按鈕、深色階做 disabled 或邊框。色階觀念也跟 中文字體設計、英文字體推薦 裡的字重層次互通，都是「同一個來源做出深淺變化」。
色階要拉幾階才夠用，實務上九階（50 到 900）能涵蓋大多數介面狀態，少於五階會在 hover、active、disabled 之間分不出差異。常見的錯誤是把色階拉得太密，每一階差異不到肉眼可辨的程度，色階表看起來完整，實際套用時還是只有「深、淺」兩種感覺。檢查方法是把色階印出來平鋪排列、眯起眼睛看，相鄰兩階分不出差別就代表階數過密，應該合併。
定中性色是最多人犯錯的地方。很多人以為「中性色就是把主色明度拉低」，這會讓灰階其實帶有藍調或橙調，看起來髒髒的。真正的中性色是獨立挑的灰階、不帶色相，文字才會乾淨、背景才會中性。以 Logo 為取色源頭雖然一致性最高，卻也最容易在這一步偷懶，值得特別留意。
Coolors、Adobe Color 與照片取色工具的選擇
做網站配色最實用的三個工具各有強項：Coolors 勝在一鍵產生色票與匯出 CSS 變數、Adobe Color 勝在色彩調和規則與對比檢查器最完整、照片取色類工具勝於從品牌照片或 Logo 反推色票。依需求挑一個主力就夠用，不必全部都裝；多數自架站站長裝 Coolors 一個就涵蓋九成需求。工具是拿來加速既有流程的，不是取代前面的角色分工與比例思考。四個色彩角色還沒定下來就先別開工具，否則只會在隨機色票裡迷路，這也是為什麼前面堅持先講角色與比例，再進工具。
| 工具 | 產生色票 | 對比檢查 | 吸取照片色 | 匯出 CSS 變數 | 免費可用 |
|---|---|---|---|---|---|
| Coolors（coolors.co，功能頁） | 按空白鍵隨機、可鎖色 | 基本 | 有 photo 功能 | 支援 CSS／SCSS／JSON | 是 |
| Adobe Color（color.adobe.com，功能頁） | 色輪＋調和規則 | 最完整 | 可從圖片抽主題色 | 需手動整理 | 是 |
| 照片取色工具（如各線上 palette 工具） | 由照片自動分析 | 視工具而定 | 主要強項 | 視工具而定 | 多數是 |
Coolors 適合從零快速產色票的人，按空白鍵隨機產生一組配色、鎖定喜歡的色再繼續產，還能直接匯出 CSS 變數與 JSON，丟進 CSS 入門 專案就能用。Adobe Color 適合需要理論依據與無障礙檢查的人，色輪內建類比、互補、三元等調和規則，對比檢查器會直接標示是否達 WCAG 標準，做 UIUX 自學 練習時很實用。照片取色工具則適合延續既有視覺資產，例如有一組 商用免費圖庫 抓的品牌照片，想讓配色跟照片一致，丟進去就能抽出主色票。挑工具時順手準備一些搭配資源，例如 免費 Icon 圖示網站 配強調色、Eagle 設計素材管理工具 統一管理色票與素材，會讓配色落實到網站的過程順很多。
配色收斂：用對比度與可讀性檢查，避免好看卻讀不到
配色的最後一步必須用對比檢查器驗證文字與背景的明度比：正常文字要達 WCAG AA 標準的 4.5:1、大字（18pt 以上或 14pt 粗體）至少 3:1，這是 W3C WCAG 2.1 官方文件明訂的數字。否則再好看的配色，在螢幕與手機上都會讓內容讀不到。配色好不好看是主觀的，但文字讀不讀得到是客觀、且有明確標準可量測的。W3C 在 WCAG 2.1 的 對比度最低標準 中明確規定的這組數字，可以直接拿來當驗收門檻；把整站文字背景對比彙整成可追蹤報表，搭配 Google Looker Studio 製作資料視覺化報表，配色驗收就不再只靠感覺。
| 文字類型 | WCAG AA 最低對比 | 常見檢查工具 |
|---|---|---|
| 正常內文（小於 18pt） | 4.5:1 | WebAIM Contrast Checker |
| 大字（18pt 以上或 14pt 粗體） | 3:1 | Adobe Color 對比檢查器 |
| UI 元件與圖示邊界 | 3:1 | 瀏覽器 DevTools 色彩檢查 |
常見地雷是灰字配白背景。很多人覺得這樣「柔和、有設計感」，但對比度常低於 4.5:1，在行動裝置的戶外強光下更難讀。另一個地雷是主色按鈕配白字，看起來很有品牌感，但如果主色明度偏高，白字就會糊進去。檢查工具不用挑貴的，Adobe Color 內建對比檢查器、瀏覽器 DevTools 的色彩檢查、免費的 WebAIM Contrast Checker 都能用，重點是「每一組文字背景都要跑一次」，不要只檢查主色配白字就交差。
對比不夠時，修正的方向有兩個：把文字加深，或把背景調亮。具體來說，加深文字的效果通常比調亮背景明顯，因為文字面積小，加深一階對整體視覺幾乎沒有破壞，但對比提升的幅度卻很大。把背景調亮則要小心，因為背景面積大，一調就會牽動整頁的明度重心，可能讓原本設計好的層次跑掉。實務上會優先動文字色，背景只有在前者已經加深到接近黑色、對比還是不夠時才動。
深色模式是另一個容易被忽略的坑。同一組配色在淺色與深色背景下對比表現完全不同：淺色模式下達標的強調色，到了深色模式常常對比過高、刺眼到看不下去；深色模式下達標的色，在淺色模式可能根本看不到。實務上強調色常需要準備兩個版本，深色模式下調亮一階才能維持可見，這也是為什麼後面會把配色整理成 CSS 變數、讓兩種模式各有一組 token。深色模式做不做得好，會直接影響 網站速度優化 之外的使用體驗，也跟 自架網站常見的網頁設計錯誤 息息相關。
進階可及性：色盲模擬與非文字對比檢查
WCAG 對比檢查只照顧到「文字讀不讀得到」，但網站還有一大類問題是「資訊能不能被正確辨識」。最典型的就是只用顏色來區分狀態的設計，例如把「成功」標成綠色、「錯誤」標成紅色，對紅綠色弱（deuteranopia 與 protanopia）的訪客來說，這兩個顏色幾乎一樣，等於完全讀不到狀態。男性中約有一定比例帶有不同程度的色覺異常，這不是少數族群可以忽略的邊緣案例，而是會實質影響表單轉換與錯誤提示的設計問題。
解法不是放棄顏色，而是讓顏色搭配第二個維度：圖示、文字標籤、形狀或底紋。例如錯誤狀態同時用紅底加一個叉號圖示與「錯誤」兩個字，成功狀態用綠底加勾號圖示與「完成」兩個字，這樣即使訪客分不出紅綠，也能透過圖示與文字辨識狀態。這個原則在 WCAG 2.1 的「不要單獨使用顏色傳達資訊」條款裡有明確規範。
| 常見只用顏色的設計 | 色弱訪客的問題 | 修正做法 |
|---|---|---|
| 表單錯誤只把框變紅 | 紅綠難辨，看不到錯誤 | 加錯誤圖示與提示文字 |
| 折線圖只用紅綠兩條線 | 兩條線看起來一樣 | 加上虛線、實線或圖例標籤 |
| 庫存狀態只標紅黃綠燈 | 三色辨識困難 | 燈號旁補「缺貨」「即將售完」文字 |
| 連結只用變色提示 | 連結跟內文分不出來 | 加底線或加粗 |
檢查的方法是把網站截圖丟進色盲模擬工具（例如 Stark、Chromatic Vision Simulator 或 Chrome DevTools 的「Emulate vision deficiencies」），切換到紅色盲、綠色盲、藍色盲與全色盲模式各看一次。如果某個重要資訊在任一模式下消失或混淆，就是設計有漏洞。這個檢查只要花十分鐘，卻能擋掉一大類被忽略的可及性錯誤，尤其對表單密集的 3C 電商網站 與 餐飲網站設計 特別重要。
另一個容易被忽略的是非文字對比。按鈕邊框、輸入框邊線、Icon 的前景與背景之間，WCAG 2.1 也要求至少 3:1 的對比。很多人把輸入框邊線用很淡的灰色，看起來簡潔，但對低視力訪客或在強光環境下，整個框會消失，導致表單根本不知道要填哪裡。把 UI 元件的邊界對比一起納入檢查清單，才算是完整的可及性驗收。
配色決策矩陣：不同品牌階段怎麼選主色路徑
前面講的都是「怎麼配出正確的色」，但實際開工時，不同品牌階段、不同預算、不同素材完整度，適合走的取色路徑會不一樣。硬套同一條流程，會浪費時間或做出跟現實脫節的配色。下面用一個二維矩陣，幫你快速判斷自己的專案該走哪一條路。
矩陣的兩個維度是：縱軸代表「品牌資產完整度」，也就是你有沒有現成的 Logo、CIS 或品牌照片可以抽色；橫軸代表「配色決策權」，也就是這個顏色是你自己拍板，還是要跟客戶、行銷團隊或法規一起決定。資產越完整、決策權越集中，流程越短；資產越缺、決策越分散，越需要先用情緒詞與情緒板（moodboard）收斂共識。
| 象限 | 情境 | 建議路徑 |
|---|---|---|
| 資產完整＋決策集中 | 自有品牌、Logo 已定案、自己拍板 | 直接從 Logo 抽主色，生色階，三十分鐘完工 |
| 資產完整＋決策分散 | 接案品牌網站、要跟客戶確認 | 從 Logo 抽色後，先做三組候選配色提案，附情緒板說明，讓客戶選 |
| 資產不足＋決策集中 | 新創、還沒有 Logo | 先寫品牌情緒詞，鎖定色相區段，自己定主色再回頭補 Logo |
| 資產不足＋決策分散 | 新創、要跟合夥人或行銷確認 | 先做情緒板收斂情緒詞共識，再各自挑色，用灰階測試與對比檢查當客觀評分標準 |
資產不足時最忌諱的就是直接開配色工具亂按。沒有 Logo、沒有情緒詞，色盤上的每一個顏色看起來都合理，你會陷在「這個也不錯、那個也不錯」的迴圈裡，花一小時還是定不下來。先用一個情緒詞把方向鎖死，再進工具，效率會高很多。這也是為什麼前面那段主色選擇的流程，會把「寫情緒詞」放在第一步，它不只是給沒有美術底子的人用的技巧，連有經驗的設計師在資產不足時也會靠它收斂方向。
決策分散的專案，建議把客觀標準當成溝通工具。客戶或合夥人對顏色的意見通常很主觀（「我覺得這個藍太冷」），這時候把灰階測試、對比檢查、品牌情緒詞這三個客觀標準搬出來，比各說各話有效得多。例如跟客戶解釋「這個藍之所以選它，是因為它在我們設定的『信任』情緒詞下、飽和度也降到不刺眼、對比檢查還過標準」，客戶就比較容易接受，因為理由是可檢視的，不是純粹品味之爭。
把配色套進 WordPress 的全域變數
把配色工具匯出的 HEX 值整理成一份色彩 token 清單，再透過 WordPress 佈景主題的全域色彩設定或自訂 CSS 變數一次套用全站。日後要改色，只要改一個地方，整站同步更新。這是配色落地最關鍵的一步，卻最常被省略。
很多人配完色直接開始逐頁手改顏色，改到第五頁就崩潰，因為每改一次主色就要回頭改幾十個地方。正確做法是把配色抽象成變數。色彩 token 是設計系統的核心概念，意思是「給每個顏色一個語意化名稱，之後只引用名稱、不直接寫色碼」。這套觀念也適用於 CSS Box Model 與 SASS 教學 裡的變數管理。
| Token 名稱 | 角色 | 範例 HEX |
|---|---|---|
| --color-primary | 主色 | #2A5CAA |
| --color-secondary | 輔色 | #5B8FD6 |
| --color-accent | 強調色（CTA） | #F2A93B |
| --color-neutral-100 | 背景白 | #FFFFFF |
| --color-neutral-500 | 中灰（次要文字） | #6B7280 |
| --color-neutral-900 | 深灰（主要文字） | #1F2937 |
主流 WordPress 佈景主題幾乎都有全域色彩面板。Astra 的自訂器（見 Astra 主題教學、Astra Pro 主題完整功能指南）能直接填入主色與輔色，整站 Header、按鈕、連結同步更新；Blocksy 與 Kadence 也有類似的全域色彩設定，用 Blocksy 主題做 RWD 響應式設計 時把全域色彩設好，後續排版就不用逐頁改色。WordPress 目前是全網超過四成網站使用的內容管理系統，全域色彩機制是絕大多數自架站站長觸手可及的 [來源：〈W3Techs — Usage Statistics and Market Share of WordPress〉〈https://w3techs.com/technologies/details/cm-wordpress〉〈2026-06-29〉]。
落地流程其實就是四個動作串起來：先把每個角色的 HEX、RGB、HSL 記下來、命名一致（例如 --color-primary）；接著填入主題全域色彩面板；然後在自訂 CSS 或子主題用 :root 定義變數方便引用；最後讓頁面編輯器綁定全域色彩。主流編輯器如 Elementor、Divi、Gutenberg 區塊外掛 都支援這種綁定，設定一次之後，日後改版型都只要動 token 那一處。
要做深色模式，token 機制也是基礎。把淺色模式的變數定在 :root，深色模式的變數定在 @media (prefers-color-scheme: dark) 區塊裡，名稱一樣但值換掉，瀏覽器就會根據使用者系統設定自動切換。這樣強調色在深色模式下調亮一階的修正，就變成只改一個變數值的事，不必逐頁處理。如果想追蹤使用者切換深淺色模式之後的行為，搭配 Google Looker Studio 製作資料視覺化報表 把互動數據視覺化，可以看出深色模式對停留時間與跳出率的影響。Google Analytics 是多數網站使用的流量分析工具，能夠提供這類切換行為的原始數據 [來源：〈W3Techs — Usage Statistics and Market Share of Google Analytics〉〈https://w3techs.com/technologies/details/ta-googleanalytics〉〈2026-06-29〉]。
把這套 token 機制建立起來，等於把前面所有配色決策固化成一份可重複套用的資產。下次做新專案，把同一份 token 複製過去、改掉幾個變數值，就能快速產出風格一致的新網站。這也是接案設計師能 報出合理價格 與 穩定交付外包案 的底氣來源。
常見配色錯誤與檢查清單
把前面幾個段落出現的失誤收攏來看，最常見的問題都圍繞在同一個根源：跳過角色分工與比例，直接進色盤。顏色用太多沒有角色分工、強調色面積過大失去焦點、只看色相不檢查對比度、照抄流行色卻跟品牌情緒無關，這四類錯誤的成因與破解方式整理如下，配完色後照著逐項打勾。
| 常見錯誤 | 成因 | 破解方法 |
|---|---|---|
| 色票超過五六個又沒分工 | 看到喜歡的色就加，沒有角色限制 | 回歸主色＋輔色＋強調色＋中性色四角色 |
| 強調色當主色用，整頁都花 | 把鮮豔色當大面積背景 | 強調色嚴守一成面積，只留給 CTA |
| 配完不檢查對比，手機上看不到字 | 只憑感覺判斷可讀性 | 每組文字背景跑一次 WCAG 4.5:1 檢查 |
| 照抄流行配色但與品牌調性不符 | 追趕當季流行色 | 先寫品牌情緒詞再回頭挑色 |
第二個錯誤特別值得提。很多人看到流行色報告，例如某年度代表色，就直接整頁套上去，結果跟自己的品牌情緒完全對不上。流行色可以參考，但只能當強調色或季節性活動配色，不能取代主色。想知道怎麼把流行元素融進既有品牌而不打架，可以讀 網頁設計趨勢與 AI 設計工具 與 AI 繪圖與 ChatGPT 網頁設計實戰。如果你是從 Canva 新手設計 或 Canva Pro 進階技巧 過來的，也會遇到同樣的「配色看起來很土怎麼救」問題，破解邏輯是一樣的。
- 四個色彩角色齊全，主色只選一個，強調色壓在一成面積以內。
- 每組文字背景都跑過 WCAG AA 對比檢查，灰階測試下還看得出層次。
- 深色模式下強調色另測一輪，必要時調亮一階。
- 表單狀態與圖表資訊有第二個辨識維度（圖示或文字），不單靠顏色。
- UI 元件邊界對比至少 3:1，配色已整理成 token 並套用到主題全域色彩。
不同類型網站的配色方向
四個色彩角色與 60-30-10 比例是通用骨架，但不同類型網站會在「主色情緒」與「強調色力道」上有差異。電商網站常把強調色力道加重，因為 CTA 的點擊直接關係到訂單；形象網站則常把主色收斂、強調色壓低，讓品牌質感優先於促購。下面整理三種常見類型的方向。
| 網站類型 | 主色情緒方向 | 強調色力道 |
|---|---|---|
| 電商／促購 | 活力、信任並重 | 偏強，CTA 要醒目 |
| 形象／品牌官網 | 收斂、質感優先 | 偏弱，留白與層次優先 |
| 內容／部落格 | 中性、降低干擾 | 極弱，僅連結與提示 |
電商網站可以參考 AI 網站建立工具實測比較 與 用 Elementor 做 RWD 電商設計 的做法，把強調色留給「加入購物車」「立即結帳」這類關鍵按鈕。形象網站則看 品牌網站的關鍵設計建議 與 企業形象網站的價值，主色選深一點、飽和度降一階，質感會立刻提升。內容網站像 WordPress 部落格架設 與 Soledad 部落格主題，配色越中性越好，把視覺重心還給文章本身。想看更多範例，可以瀏覽 網頁排版設計範例、優質網頁設計靈感 與 作品集範本。
電商的強調色挑選有一個實務經驗值得記下來：強調色要跟主色拉開足夠的色相距離，但不能跟主色完全沒有關聯，否則會看起來像臨時貼上去的補丁。常見的做法是用主色的互補色或分割互補色，例如主色藍配橙黃、主色紫配黃綠。這樣既能在視覺上跳出來，又維持在同一個色彩家族裡。強調色的飽和度可以比主色高一點，因為它的面積小，高一點的飽和度反而能幫它聚焦。
這些方向是起點，不是限制。例如做 一頁式網站 或 Bento Grid 排版 時，因為版面集中，強調色可以稍微加重；做 Landing Page 轉換率優化 時，強調色更是轉換的關鍵變因之一。把角色與比例的骨架記熟，遇到不同類型網站只要微調「力道」，不需要每次重新發明配色邏輯。
配色上線後的追蹤與迭代
配色上線不是終點，而是觀察的起點。再嚴謹的配色流程，都可能因為實際素材、螢幕校色差異、或訪客使用情境而產生預期外的問題。上線後建議追蹤幾個觀察點：表單的放棄率、CTA 的點擊率、跳出率、以及使用者回饋裡跟「找不到按鈕」「看不清楚」相關的訊息。如果某個頁面的跳出率異常高，又找不出內容問題，第一個該懷疑的就是該頁面的文字對比與強調色可見性。
以一個月流量約落在 3 萬到 8 萬工作階段的內容型網站為例，常見的狀況是配色上線前幾週看起來沒事，但放大到完整的流量週期後，灰字次要文字在戶外強光的手機上讀不到的問題才會浮現。依這類站的典型表現幅度，重點 CTA 按鈕（主色明度偏高的藍配白字）在淺色模式下的對比常落在約 3.2:1 到 3.8:1 之間，未達 WCAG AA 的 4.5:1，而次要灰階說明文字則更常壓在約 3.0:1 上下，這兩組是高頻被忽略、又會直接拉低停留時間與表單完成率的環節。實務上常見的修正幅度是把主要 CTA 的文字加深約一到兩階、把次要說明文字的明度往下調約 10% 到 20%，再跑一次 WebAIM Contrast Checker 確認都跨過 4.5:1；這類以對比為主的調整，依典型表現對表單放棄率與跳出率的影響幅度約落在個位數百分比，方向上往改善靠攏，但不會是翻倍級的跳動。要誠實說明的一個限制是，配色的數據影響很難單獨剝離：對比修正常與按鈕位置、文案、頁面動線同時進行，單看圖表容易把改善全歸因到配色，因此決策上會建議在這類站把「對比檢查」當成上線前的硬性驗收門檻，避免上線後才靠數據回推是否合格、事後分不清因果。
迭代時要遵守一個原則：一次只改一個變數。如果你同時改主色、強調色與按鈕位置，事後根本分不出是哪個改動造成數據變化。正確做法是每次只動一個 token，例如這週只把強調色調亮一階，觀察一個完整的流量週期，再決定要不要保留。這套迭代觀念跟 Landing Page 轉換率優化 的 A/B 測試邏輯一致，差別只在於這裡測的是色彩變數。把觀察結果整理進 token 註解裡，例如在變數旁寫下「2026 Q3 調亮一階，CTA 點擊上升」，團隊未來改色時就有依據可參考。
常見問題 FAQ
網頁設計配色到底怎麼開始？
先別碰配色工具，第一步是把四個色彩角色定下來：主色、輔色、強調色各一個，加上兩到三個中性色。角色齊全之後，再用 60-30-10 比例分配面積，最後才進工具挑具體色票。順序顛倒過來，配出來的網站十之八九會亂。
怎麼用 LOGO 顏色做出整站配色？
先用檢色器吸出 Logo 主色當網站主色，接著在同一個色相上往深淺兩側展開成色階，淺的當輔色與背景、深的當標題與邊框，最後到色環上挑一個互補色當強調色。這套做法能讓網站配色與 Logo 完全對得起來。
網頁配色對比度不夠怎麼辦？
把文字顏色加深，或把背景調亮，直到正常文字對比度達 WCAG AA 的 4.5:1、大字達 3:1。優先加深文字，因為文字面積小、對整體視覺破壞少。用 Adobe Color 對比檢查器或 WebAIM Contrast Checker 量測，不要靠感覺判斷。灰字配白背景是高頻地雷，特別要檢查。
網站深色模式配色要分開做嗎？
要。同一組配色在淺色與深色背景下對比表現不同，強調色常需要在深色模式下調亮一階才能維持可見。建議把配色整理成 CSS 變數，淺色模式與深色模式各準備一組 token，切換時整站同步換色。
網站只用顏色區分狀態會有問題嗎？
會。對色覺異常的訪客來說，紅綠、藍黃這類對比色可能看起來幾乎一樣，只靠顏色傳達狀態會讓這群訪客完全讀不到資訊。解法是讓顏色搭配第二個維度，例如圖示、文字標籤或形狀。WCAG 2.1 也明文規定不得單獨使用顏色傳達資訊，建議把這條納入配色驗收清單。
為什麼我配的顏色看起來很土？
通常是三個原因之一：飽和度拉到極限讓純色刺眼、中性色不足導致主色過度曝光、或照抄流行色而跟品牌情緒無關。把飽和度降一階、補足六成中性色、先定品牌情緒再挑色，質感會立刻不一樣。
整套工作流串起來就是：固定四個色彩角色、用品牌情緒反推主色、以 60-30-10 分配面積、從 Logo 拉出整組色階、挑一個順手的工具、最後跑 WCAG 對比檢查與深淺色模式相容，再整理成 token 套到 WordPress。卡關時回頭照著這條路徑走一遍，多半就能定位問題出在哪一環。配色只是網站競爭力的一環，想讓網站在搜尋結果也佔到好位置，可以延伸讀 《SEO 排名攻略學》從產業分析到落地實戰的系統化課程，把設計與流量一起拉起來。