網頁配色工具推薦：21 個配色網站

配色工具不是萬能的，但少了它你會一直在原地打轉

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

我自己也是過來人。配色這件事，天分真的有差，但絕大多數人卡關，不是因為沒有天分，而是因為用錯了方法。硬要在腦袋裡把互補色、色階、對比全部算出來，就像不拿計算機卻要心算工程造價，當然會崩潰。配色工具就是那台計算機：它不會替你做決定，但它把選項攤開來，讓你把腦力花在「判斷」而不是「湊數」。

這篇我把網路上真正能用、而且是免費或免費夠用的 21 個配色工具整理出來。但我不想只給你一張清單，那樣太偷懶。我會先把這些工具依照「你現在到底卡在哪一種情境」拆成六大類，再給你一張總覽表，最後把一個真實專案從零到有色的流程走一遍。看完你會知道的不只是「有哪些工具」，而是「我這個當下該開哪一個」。

三分鐘重點：配色工具的核心價值是「加速試錯」，不是「取代你的判斷」。如果你已經有主色，去 Coolors 或 UI Colors 長色階；如果你完全沒靈感，去 Color Hunt 或 Khroma 找方向；如果你要過無障礙對比，WebAIM 是底線，Leonardo 是進階。記得一件事：工具給的是色票，不是色彩計畫。色票要不要用、用在哪些元件、彼此怎麼搭配，還是得回到你對色彩的基本理解。

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

大多數的配色工具清單文，都是「一個一個工具介紹」，看完你還是不知道什麼時候該用哪一個。問題出在：工具的分類不該照功能，而該照你的「卡點」。你現在到底是沒有主色、有主色但不會延伸、還是顏色都挑好了但對比不過？這三種狀態需要的工具完全不一樣。

所以我用「情境」來分類。下面六大情境，幾乎涵蓋了所有人在配色過程中會碰到的關卡。你對號入座，找到自己現在的狀態，再去挑對應的工具，效率會比從頭看到尾高太多。

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

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

這個情境要的是「以一個顏色為種子，自動衍生一個可用的色彩系統」。這幾個工具都在做這件事，但衍生邏輯不同：

• Coolors（coolors.co）：我心裡的第一名。輸入你的主色 hex，鎖定它，按空白鍵就會隨機生成其他顏色湊成一組。你可以鎖定多個顏色、調整色相排列、直接匯出 PNG、SVG、甚至 CSS 變數。它的殺手鐧是「視覺化鎖定」，你把確定的顏色鎖住，剩下的讓它去試，這完全符合真實配色的工作方式。
• UI Colors（uicolors.app）：丟一個 hex 給它，它直接吐出 Tailwind 風格的 50 到 950 完整色階。如果你做的是前端、用的是 Tailwind 或 CSS 變數，這個工具幾乎可以省掉你半天的調色工作。衍生的色階在視覺明度上相當一致，這是手動很難做到的事。
• 0to255（0to255.com）：更單純，你給它一個顏色，它列出從最暗到最亮的一整排階梯，方便你挑選 hover、active、disabled 狀態要用的深淺。介面老派，但用途非常明確。
• ColorSpace（mycolor.space）：輸入一個顏色，它給你「混色」「漸層」「對比」三組方案。適合在你需要快速看到「這個主色還能配什麼」的時候當靈感板。
• Paletton（paletton.com）：這是老牌的色彩理論工具。你選一個主色和配色法（單色、鄰近、三角、互補），它依照色相環的關係幫你產出理論上和諧的組合。如果你想要的是有色彩學依據的和諧組合，而非隨機湊出來的靈感，Paletton 比 Coolors 更對你的胃口。

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

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

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

