網頁配色工具推薦：21 個色票、預覽與對比檢查工具

依工作情境挑配色工具，再回到實際版面驗證

其實不少人都遇過這種狀況：產品的主視覺、Logo、文案都做好了，只剩「顏色」卡住。你打開色票選擇器，游標在色環上滑了半個小時，挑出來的組合怎麼看都像簡報範本，或者是上一個專案再用一次。顏色是最後一哩路，卻常常吃掉最多的時間。

配色工具適合用來比較候選、延伸色階與檢查數值。先說清楚你要找靈感、抽取照片色彩，還是修正對比，再選工具，會比一直換產生器更有方向。

下面按六種工作情境整理 21 個配色與檢查工具，包含線上服務、開源程式與桌面軟體。免費範圍、帳號及匯出限制各不相同；先用基本功能試工作流程，再決定是否需要付費。

先抓重點：已有主色時，可用 Coolors 或 UI Colors 比較搭配；找方向可看 Color Hunt 或 Khroma；文字對比可用 WebAIM 檢查。工具給的是色票，不是色彩計畫，仍要把顏色放進文字、按鈕與背景，核對不同狀態的可讀性。

我怎麼把 21 個配色工具分成 6 種工作情境

這份清單按工作情境分類：你可能已有品牌主色、只有一張參考照片，或已經完成畫面卻發現文字難讀。同一工具可以跨類使用，不必一次建立完整工具組。

先從目前的問題挑一類工具，完成一個可比較的候選，再決定是否需要下一種功能。

情境一／你已經有主色，要長出整套色階

品牌已有主色時，可以從同一色相延伸出輔助色、背景色、邊框色與不同明暗階。若完全手動調整明度與彩度，容易出現階距不一致；可先用Logo 與網站配色方法建立基準，再用色票工具產生候選值並逐一檢查對比。

這一類工具可從主色產生搭配或深淺候選。色票還不是完整系統，背景、文字、邊框與互動狀態的用途需要另外定義。

• Coolors（coolors.co）：可以鎖定已選顏色，再產生其他搭配；提供多種匯出選項。基本功能與 Pro 有差異，儲存、進階匯出及對比工具要以當下方案為準。
• UI Colors（uicolors.app）：可生成 Tailwind 風格的色階並預覽元件。適合建立深淺候選；階數與命名不代表文字對比已合格，進階功能也有 Pro 方案。
• OKLCH Color Picker（oklch.com）：可用明度、彩度與色相調整顏色，並查看 sRGB、Display P3 的色域與後備色。適合需要理解深淺及色域差異的設計或前端工作。
• ColorSpace（mycolor.space）：輸入主色後產生多種配色，另有雙色與三色漸層工具。可用來探索方向，不限於原先描述的三組固定方案。
• Paletton（paletton.com）：以 RYB 色相環及單色、相鄰色、三色或四色關係產生組合。色相環 能幫助比較關係，和諧與可讀性仍要在實際版面判斷。

情境二／腦袋一片空白，從關鍵字或隨機生成找靈感

有時候你卡住，其實是因為還沒有方向，跟配色能力無關。客戶給你的需求只有三個字：「沉穩、溫暖、現代」。這時候叫你打開色環自己想，等於要你在空白的畫布上畫出傑作。你需要的不是工具，是起手式。

這一類工具的特色是「你給它一點點線索，它給你一堆可能性」，目的是打破空白頁焦慮：

• Color Hunt（colorhunt.co）：使用者提交、團隊策展的配色庫，可以按色彩與主題找參考。策展不等於每一組都通過無障礙或商業成效測試。
• Khroma（khroma.co）：依使用者選取的喜好色彩，在瀏覽器內建立個人化推薦，並提供搜尋與收藏。偏好推薦不能代替品牌與可讀性判斷。
• Colormind（colormind.io）：以深度學習產生配色，可鎖定部分顏色再試搭配。它能學習照片等資料的風格，但產出的組合仍要指定用途及檢查對比。
• Picular（picular.co）：以文字搜尋顏色。可把「海洋」或「森林」等詞當作探索入口；搜尋結果是視覺參考，不是詞語與顏色之間的客觀定義。

情境三／從一張照片、一個畫面抽出色票

有時候點燃你靈感的是一張照片。客戶傳來一張他喜歡的產品照、一座山、一杯咖啡，說「我要這種感覺」。這時候你要做的，是把這張圖裡的顏色精準地抽出來，變成可以重複使用的色票。

這個情境的工具，邏輯都一樣：上傳圖片，演算法幫你找出主色。但抽出來的精細度和呈現方式有差：

