網頁設計配色實戰指南：打造高質感網站色彩計畫

相信不少人也遇過這種狀況：打開配色工具，盯著幾百個色票看了兩個小時，最後選了一組「看起來很順眼」的顏色，套上網站之後卻覺得哪裡怪，又說不上來。更常見的情況是，首頁很美，但一進到產品列表、文章頁、結帳流程，整個色彩系統就開始崩塌：按鈕跟標題搶視線、狀態色跟品牌色撞在一起、深色模式一開文字直接消失。

下面用角色、品牌方向、視覺比例與 Token 四個步驟規劃網站色彩。它是一種可重複的工作方法，仍要搭配實際元件、狀態與裝置驗證；交付範圍依專案決定。

核心重點｜網站配色的本質是分工，不是美感。先決定六個色彩角色（背景、層次表面、主文字、次文字、互動、強調與狀態），再從品牌情緒反推一個主色相，接著用比例紀律把層級做出來，最後收斂成 design token 交給開發。對比與無障礙不是事後補丁，而是每一步都要回頭檢查的驗收門檻。

開工之前，先認清「網站配色」跟「選喜歡的顏色」是兩件事

很多人把配色想成挑衣服：憑直覺、看心情、跟流行。但網站配色比較像編預算，每一個顏色都是一筆支出，你只有有限的「注意力預算」可以分配。把預算灑在十個地方，等於哪裡都沒有重點；把預算集中在一兩個關鍵動作上，視覺層級才會清楚，使用者才會知道「我現在該看哪、該點哪」。

角色不清可能讓連結、按鈕、標題與狀態難以區分。同一色號可以服務不同語意，只要上下文、形狀、標籤與互動回饋清楚；沒有證據能把九成配色問題都歸於這一點。

配色可影響辨識與操作，效果仍和文案、位置、任務及受眾一起作用。調整按鈕顏色不能保證點擊或轉換提升，應以實際完成狀況驗證。 延伸可參考CTA 設計指南。

先定義顏色的用途與各種狀態，再決定具體色票。角色可以共用色號，也能在不同主題下映射到不同值；重點是語意一致，不是每色只能一個用途。 延伸可參考色彩學完整指南。

第一步｜把網站拆成六個色彩角色，架構先於顏色

這一步最重要的產出，是一張「色彩角色表」。在還沒有決定任何具體色號之前，你就要先定義網站上會出現的所有顏色用途。我習慣把它拆成六個角色，這比傳統的「主色、輔色、強調色」三分法精確得多，因為它直接對應到畫面上真實會發生的情境。

背景、文字、互動與狀態需各有可辨識的表現。全站可以有主次按鈕或不同情境色，不必所有可點元素都同一藍色；成功綠、錯誤紅等是常見慣例，不是所有文化與品牌的固定規則，仍應附文字或其他線索。

把角色拆到足以支援實際元件

六個角色是本文的工作起點，可依產品合併或增補。除了品牌主輔色，還需定義文字、表面、互動、停用和狀態等情境，避免臨時補色缺少記錄。

角色表可以減少選色時的混亂，具體色值仍需檢查對比、品牌與元件狀態，不會因架構完成就自動選對。

第二步｜以品牌方向提出配色假設

先描述希望呈現的品牌方向，再整理色彩候選與參考。情緒和色相的關係受文化、內容及個人經驗影響，只能作待測假設，不能視為固定心理定律。 延伸可參考色彩心理學設計攻略。

實務上我會準備一個很簡單的情緒清單，例如：這個品牌要傳達的是「信賴、專業、穩定」，還是「活力、年輕、衝勁」，又或者是「溫暖、親近、生活感」。不同的情緒組合會指向不同的色相區間：信賴類的通常落在藍色到青色，活力類的落在橙紅到黃，生活感類的落在綠到大地色。這不是絕對公式，但它給你一個起點，讓你不用從幾百個色票裡大海撈針。連情緒方向都還很模糊的話，先去翻幾個設計靈感來源，把看起來順眼的網站截圖存起來，回頭再用這份情緒清單歸納，通常比硬盯著色票更快成形。更多關於品牌色如何挑選的完整流程，可以搭配品牌色彩挑選指南一起看。經營身心靈或瑜珈品牌的話，瑜珈網站的配色與留白實作把這組情緒落成大地色系的具體參數。

選定主要方向，再檢查完整色盤

單色、鄰近或互補關係都可作配色起點，但不必強制只選一個主色或所有顏色都按色環推導。品牌既有資產、多品牌產品與資料視覺化可能需要不同安排，仍須驗證角色與對比。

強調色應服務資訊層級，可依頁面定義主次用途。第二個強調色不一定破壞效果，重點是讀者是否辨識任務與狀態，沒有通用單一色數能保證畫面清楚。

第三步｜用比例紀律建立層級，60-30-10 在網頁上要重寫

60-30-10 可作主次比例的討論工具，並非網頁標準。不同頁面的文字、圖片及背景面積不同，不能假設文字必佔最大面積，也不需精算所有畫面成同一比例。