• Color Hunt（colorhunt.co）：社群策展的配色庫，每天更新。你可以照「熱門」「最新」「特定色系」篩選，每一組都是四個顏色。它最大的價值是每一組都是別人已經驗證過能用的組合，不是演算法憑空湊出來的，所以拿來當起點特別安全。
• Khroma（khroma.co）：第一次進去它會請你挑幾十個喜歡的顏色，然後用機器學習訓練出你的「色彩偏好」，之後無限量餵給你它覺得你會喜歡的組合。它的邏輯很聰明，先花力氣搞懂你這個人的品味，再給你會喜歡的組合。用久了你會發現它推薦的越來越準。
• Colormind（colormind.io）：AI 配色產生器，可以指定「我要幾個顏色」，也能上傳一張照片讓它依據照片的色調生成組合。它的強項是「懂得留白」，產出的組合通常會包含中性色，不會五顏六色打架。
• Picular（picular.co）：色彩搜尋引擎。你輸入一個關鍵字（例如「海洋」「秋天」「工業風」），它去抓網路上相關圖片的主色，回傳給你一整排色票。當客戶用形容詞描述品牌個性時，Picular 是把「形容詞」翻譯成「顏色」最快的橋樑。

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

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

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

• Adobe Color 的「擷取自影像」功能（color.adobe.com）：業界標準。你上傳一張圖，它幫你抓出最多十個顏色，還能切換「色彩繽紛」「明亮」「暗沉」「柔和」等不同的情緒篩選模式。最棒的是它會直接把抓出來的色票存進你的 Adobe 資產庫，跨軟體都能用。如果你工作流程裡有 Photoshop 或 Illustrator，這個無縫接軌的優勢是別的工具比不上的。
• Canva 配色產生器（canva.com/colors/color-palette-generator）：上傳圖片，吐出五個顏色。簡單、直接、免登入。如果你只是想快速看看一張照片「拆開來長什麼樣」，這是最省事的入口，順手還能接著到 Canva 裡做後續設計。
• Color Thief（colorthief.io）：開源的抽色工具，給你一個顏色庫，你丟圖進去它吐色票。介面很素，但它背後的演算法是公開的，開發者甚至可以把它的邏輯包進自己的應用裡。對需要「批次處理大量圖片抽色」的人來說，這個比網頁工具更實用。

情境四／逼自己過 WCAG 無障礙對比這一關

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

而且你不能只想到桌機。根據 Statista 的統計，手機現在是全球網頁流量的主力來源，手機螢幕在戶外陽光下、在低電量降低亮度時，對比會被進一步吃掉，你在辦公室調好的配色，到了讀者的手機上可能完全不及格。你不能假設讀者跟你一樣坐在昏暗的冷氣房裡看網站。

所以配色一定要過 WCAG（Web Content Accessibility Guidelines）的對比檢查。下面三個工具是這一關的守門員：

• WebAIM Contrast Checker（webaim.org/resources/contrastchecker）：對比檢查的黃金標準。輸入前景色和背景色，它告訴你正常文字、大字、UI 元件分別是 pass 還是 fail。它的評分直接對應 WCAG 的 AA 和 AAA 等級，沒有任何花俏功能，就是給你最權威的那一個答案。任何配色在交件前，都該在這裡過一次。
• Leonardo（leonardocolor.io）：Adobe 開源的進階對比工具。它不只是檢查對比，而是依據你指定的對比目標，反推給你一組保證合格的配色。你給它一個背景色，告訴它「我要 AA」，它直接算出哪些前景色能過。對於要做整套設計系統、需要保證所有元件對比一致的人，Leonardo 是降維打擊。
• Color Safe（colorsafe.co）：輸入背景色、字級、字重，它給你一組保證符合 WCAG 的前景色選項。介面比 Leonardo 簡單，適合「我只想知道這個底色能配哪些字」的單點需求。

換句話說，按鈕和行動呼籲的點擊率，第一個變數就是「看不看得清楚」。配色對比不合格，再漂亮的視覺都是白搭。

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

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

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