• Adobe Color（color.adobe.com）：提供影像擷取色票、漸層、色輪與對比工具，可和 Creative Cloud 資產庫銜接。儲存及在 Adobe Express 自動套用的帳號、方案要求不同，不能把所有流程都視為免費免登入。
• Canva 配色產生器：上傳影像後擷取色票，可作為照片用色的初步參考，再到 Canva 製作版面。不要預設所有工具都輸出相同數量的顏色。
• Color Thief（lokeshdhakar.com/projects/color-thief）：提供示範頁與 MIT 授權的抽色程式，可取得圖片主色或色票。適合開發者整合到批次流程；仍須處理來源圖片權利與程式依賴。

情境四／檢查文字與介面的色彩對比

這是絕大多數配色文章最輕描淡寫、卻最致命的一關。你配的顏色好看是一回事，讀者看不看得清楚是另一回事。深藍底配深灰字、白底配淺黃字，這些組合在設計師的螢幕上可能「很有氣氛」，但對一般讀者來說就是糊成一團。

不同螢幕、亮度與環境光會影響閱讀，因此不能只看設計師自己的螢幕。全球流量統計 可供市場背景參考；具體專案仍應用自己的裝置資料選測試情境。

以 WCAG 2.2 AA 為例，一般文字通常需達 4.5:1，符合定義的大字為 3:1。大字通常指至少 18pt，或至少 14pt 粗體；Logo、純裝飾與停用元件等有特定例外。工具計算的是指定色彩組合，不會替整頁完成無障礙驗證。

• WebAIM Contrast Checker：輸入前景與背景色，即可查看文字與非文字對比的計算結果。應使用實際頁面的色彩，並考慮透明度、圖片背景與互動狀態。
• Leonardo（leonardocolor.io）：Adobe 的開源工具，可依目標對比生成色階並匯出設計資源。數值依選定背景與設定計算，套用到其他背景後需要重新驗證。
• Colour Contrast Analyser（CCA）：Vispero／TPGi 提供的免費桌面檢查工具，支援 Windows 與 Mac，可輸入色值或從畫面取色，並複製檢查結果。

清楚的文字和控制項是使用者辨識下一步的基礎。要評估 按鈕和行動呼籲的點擊率，還得看文案、位置、需求與實際任務；對比通過不等於點擊率一定提高。

情境五／看別人怎麼把配色「用」出來

配色最詭異的地方在於：同一組色票，放在色票卡上看起來很普通，但用在真正完整的版面上卻可能質感爆表；反過來也有。原因是顏色從來不是單獨存在的，它的效果取決於它佔多大面積、出現在哪些元件、旁邊襯的是什麼。所以光看色票是不夠的，你得看「配色被實際用出來」的樣子。

這一類工具的價值，就是把配色放進真實的版面情境裡給你看：

• Happy Hues（happyhues.co）：把策展配色套進示範網站，能看到背景、標題、按鈕與插圖的不同角色。適合學習如何把色票分配到版面。
• Realtime Colors（realtimecolors.com）：可輸入自己的色票，在模擬版面預覽，並匯出 CSS 等格式。它展示的是示範畫面，定案前仍要回到自己的內容與元件。
• BrandColors（brandcolors.net）：由第三方整理品牌色碼，可作為查找線索；正式使用時應回到品牌官方規範確認版本與權利。單靠 HEX 清單看不出主色比例與完整用法，可搭配 設計靈感網站 觀察實際畫面。

情境六／取色、存色、跨軟體搬運色票

色票產生後，還需要保存來源、命名並交給設計與開發使用。取色工具適合研究現有畫面，但取到的像素可能混有透明度或抗鋸齒效果，不一定是原始 CSS 色值。

• ColorZilla（colorzilla.com）：提供瀏覽器取色、色彩調整與頁面色票分析。它分析的是當前頁面，不是自動掃描整個網站所有網址。
• Eagle：可用資料夾、標籤與色彩搜尋整理參考素材。多專案需要保存圖像與用色記錄時，可 用 Eagle 來統一管理；它是桌面素材管理軟體，不等同於色票產生器。
• ColorHexa（colorhexa.com）：提供色值轉換、色彩資訊與配色關係。畫面上的轉換值可供研究，但不能把沒有指定印刷條件的 CMYK 值當成可直接交印的校色結果。

21 個工具總覽：用途、入口與採用前要確認的事

以下列出官方入口與主要用途。方案會調整，表格不把「有免費功能」等同於「所有功能免費」；實際採用前，請檢查匯出格式、帳號及授權是否符合工作流程。

這張表不用背，把它當查詢表就好。你真正需要記住的只有一件事：先認清自己現在在哪一種情境，再來這張表找工具。順序反了，你會陷入「工具很多但不知道用哪個」的迷霧。