換個方式想：網站的比例紀律應該用「出現頻率與視覺權重」來算，單純算像素面積往往會誤導判斷。實務上常用一套重新校準過的比例心智模型，把六個角色分成三個量級。

互動與強調色的用量依任務決定，沒有低於 10% 的通用門檻。灰階可幫助檢視部分明暗層級，但按鈕與重要資訊不應一去色就消失；仍需檢查實際對比和非色彩線索。

灰階是輔助檢查，不能代替對比量測

去色可提供明暗層級線索，但不同轉換方式與顯示環境會影響結果，也不是完整的色覺模擬。使用對比工具核對實際前景和背景，並測試互動狀態；不能宣稱灰階一定抓出八成問題。

如果你想進一步理解為什麼明度比色相重要、以及明度在數值上怎麼算，可以回頭看RGB 與 CMYK 色彩模式解析裡面對色彩三屬性（色相、明度、飽和度）的拆解。把明度當成你配色的主變數，色相當副變數，你的層級穩定性會立刻提升一個檔次。

把比例檢查落實成可重複的動作

截圖去色後，可觀察分組與重點是否仍清楚，再回到原畫面量測對比。深色主題不要求文字最暗，亮區也不一定是按鈕；不要用「最暗是文字、最亮可點」作所有頁面的驗收公式。

第四步｜把配色收斂成 design token，團隊與開發才能真正複製

Design token 把可重用的設計值與用途集中管理。改動只會影響實際引用它的元件，仍需處理硬編碼、作用範圍與覆寫，不能保證改一處就涵蓋所有第三方介面。

可分色票層與語意層，例如 blue-600 與 action-primary。命名和層數沒有唯一標準；調整映射後還要核對各狀態與對比，不保證換品牌色時其他設定完全不用改。

WordPress 的主題、編輯器與外掛可能各有色彩設定。可用 CSS custom properties 集中重用值，但各元件需實際引用，並受層疊與繼承影響；只在 :root 宣告不會自動改寫所有外掛。 延伸可參考CSS 入門指南。

深色模式：重新檢查同一組語意角色

深色模式應按背景、文字、互動與狀態重新調整映射，不能只把所有色值反相。飽和度、明度與對比如何調整需看實際組合，不是所有顏色都要降飽和度；同一組語意名稱可以在不同主題下使用不同值。

配色翻車的六個熱區，以及現場救援方法

就算四步驟都走完，網站上線後還是會有一些地方容易出問題。我整理出六個最常在實際專案裡看到、也會在常見網頁設計錯誤裡反覆出現的熱區。我把每一個的成因跟救援方法列出來，讓你遇到時可以直接對照。

1. 次文字：核對適用的文字對比要求，包含表單提示與 placeholder，不只看主標題。
2. 強調色：檢查是否有清楚主次，可以用於裝飾，但不要讓用途混淆。
3. 狀態色：品牌與狀態可共用色號，仍需文字、形狀或其他可辨識線索。
4. 焦點：提供清楚可見的鍵盤焦點，不任意移除必要指示。
5. 圖片上文字：針對實際背景檢查對比，遮罩只是其中一種方法。
6. 深色模式：逐項測試角色、元件狀態與圖片，不假設反相或降飽和就合格。

角色與 Token 可以幫助維護，仍可能出現不合適色值、元件覆寫或新增狀態。每次修正都應補上對應規則與驗證，而非只找是哪個角色越界。

用 WCAG 對比與無障礙當驗收門檻

WCAG 的文字對比要求需區分等級與字體條件：AA 一般文字至少 4.5:1，大型文字至少 3:1；AAA 則分別為 7:1 和 4.5:1。大型文字通常指至少 18pt 一般字或 14pt 粗體，或等效的中日韓字體尺寸；不是所有粗體都可用較低門檻。另有標誌、停用等例外，適用法律與完整符合性需另核對。

對比比是可量測的條件之一，不等於整站可讀性或無障礙已合格。還需檢查文字大小、縮放、焦點、狀態與實際內容。

對比工具可以輔助量測，但漸層、透明層及背景圖片需要檢查實際組合和最不利位置。兩個色號的結果不能涵蓋所有狀態，也不能保證消除多數閱讀問題。 延伸可參考配色工具整理。

手機、環境光及顯示器會影響閱讀感受。先依自己的裝置資料安排實測，再保持適用對比要求；不用未標明時間與範圍的全球流量比例推論每站受眾。 延伸可參考回應式網頁設計。

只靠顏色傳達資訊，是無障礙的紅線

不要只靠顏色傳達必要資訊。錯誤可以附文字與圖示，連結可用底線或其他辨識方式；也需讓輔助技術取得必要名稱與訊息。增加另一線索有助區分，仍不保證所有情境都不會混淆。

沒有從零開始，怎麼把既有網站的配色救回來

前面四步驟預設的是「從零開始蓋一個網站」，但真實世界裡，你更常遇到的是接手一個已經上線、配色早就失控的網站。這時候硬套四步驟會很痛苦，因為你不可能把網站下架重做。我的建議是換一個順序：用「健檢」的角度倒過來走，先盤點、再合併、再歸位，最後才換 token。整個過程可以漸進完成，不需要一次到位。