• Happy Hues（happyhues.co）：這是我最推薦給非設計師的工具。它本身就是一個網站，但網站的配色會隨著你切換色票而即時改變。你看到的不是抽象的色票，而是「這組顏色用在導覽列、標題、按鈕、背景上會長什麼樣」。這種所見即所得的學習方式，比讀十篇配色教學都有效。
• Realtime Colors（realtimecolors.com）：類似的概念，但它讓你貼上自己的色票，預覽在一個模擬的網站版面上。你從 Coolors 或 Adobe Color 抓到一組顏色，丟進這裡就能立刻看到它們被實際套用的樣子，這一步能幫你擋掉無數「看色票很美、用上去很悲劇」的誤判。
• Brand Colors（brandcolors.net）：收錄了全球知名品牌的官方色票。想知道可口可樂的紅到底是哪一個 hex、Slack 的紫是怎麼配的，這裡一查就有。它的價值在於讓你拆解大品牌的配色邏輯：他們用幾個顏色？主色佔比多少？輔助色怎麼襯？這是最好的反向工程教材。想看更多網站的視覺風格，也可以搭配 設計靈感網站 一起研究。

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

前面的情境都在「產生」色票，但真實工作裡還有一個很現實的問題：色票產出來之後，你要怎麼搬進你的設計軟體、怎麼存起來下次用、怎麼從別人的網站上偷抓一個顏色。這聽起來很瑣碎，但這一關沒做好，前面所有努力都會在「重複手動輸入 hex」裡被浪費掉。

• ColorZilla（colorzilla.com）：瀏覽器擴充功能的經典。裝上去之後，你在任何網站上看到的任何顏色，點一下就能吸取 hex 碼。看到一個喜歡的配色，不用截圖再問別人，自己吸。它還有「頁面色票分析」功能，能把整個網站用過的顏色一次列出來。
• Eagle：這本來是素材管理工具，但它的色彩管理很強。你可以把抽取出來的色票整理成資料夾、加上標籤、跨專案重複使用。如果你同時在做好幾個專案，每個專案都有自己的色彩庫，用 Eagle 來統一管理會比散落在各個記事本裡可靠太多。
• ColorHexa（colorhexa.com）：色彩的百科全書。輸入任何一個 hex、RGB、HSL，它給你這個顏色的完整履歷：轉換值、互補色、類比色、配色建議、在各種色盲模式下的呈現、在油漆品牌裡的對應色。當你需要「深入了解某一個顏色」時，這裡是終點站。

21 個配色工具總覽：一張表幫你三分鐘選定

前面把六大情境和對應的工具講完了，這張表把它們全部攤開來，讓你在三分鐘內對照自己的需求找到目標。我把「最適合誰」「免費與否」「匯出能力」也標上去，因為這三個條件往往是決定你最後會不會真的用它們的關鍵。

工具	主要情境	最適合誰	費用	匯出能力
Coolors	主色延伸色階	需要視覺化鎖定、快速試錯的人	免費（進階付費）	PNG、SVG、CSS、PDF
UI Colors	主色延伸色階	前端、Tailwind 使用者	免費	CSS、Tailwind 設定
0to255	主色延伸色階	需要深淺狀態色的人	免費	hex 複製
ColorSpace	主色延伸色階	需要快速看到多種走向的人	免費	hex 複製
Paletton	主色延伸色階	重視色彩學依據的人	免費	連結、CSS
Color Hunt	零靈感找方向	想從現成組合出發的人	免費	hex 複製
Khroma	零靈感找方向	想要個人化推薦的人	免費	hex 複製
Colormind	零靈感找方向	需要 AI 生成完整組合的人	免費	hex 複製
Picular	零靈感找方向	用關鍵字找顏色的人	免費	hex 複製
Adobe Color	照片抽色、對比	Adobe 工作流程使用者	免費（登入）	Adobe 資產庫、ASE
Canva 配色產生器	照片抽色	快速看照片拆解結果的人	免費	hex 複製
Color Thief	照片抽色	需要批次處理的開發者	免費（開源）	程式串接
WebAIM Contrast Checker	無障礙對比	所有要交件的人	免費	無（即時檢查）
Leonardo	無障礙對比	做整套設計系統的人	免費（開源）	JSON、設計權杖
Color Safe	無障礙對比	單點檢查字色的人	免費	hex 複製
Happy Hues	看真實網站用色	非設計師、視覺學習者	免費	hex 複製
Realtime Colors	看真實網站用色	想預覽自己色票的人	免費	連結分享
Brand Colors	看真實網站用色	想拆解大品牌的人	免費	SCSS、CSS
ColorZilla	取色存色	常需要吸取網頁顏色的人	免費	剪貼簿
Eagle	取色存色	多專案管理者	付費（一次性）	資料夾、標籤
ColorHexa	取色存色	想深入了解單一顏色的人	免費	資訊查詢

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

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