一個專案從零配色的完整流程

下面是一個可調整的工作順序。它把找方向、實際套用與驗證分開，方便在發現問題時知道要回到哪一步。

第一步：釐清品牌與使用情境。先記錄想呈現的語氣、讀者要完成的任務，以及既有品牌限制。照片、關鍵字或策展色票都能作為探索入口，不必把「溫暖」和「專業」硬分成不同工具。可搭配 品牌色的挑選邏輯 整理條件。

第二步：找兩到三組參考組合，不要只看一組。我會去 Color Hunt、Khroma 各抓幾組，也會從 Brand Colors 挑一兩個我欣賞的品牌配色當對照。重點是「比較」，單看一組你會覺得「好像可以」，但放在一起比，你才看得出哪一組的調性真的對。這個階段我不去管細節，只看「整體感覺對不對」。

第三步：決定主色，再建立需要的搭配。用 Coolors 試輔助色，或用 UI Colors 建立深淺色階。接著指定背景、文字、按鈕與狀態的用途；色階的數量與編號只是管理方式，不能直接代表可用性。

第四步：在版面預覽。Realtime Colors 能預覽自己的色票；Happy Hues 適合觀察現成組合的用途。最後把候選套到自己的文字、圖片與元件上，查看大面積背景、重點和邊界是否清楚。

第五步：檢查實際組合與狀態。用 WebAIM 計算文字及背景的對比，並依適用條件檢查控制項。Leonardo 可減少產生候選的手動調色，但透明度、漸層、焦點與不同背景仍須在實際頁面確認。對比只涵蓋無障礙要求的一部分。

第六步：匯出成設計權杖，寫進 Figma 或 CSS 變數。配色定案之後，立刻把它們轉成可重複使用的設計權杖（design token）。這一步往下展開，就是稍後〈把色票落地：CSS、Figma、設計系統怎麼接〉一節的主題。

這套流程的產出應包含色值、角色、實際畫面及檢查記錄。後續換文案或新增元件時，就能回到同一組依據調整，而不是只留下沒有用途說明的色票。

使用配色工具時，容易漏掉的五件事

工具用對了，不代表配色就會好。我看過太多人工具都用對了，但輸出來的網站還是「怪」。問題通常出在這幾個陷阱，它們跟工具有關，但更跟你「怎麼用工具」有關。

一、顏色有沒有明確角色？工具產出五個色票，不代表每個都要出現在頁面上。先安排背景、文字、強調與狀態，再決定需要哪些顏色；不必把主色數量或面積比例當成所有網站通用的標準。

二、實際使用面積。同一顏色放在小按鈕或整片背景，效果可能不同。用真實內容比較，而不是只看色票卡；深色不一定壓迫，亮色也不一定刺眼，要一起看亮度、彩度與周邊元素。

三、文字與背景對比。低對比可能妨礙閱讀，應依適用標準改善。不要把訪客離開、停留時間或配色變化直接解讀成固定 SEO 排名效果；可連同 其他網頁設計問題 一起檢查。

四、品牌情境與讀者理解。金融、醫療或法律網站沒有只能使用某幾種色彩的規則。用競品研究與實際讀者回饋測試語氣，別直接推定粉嫩色就會破壞信任。色彩心理學 的聯想可以提出假設，不能代替驗證。

五、裝置與色域差異。螢幕設定、亮度與顯示色域都會影響畫面。若使用超出 sRGB 的色彩，應檢查不支援廣色域時的呈現與後備色，並選擇符合讀者情境的裝置測試。

工具是捷徑，色彩觀念才是地圖

工具能降低試配的成本。理解色相、明度、彩度與對比，則有助於判斷候選為何適合或不適合當前畫面。

你可以把配色工具想成導航軟體。導航很方便，它會幫你算出最快的路、避開塞車。但如果你的目的地設錯了，再聰明的導航也只是帶你更快去到一個錯誤的地方。色彩觀念就是那張地圖：你得先知道互補色為什麼會互相襯託、色相環上的距離代表什麼、明度彩度怎麼影響一個顏色的份量，工具才能真正幫到你。

例如一組配色含相鄰色和互補色，可以試著調整其中一色的彩度與面積，觀察哪個更適合當重點。色彩學 提供比較語彙，但色相關係本身不會保證和諧或可讀。

所以我的建議是：工具先用起來沒關係，它們能幫你跨過最初的門檻。但同時，花點時間把基礎的色彩觀念補起來。色相環、RGB 跟 CMYK 的差別、暖色冷色的心理效應、無障礙對比的標準，這些觀念懂了之後，你回頭再看這 21 個工具，會突然覺得它們每一個都在對你說不同的語言，而你不只能聽懂，還能回話。