先盤點代表性頁面、元件與狀態的實際色值。截圖滴管會混入抗鋸齒、影像與透明混色，需搭配樣式或設計檔核對，不能把所有取樣色都當成獨立設計 token。

合併相近顏色前，先核對用途、對比與主題映射。兩色看似相同，仍可能分別服務狀態或對比需求；不應只憑視覺近似就刪除，也沒有固定會壓縮成十幾色的結果。

把候選映射到語意角色，無法歸類時先了解需求，也可能需要新增角色或保留例外。分批遷移並測試對比與狀態，不要只換成最接近的色值。

第四個動作才是「遷移到 token」。這時候你已經有一份乾淨的角色色盤了，接下來照第四步的做法，把每個角色寫成 CSS 變數，然後在每次改版時把硬編碼的色號換成變數。這是一個漸進式工程，可能要花幾個月才會把全站換完，但每換一頁，系統就穩一分。重點是方向要一致，只要每次碰程式碼都朝 token 化移動，累積下來自然會走完。

有一個我會特別踩煞車提醒的陷阱：健檢的過程中，很容易「順手把品牌主色也一起換掉」。請忍住這個衝動。健檢的任務是把失控的顏色收回系統，品牌主色要不要換是另一個層次的決策，應該單獨評估、單獨走流程，不要夾帶在整理工程裡。把這兩件事分清楚，你的健檢才不會越做越亂，也不會在不知不覺中動到品牌識別的根基。這也是為什麼大型網站的配色整理，通常會跟品牌再造專案分開進行的原因。

色相環上的六種幾何，是推導輔色與強調色的公式

色相環可提供單色、鄰近、互補、分裂互補、三元及四元等組合方向。它們不保證和諧、最高對比或特定情緒，選用時還要調整明度與彩度，並檢查實際前景背景；色相相反不等於符合 WCAG 對比。

冷暖色：用在具體品牌與內容脈絡中

紅橙黃常被描述為暖色、藍綠等常被描述為冷色，但感受受色值、鄰近色和文化影響。電商不必主打暖色、金融不必主打冷色，也沒有主色溫必佔七成或禁止五五分的通用規則。

質感從彩度與明度而來，不是色相本身

明度與彩度是調整視覺層級的工具。高飽和不必然廉價，低飽和也不自動高級；依品牌、內容與閱讀條件選擇，再以實際元件檢查。

上線前後的配色檢查清單與行動方案

四步驟走完、熱區排除、對比驗收通過，理論上你的配色系統應該相當穩了。但配色的真正考驗出現在上線之後，真實使用者的反應才是最後的裁判，設計稿裡的完美往往撐不過這一關。所以我會建議你在上線前後各做一次系統性的檢查，不要憑「看起來不錯」就放行。下面是一份可直接套用的檢查清單，你可以在下一個專案照著走。

上線前的設計檢查

• 角色與例外是否有清楚用途，元件是否引用正確值。
• 主次互動與各狀態是否能辨識，不只靠顏色。
• 按字體大小及粗細檢查適用的文字對比，另查必要的非文字對比。
• 灰階只作輔助，仍要核對實際色值與背景。
• 亮暗主題、焦點、錯誤、停用及圖片背景是否測試。

上線後的數據觀察

可觀察 CTA 點擊、表單完成及相關任務資料，但這些不是只由配色決定的指標。若發現問題，同時檢查內容、受眾、位置、對比、操作與量測，不固定先改顏色再改文案。

改前改後比較仍可能受流量、活動或季節影響。需要判斷因果時，應設計適當實驗與指標；儀錶板用來追蹤，不會自動證明配色造成成效差異。 延伸可參考資料視覺化儀錶板。

下一步：四步驟行動方案

講了一整套觀念，最後給你一個能今天就動手的版本。不管你是要幫自己的網站重做配色，還是要幫客戶規劃，都可以照著這個順序走。

1. 盤點代表性頁面、元件、狀態及樣式來源。
2. 依用途建立角色，記錄必要例外，別只按色號去重。
3. 以品牌方向提出候選，測試完整色盤與對比，不強制單一色相。
4. 用語意 token 串接實作，確認引用、覆寫、亮暗主題與回歸測試。

清楚的角色、命名與驗證能讓團隊更容易維護配色。結果仍需由實際閱讀、操作和品牌需求判斷，不能用固定六角色或一個主色保證質感。

這套流程提供可追蹤的決策方法，不能取代設計判斷或保證不同人都做出同等成果。新增內容和元件後，持續更新規則並測試。

配色不是終點，它是整個網站體驗的底色。當顏色這套地基打穩了，你後續要疊加字型、版面、互動效果，都會事半功倍；當地基是歪的，上面蓋再多裝飾都會搖搖晃晃。如果你打算把這件事放進一整套更大的網頁設計流程裡，網頁設計完整指南把配色、版面、字型、流程串在一起，可以當作你下一步的地圖。顏色先講清楚，網站才會真正立起來。