工具講完了，但工具不會自動幫你生出一套配色。我把自己在實際專案裡反覆用過的流程拆給你看。這不是唯一的正解，但它至少是一個經得起考驗、能重複套用的順序。

第一步：釐清品牌個性，先用文字鎖定方向。我會跟客戶或團隊要三到五個形容詞，例如「專業、可信賴、現代、帶一點溫度」。這一步看似跟工具無關，但它會決定你等下要去哪一個情境找工具。如果形容詞偏向情緒（溫暖、活潑），你可能要從 Picular 或照片抽色切入；如果偏向理性（專業、可信賴），從 Color Hunt 找參考組合會更穩。文字方向不清楚就開始配色，最後一定會打掉重練。這一步也能順帶釐清品牌色的挑選邏輯，避免後面整套色票跟品牌個性脫節。

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

第三步：決定主色，用 Coolors 或 UI Colors 長出色階。參考組合選定後，我會抽出那一組裡的主色，丟進 Coolors 鎖定，讓它幫我試出輔助色和背景色；或者丟進 UI Colors 直接生出 50 到 950 的完整色階，交給前端。這一步的目的是把「一個顏色」變成「一個系統」，因為真實網站不可能只用一個顏色。

第四步：把配色丟進 Realtime Colors 預覽。色票定下來之前，我一定會在 Realtime Colors 或 Happy Hues 上看它們被實際套用的樣子。這一步能擋掉非常多的誤判：色票卡上看起來很協和的組合，套到大面積背景上可能太刺眼，或主色被背景吃掉。看到預覽不如預期，就回到第三步微調，不要硬上。

第五步：過 WebAIM 對比檢查，不合格就回去調。這一步是硬門檻，沒得商量。我會把所有「文字＋背景」「按鈕＋文字」的組合都丟進 WebAIM 檢查，AA 不過就回去調整深淺。如果專案規模大、需要整套設計系統的對比保證，我會改用 Leonardo 來反推合格的前景色，省掉逐組檢查的時間。

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

這六步走完，你手上的東西就不只是一組「好看的色票」，而是一套「經得起檢驗的色彩決策」。它有品牌個性當根據、有參考組合當對照、有完整色階當系統、有實際版面當驗證、有對比檢查當門檻、有設計權杖當落地。每一個環節都有理由，不是憑感覺。於是，我不怕把流程公開：真正決定配色好壞的，從來都是你在每一步停下來判斷的耐心，工具跟流程從頭到尾只是配角。

五個讓配色質感瞬間崩壞的陷阱

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

陷阱一：顏色太多，沒有主從。配色工具一按就生出一堆顏色，很多人就把全部都拿來用。結果網站像調色盤，讀者眼睛不知道該停在哪裡。一個成熟的網站配色，主色通常只佔一到兩個，其餘是中性色（白、灰、黑）和少量的輔助色。顏色越少，每一個顏色的存在感越強。下次你從工具抓到一組五個顏色的色票，先問自己：「我能不能只用其中三個撐起整個版面？」

陷阱二：只看色票卡，不看面積。這是 Realtime Colors 和 Happy Hues 存在的原因。同一個顏色，塗滿整個背景跟只用在按鈕上，效果天差地別。深色當背景大面積出現會壓迫，亮色當背景大面積出現會刺眼。永遠要在實際版面上看過，才能判斷一個顏色的真實效果。