把色票落地：CSS、Figma、設計系統怎麼接

配色定案了、也過了對比檢查，然後呢？很多人到這裡就斷掉了，色票停在截圖或記事本裡，下次要用又得重找。真正成熟的作法，是把色票轉成設計權杖（design token），讓它們能在設計軟體和程式碼之間一致地流動。

設計權杖是以名稱表示設計決策的資料。例如用 color-surface 表示背景角色，再引用基礎色值。只有設計稿與程式碼都接上相同來源、元件也實際引用它時，修改才會依設定傳遞；命名本身不會自動同步。

在實作上，常見的落地路徑有三層：

• CSS 自訂屬性：例如在 :root 定義 --color-primary，再讓元件用 var() 引用。原先寫死色碼的地方需要先改接變數。
• Figma Variables 與 Styles：在 Figma 定義色彩，並套用到元件。相同命名有助溝通，但設計與程式的同步仍需明確流程。
• 共用資料來源：團隊可集中維護 JSON 或 token 工具，再產出各平台需要的格式。Leonardo 可提供色彩與 token 輸出，導入後仍要驗證實際用途與對比。

清楚的角色、來源與使用範例，能幫下一位維護者理解配色。這也可以納入 品牌識別系統，並在新增元件或改主題時更新。

命名可以分兩層：基礎色票用 blue-500 這類具體名稱，語意角色用 color-primary 或 color-text-muted 引用它。改品牌色時主要調整角色對應；不是所有顏色名稱都應禁止。和 版面設計 的元件規範一起記錄，交接會更清楚。

配色工具常見問題

這 21 個工具裡，有沒有「一定要裝」的？

沒有一定要使用的工具。可先各選一種產生候選、檢查對比與版面預覽工具，例如 Coolors、WebAIM 與 Happy Hues。若工作需要收藏或進階匯出，再確認帳號與方案，不必一次採用整份清單。

配色工具產生的色票，可以直接用在商業專案嗎？

請查看實際工具條款及素材權利，不要把「免費使用工具」視為可以複製全部網站內容。例如 Realtime Colors 允許商用生成的顏色，但其網站原始碼與素材另有授權。若參考知名品牌的整體識別，還需避免造成混淆；色票也不會自動授予相關圖像或字型的使用權。

我是完全沒有設計背景的人，該從哪一個情境開始？

可以先在 Happy Hues 觀察同一版面換色後的差異，再用自己的內容做比較。練習與理論可以並行；UI/UX 免費學習資源 和 網頁設計自學路徑 也能幫你把配色放回整體設計流程。

AI 配色工具（像 Colormind、Khroma）可信嗎？

把 AI 配色當成候選產生器。Khroma 可依個人偏好推薦，Colormind 可生成搭配，但兩者都不能替你確認品牌需求、可讀性與完整頁面的使用效果。

手機上配色會有差嗎？需要特別調嗎？

可能會有差異。螢幕亮度、色域與環境光都值得檢查；依實際讀者的裝置情境選測試，而不是先認定手機或桌機一定比較重要。

免費配色工具跟付費版到底差在哪？有必要升級嗎？

付費是否值得，要看具體缺少的功能。例如 Coolors 的進階匯出與收藏、UI Colors 的進階功能各有方案；Adobe Express 的色票套用也有方案條件。先確認功能是否能解決目前問題，再比較費用，不以「免費已滿足八成需求」這類無法通用的比例判斷。

從一組實際文字與背景開始

不必先把 21 個工具都試一輪。選一個正在使用的頁面，完成下面幾個檢查，就能留下可用的配色記錄。

1. 檢查對比。把實際文字與背景色輸入 WebAIM，確認適用門檻與不同狀態。
2. 比較候選。用產生器或策展色票挑幾組方向，並記下用途。
3. 套入真實畫面。比較背景面積、文字、圖片與按鈕，不能只用工具示範頁定案。
4. 保存來源。記錄色值、語意角色、方案與素材使用權，再接到 CSS 或 Figma。
5. 補足觀念。對不理解的色相、色域或對比問題，回到相應說明再調整。

配色需要反覆比較、套用與修正。工具可以加快探索，檢查記錄則能讓下一次修改有依據。

如果你正在為品牌網站的整體視覺苦惱，配色只是其中一環。版面結構、字體、圖像、轉換動線，每一個都會回頭影響配色的判斷，單獨看任何一項都會見樹不見林。我們在 Whoops 協助過不少品牌把這些環節串起來，從零打造一套能被讀者記住、也能被搜尋引擎讀懂的網站。卡關的時候歡迎來聊聊，Whoops 可以陪你把這些環節逐一拆解。