多數人以為網站配色亂糟糟，是顏色選得不夠好看，於是急著換色票、換主色，結果過一陣子又開始亂。真正該問的其實不是哪個顏色好看，而是這個網站上的每一種顏色，有沒有各自負責一件事。
同一種藍色，用在標題只是裝飾，用在按鈕卻代表這裡可以點，兩種用途不一樣，就不該用同一套眼光去挑。這正是網頁配色設計最容易被忽略的一塊，顏色不是選出來的，是分工分出來的。連 GOV.UK Design System 這種公部門的設計系統，顏色都是照角色分工在管理，每一種顏色對應一種明確用途，不是誰覺得好看就放上去。
這篇要拆的，就是這套配色邏輯本身，不是配色好不好看的美感技巧。接下來就先拆這個最容易搞混的地方，配色亂，通常不是眼光的問題。
網站配色亂，不是顏色選錯，是少了分工的邏輯
挑顏色問的是這個顏色好不好看、搭不搭；配色邏輯問的是這個顏色在畫面上負責什麼工作。這兩個問題聽起來很像，答案卻完全不同。
一個網站可能同時決定「這個藍色很好看」跟「這個藍色代表可以點擊」，前者是美感判斷，後者是功能判斷。如果只顧美感，顏色會被拿去做各種不相干的事，同一個藍色這頁用在按鈕、那頁用在裝飾線條，讀者看久了反而分不清楚哪個藍色代表可以點、哪個只是配色。
GOV.UK Design System 的做法反過來，不直接複製色碼貼到畫面上，而是透過一支叫 govuk-functional-colour 的函式去呼叫顏色，每次呼叫都指名要哪個角色的顏色，像是連結色、錯誤提示色、按鈕色。這樣做的好處是，日後整個色板更新，所有呼叫過這個角色的地方會自動套用新顏色，不用一頁一頁去改。角色優先於顏色本身，是這整套邏輯的起點。
多數「配色亂糟糟」的網站，問題往往不是顏色不好看，而是同一個顏色在不同頁面被賦予不同工作，或者同一種工作在不同頁面用了不同顏色。Nielsen Norman Group 在一篇談色彩設計的文章裡就指出，同一種用途的顏色要在整個介面裡保持一致，這是讓使用者理解顏色含義的關鍵。讀者靠的不是記住色碼，而是靠這個顏色出現在這裡通常代表什麼的直覺，一旦這個直覺被打亂，畫面就會顯得雜亂。
為什麼配色要照系統做，不能想到哪裡加到哪裡？
只是知道問題出在哪裡還不夠。網站不是做完就一次定型的東西，會持續加新頁面、加新功能，也會換人維護。如果每次新增畫面都是憑感覺挑一個順眼的顏色，顏色只會越疊越多，同樣是強調用途，卻在好幾個地方各用了一種顏色。
U.S. Web Design System 在建置指南裡提出一個順序叫「先實用，後情感」，先解決功能上的需求，例如這個按鈕該不該跳出來、這個提示該不該引起注意，把這些功能需求釐清之後，才輪到用顏色去傳達品牌情感或氛圍。他們也建議設計初期先用黑白版本測試整體的排版與視覺層次，確認資訊的輕重順序站得住腳，再把顏色加進去，原因是顏色一下子加進來，很容易蓋過原本該傳達的訊息，讓人分不清楚畫面真正的重點在哪裡。
有邏輯的做法反過來，先把這個網站需要幾種工作列清楚，背景、文字、連結、行動呼籲、狀態提示各是一種工作，再決定每種工作對應哪個顏色。之後要加新頁面或新功能，先查這個工作是不是已經有顏色負責了，而不是直接挑一個新的上去。
沒有這套邏輯的網站，通常會出現兩個具體徵兆。第一，同一種用途在不同頁面用了不同顏色，例如首頁的「立即諮詢」按鈕是橘色，內頁的「送出表單」按鈕卻換成綠色，讀者得重新學一次這個顏色代表可以點。第二，讀者分不出某段文字是可以點的連結，還是純粹的裝飾強調，因為兩者用了同一種顏色或同一種樣式。這兩個徵兆背後，其實都是同一件事，顏色的角色沒有先定義清楚。
網站配色的角色，先分工再選顏色
把一個網站需要的顏色攤開來看，其實可以拆成四種角色：背景色、文字與連結色、行動色、語意色（semantic color）。每一種角色的工作不同，判斷標準也不一樣，讀完可以對照自己的網站，看看這四個角色現在各有沒有專屬的顏色。GOV.UK Design System 完整列出的功能色分類，像是文字、連結、邊框、背景、焦點狀態、錯誤狀態、成功狀態、品牌色，正是這四種角色在實務上的具體拆法。
角色一：背景色，穩住整個畫面的安定感
背景色是面積最大、最先決定整體氛圍的角色。它通常選中性色，工作是把整個畫面撐起來，不搶戲，不是要多好看。決定這個角色的顏色時，順序應該先確定它的工作，再輪到挑實際色號，這正是 U.S. Web Design System 那句「實用優先於情感」在背景色上的具體體現。
背景色也牽動版面上其他顏色能不能被看清楚，例如一個對比夠強的行動按鈕，放在雜色背景上會被稀釋掉一部分效果。這部分跟顏色的面積比例分配關係較密切，原則上背景色先站穩安定的角色，其他顏色才有餘裕輪流跳出來。
角色二：文字色與連結色，讓讀者分得出「能點」跟「純內容」
同樣是文字，內文、標題、連結卻是三種不同的工作。內文負責傳達內容本身，標題負責標示層次，連結則必須讓人一眼認出這裡可以點，這是它的功能，不是配色偏好。
Nielsen Norman Group 在一篇專門談連結視覺化的文章裡建議，連結文字最好同時用顏色跟底線標示，可點擊的訊號才會更明確。同一篇文章也指出，已讀跟未讀的連結顏色要有系統性的差異，未讀連結顏色更鮮明飽和，已讀連結則呈現用過的黯淡感，而且兩者最好落在同一個色系裡的不同深淺，不要換成完全不相干的顏色。這篇文章原文寫於 2004 年，2026 年的編按補充，現在不少網站已經不加底線，但前提是要用其他方式補回可點擊的訊號，例如滑鼠移過去或鍵盤跳過去時的顏色變化，這正好呼應 W3C 訂的 WCAG 2.1「使用顏色」準則，顏色不能是分辨連結的唯一依據。
在所有可以拿來當連結色的顏色裡，藍色被認為是傳遞可點擊訊號最強的一種，其他顏色雖然也能用，辨識度普遍比不上藍色。也因為這個訊號太強，非連結的文字最好避免用藍色，不然讀者會誤以為那段文字可以點，點下去卻沒有反應。
GOV.UK Design System 把連結這個角色拆得更細，分成預設、滑過、已讀、按下四種獨立的顏色，分別對應 link、link-hover、link-visited、link-active。連結不是只有一種顏色，而是一整組隨著使用者行為變化的顏色，這個概念會在後面滑過、按下、鎖定焦點那一節再展開。
角色三：行動色，按鈕的工作是被看見，不是好看
行動呼籲的顏色，工作就是要被注意到，判斷標準不是喜不喜歡這個顏色，而是它跟背景之間夠不夠跳出來。U.S. Web Design System 談色彩設計時特別強調，要先專注在功能性的需求上，行動色正是最典型的例子，它存在的理由是讓使用者一眼找到接下來該做什麼，不是替畫面增添氣氛。
這個角色理論上全站只留一種，或極少數幾種變化。如果每個頁面都用不同顏色喊「點我」，等於每個都在搶注意力，結果反而等於沒有重點，讀者看到一堆同樣顯眼的顏色，反而不知道該先點哪一個。
行動色也不能拿來跟語意色混用。按鈕的工作是行動，是引導使用者往下一步走；語意色的工作是傳達訊息，是告訴使用者現在發生了什麼事。如果把警示訊息用的紅色也拿來當按鈕色，使用者可能會把一個正常的操作按鈕誤讀成錯誤警告，兩種工作混在一起，反而讓畫面更難懂。
角色四：語意色，成功、錯誤、警告各自只能對一種顏色負責
語意色負責傳達意思，成功、錯誤、警告、提示各自代表一種狀態。這批顏色一旦定了意思，全站就不能再挪去做別的用途，不然讀者會失去判讀依據，例如原本綠色代表操作成功，某個頁面卻拿綠色去當裝飾，讀者掃過去可能會誤以為那裡發生了什麼成功的事。GOV.UK Design System 裡的錯誤色跟成功色就是各自獨立、只對應一種狀態的顏色，不會挪作他用。
同時要留意，不能只靠顏色傳達意思。美國國家衛生研究院的資料顯示，約 8% 的成年男性、0.5% 的成年女性有色弱，其中紅綠色弱最常見，這個比例換算下來，一個網站的訪客裡幾乎必然有人分不清楚紅色的錯誤提示跟綠色的成功提示之間的差異。重要的狀態訊息最好搭配文字或圖示一起呈現，不能只靠換一個顏色就算數。
同一個顏色角色，滑過、按下、鎖定焦點都要各自變化
定義好四種角色只是第一步，顏色角色不是只有預設一種樣子。讀者滑過去（hover）、點下去（active）、暫時不能用（disabled）、用鍵盤跳到這裡（focus），每一種狀態都該有對應的顏色變化，而且這套變化邏輯要在全站保持一致，不能這個按鈕滑過去顏色變深、那個按鈕滑過去卻變亮。
GOV.UK Design System 對這幾種狀態各自配了獨立的顏色，連結色分成預設、滑過、已讀、按下，焦點狀態則另外配了一個亮黃色，而且明確註明這個顏色只用來標示目前的焦點所在，不會挪去做其他用途。
焦點狀態格外重要，因為它是靠鍵盤操作（不是滑鼠）的讀者，唯一能確認自己目前停在畫面哪個位置的線索。如果焦點的顏色變化太不明顯，或者跟其他狀態共用同一種顏色，鍵盤使用者很容易按著 Tab 鍵一路跳，卻完全看不出焦點停在畫面哪裡。W3C 對焦點外觀訂出的規範要求，同一個位置在聚焦前後的顏色，至少要有 3:1 的對比變化，而且鼓勵設計得比這個最低標準更明顯。這也是為什麼焦點狀態通常會獨立配一種顏色，不跟滑過、按下等其他狀態共用。
深色模式不只是把顏色反過來，要幫每個角色重新分配一次
顏色的角色與狀態訂清楚之後，還有一個常被誤解的情境，就是深色模式常被誤會成把網站顏色反相，亮的地方變暗、暗的地方變亮，一鍵切換就好。實際上背景色、文字色、行動色、語意色這幾個角色，都得在深色版本裡重新指定一次數值，不能只是把淺色版本的色碼倒過來用。原因很直接，一個在淺色背景上夠跳的顏色，直接套到深色背景可能會太刺眼，或者反而因為對比不夠而看不清楚。
這種自動切換，靠的是瀏覽器讀取使用者作業系統或瀏覽器本身的深淺色偏好設定。根據 MDN 的紀錄，這項技術從 2020 年 1 月起就已經在主流瀏覽器裡廣泛支援，不是什麼新鮮功能。
深色模式也不是做了就一定加分。Nielsen Norman Group 回顧多篇學術研究後的結論是，視力正常的讀者在多數情況下，淺色模式的閱讀表現其實比深色模式更好，字級越小，這個差距越明顯。他們的建議是把深色模式當成使用者自己選的選項，而不是預設值，尤其是內容量大、讀者常回訪的網站，例如電子書閱讀器、雜誌、新聞類網站，更該把切換的主控權交給讀者自己，不是替所有人決定該用哪一種。
網站越做越大，這套配色邏輯要怎麼守住？
配色系統會亂，通常不是一開始沒做好，而是後面加東西的時候，沒有人回頭查。專案剛起步時，角色分工通常還算清楚，問題出在半年後要加一個新功能，負責的人手上沒有那份對照表，只好憑印象或憑喜好，自己挑一個順眼的顏色上去。
比較穩妥的做法，是把已經定案的角色顏色整理成一份簡單的對照表，哪個角色對應哪個顏色一目瞭然。之後每次要為新頁面或新功能挑顏色，先翻這份表確認有沒有現成的角色可以用，真的沒有才新增，而不是看哪個顏色順眼就先放上去再說。U.S. Web Design System 把這套分層概念做得更細，系統色板（system tokens）是最底層完整的顏色庫，共有數十種色系可選；主題色板（theme tokens）則是依角色篩出的子集，直接對應到專案實際要用、套進畫面的品牌與角色顏色，兩層要彼此對應，不能憑空跳出一個新顏色。GOV.UK Design System 的做法也呼應這個邏輯，透過函式取用顏色而不是直接複製色碼，色板更新時，所有呼叫過這個角色的地方都會自動套用最新版本，不用一頁一頁手動改。
跟設計師或工程師溝通調整需求時，也值得改用角色去描述，而不是直接講顏色本身。「連結色要更明顯」會被理解成整個網站的連結都要調整，「這裡改藍一點」卻只會改到眼前這一個頁面，兩種說法背後的影響範圍完全不一樣。守住這套配色邏輯，靠的不是記性好，而是有一份看得到的對照表，加上一套大家都聽得懂的角色語言。
網站配色會亂，通常不是眼光出了問題，而是少了一套讓每個顏色各自有工作、且全站說話算話的邏輯。顏色一旦有了明確的角色，好不好看反而變成比較次要的問題，因為讀者真正在意的是這個顏色能不能被信任，看到藍色的字就知道可以點，看到紅色的提示就知道出了狀況。
下次想調整網站的顏色，與其急著換色票，不如先問問這個顏色現在在做什麼工作，換了之後，其他用同一份工作的顏色要不要一起換。想清楚這兩件事，配色才會越用越穩，不會過一陣子又亂回去。