陷阱三：忘記考慮文字與背景的對比。這個前面強調過了，但它太重要所以再說一次。再好看的配色，只要文字看不清楚，對讀者來說就是不合格。而且對比不只影響可讀性，還直接影響 SEO 間接指標：讀者看不清字、馬上跳出，停留時間和體驗就垮了。把 WebAIM 檢查當成交件的必要條件，不是選配。

陷阱四：配色跟產業調性脫節。我曾看過一個法律事務所的網站用了粉嫩糖果色，視覺上很時髦，但完全破壞了信任感。每個產業都有讀者期待的色彩語彙：金融、醫療、法律偏向藍、灰、綠這類穩重色；餐飲、親子、生活風格可以活潑。配色工具不會告訴你這件事，這得靠你對色彩心理學的基本認識。工具給你選項，產業判斷是你自己的責任。

陷阱五：忽略不同螢幕的色差。你的 MacBook 顯示的顏色，跟讀者的平價手機、辦公室螢幕顯示的不會一樣。sRGB 和 Display P3 的色域差異，會讓某些顏色在不同裝置上變調。這並非要你避開鮮豔色，重點是配色的時候要在至少兩種不同螢幕上看過，特別是目標讀者最可能使用的那種裝置。把「在我的螢幕上很美」當成標準，是設計師最常犯的自溺。

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

我把 21 個工具攤開給你看了，但有一句實話必須說在這裡：工具再多，都救不了對色彩一無所知的人。這不是要嚇你，而是要幫你省時間。

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

舉個例子。Coolors 給你一組五個顏色，你看了一眼覺得「還行」，但其實這五個顏色裡有兩個是鄰近色、一個是它們的互補色，這種結構本來就會和諧；你不知道這件事，所以你也無法判斷「再調整哪一個會更好」。懂一點色彩學的人，會把那個互補色稍微降低彩度，讓它當輔助而不搶主色；不懂的人，就只會繼續按空白鍵碰運氣。

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

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

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

所謂設計權杖，就是把顏色用一個語意化的名字定義下來。例如你不寫「#2563EB」，而是寫「color-primary」；不寫「#F8FAFC」，而是寫「color-surface」。這樣做的好處是，當品牌色要改的時候，你只改一個地方，整個網站、整個設計檔案都跟著動，不用逐一搜尋替換。

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

• CSS 變數：把色票寫進 :root 裡的 CSS 自訂屬性，例如 --color-primary: #2563EB;。前端只要引用這個變數，改色就只改源頭。這是最輕量、幾乎零成本的落地方式，任何網站都能立刻做。
• Figma 的 Variables 與 Styles：在 Figma 裡把色票定義成 Color Variable，設計稿裡所有用到這個顏色的元件都會連動。設計和開發兩邊用同一套命名，交接時就不會出現「設計稿的藍跟程式碼的藍不一樣」這種悲劇。
• 設計系統層級：規模更大的團隊會把設計權杖集中管理，用 JSON 或專門的 token 管理工具統一維護，再自動產出給各平台的程式碼。Leonardo 在這一層特別有用，因為它能直接產出符合對比規範的設計權杖。

這一層做好了，你的配色就不會是一次性的心血來潮，而是一個可維護、可擴充的資產。這跟做 品牌識別系統 是同一個道理：把規範定下來，之後不管誰接手，都不會把你的配色搞砸。

落地時還有一個容易踩的坑：命名千萬不要照顏色本身取。把變數取名叫 --color-blue，聽起來直覺，但等你哪天把品牌色從藍改成綠，這個名字就變成謊言，所有引用它的地方都會讓接手的人一頭霧水。用語意命名（--color-primary、--color-surface、--color-text-muted），顏色可以換，但角色的意義不變，這才是設計權杖能長期運作的關鍵。這個原則也適用於搭配 版面設計 時的元件命名，命名一致，整個系統才一致。

配色工具常見問題

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

本質上來說沒有。但如果你要我挑三個最低門檻、最高報酬的，我會選 Coolors（產生色票）、WebAIM Contrast Checker（檢查對比）、Happy Hues（看配色被實際用出來的樣子）。這三個加起來，能涵蓋大多數人八成以上的需求，而且全部免費、免登入。

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

大多數免費配色工具產生的色票組合，本身並不受著作權保護（顏色組合通常無法被獨佔），所以用在商業專案上一般沒問題。但要注意兩件事：一是工具本身的服務條款（例如某些進階匯出功能可能要付費授權），二是如果你是直接抄某個知名品牌的官方配色（例如從 Brand Colors 抓來的），那就有侵權和混淆的風險。工具給你的是起點，最後的配色還是該經過你自己的判斷和調整。

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

從情境五（看別人怎麼用色）開始。打開 Happy Hues，切換幾組配色，感受一下「同樣的版面，換顏色之後氣氛完全不同」。這個練習比讀任何理論都更快建立你的色彩直覺。有了直覺之後，再去碰 Coolors 這類產生器，你才會知道自己在挑什麼。如果你連網頁設計的整體門檻都想跨過，可以從 UI/UX 免費學習資源 或 網頁設計自學路徑 著手，把配色放進更大的脈絡裡學。

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

可信，但不能全信。AI 配色工具的強項是「快速給你一堆可能性」，弱點是「它不懂你的品牌、你的產業、你的讀者」。它推薦的組合在視覺上通常不會太差，但「不會太差」跟「適合你的專案」是兩回事。把 AI 的輸出當成草稿，再用你對品牌和產業的判斷去修正它，這才是用對 AI 的姿態。

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

會，而且差很大。前面提過，手機螢幕的亮度、色域、戶外可視條件都跟桌機不同。建議的做法是：配色定案後，務必在手機上實際看一次，特別是檢查深色背景和低對比組合。如果你的讀者大多是手機使用者，這一步甚至比在桌機上調色更重要。

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

大多數配色工具的免費版，已經能滿足八成以上的日常需求。付費版多出來的，通常是三種東西：更細的匯出格式（例如直接匯出設計權杖、ASE 色票檔）、無限的資產庫儲存、以及進階功能（例如 Adobe Color 的進階色彩規則、Coolors 的色覺模擬）。判斷要不要升級的標準很簡單：問自己「我這一個月有幾次需要這個功能」。如果答案是「好幾次」，那省下來的時間就值得那張訂閱費；如果只是「也許有一天會用到」，那就繼續用免費版，等真的卡關了再說。我自己日常用的工具絕大多數都停在免費版，只有重度依賴 Coolors 的匯出功能時，才會考慮升級。

今天就開始：五分鐘行動清單

看完一堆工具和觀念，最怕的就是「收藏了等於學會了」。很多設計資源就這樣躺在書籤列裡發霉，從來沒有真正打開過。所以給你一個五分鐘就能做完的起手式，做完它，你今天就不算白看這篇。

1. 打開 WebAIM Contrast Checker，把你現在網站首頁的文字色和背景色填進去，看它是 pass 還是 fail。如果 fail，你今天就找到一個可以立刻修掉的問題。
2. 打開 Coolors 或 Happy Hues，針對你正在做的專案，挑出兩組你覺得可行的配色。不要只挑一組，兩組放在一起比，你才看得出差別。
3. 把挑好的色票丟進 Realtime Colors，看它在模擬版面上的樣子。如果跟你想像的落差很大，回去換一組。這個「色票卡跟實際版面對照」的動作，是配色能力進步最快的練習。
4. 把最後定案的色票，寫進你的 CSS 變數或 Figma Variables。就從今天開始，用設計權杖的思維管理顏色，不要再用記事本貼 hex 碼了。
5. 挑一篇上面提到的色彩觀念文章讀完，不管是色彩學、色相環還是色彩心理學。給自己一個小時，把地圖畫清楚，之後工具才會真的聽你的話。

配色這件事，沒有人是靠天分一次到位的。它跟所有技能一樣，是反覆「挑、看、修、再用」磨出來的。工具幫你把「挑」的門檻拉低，但「看和修」的能力，只能你自己練。從今天這五分鐘開始，哪怕只是改一個按鈕的顏色，都是往前一步。

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