配色網站不少，但真正常被拿來用、而且免費就能做完一輪的，大概就是下面這四個。它們看起來都在做同一件事，實際解決的問題卻不一樣，有的負責給靈感，有的負責從你手上的主色推出整組，還有一個乾脆把配色直接套在一整頁網站上給你看。
以下四個都實際操作過，逐一記下免費到哪、要不要註冊、匯出格式，以及各自最大的限制。
配色網站有哪些？四個免費工具先看這張表
這四個網站都不用付費就能完成一輪配色，也都不必註冊就能開始用，差別在於它們預設你手上已經有什麼。
| 工具 | 它在做什麼 | 免費到哪 | 最適合 |
|---|---|---|---|
| Coolors | 按空白鍵隨機生成 5 色配色 | 生成與匯出免費，7 種配色法則要付費 | 快速抓靈感、需要 ASE 檔進 Adobe |
| Adobe Color | 色輪加配色法則，從主色推出整組 | 配色法則全免費，存 Libraries 才要登入 | 已經有品牌主色，要延伸整套 |
| Realtime Colors | 把配色即時套在一整頁模擬網站上 | 全部免費 | 配色要用在網站上 |
| Color Hunt | 策展好的配色靈感牆，30 幾種標籤 | 瀏覽與複製色碼免費，收藏要登入 | 還沒有方向，要先找風格 |
會覺得配色工具不好用，多半不是工具的問題，而是手上的東西跟工具預設的起點對不上。還沒決定主色的時候，打開一個要你先輸入主色的色輪，第一個問題就答不出來；反過來，已經有品牌藍要延伸，卻用隨機生成一直按，按出來的顏色跟品牌主色通常沒有關係。下面逐一拆開來看，各自的免費範圍與限制差得比想像中多。
Coolors：按空白鍵就有一組，但配色法則要付費
Coolors 應該是所有配色網站裡上手最快的一個，不用註冊，打開生成頁面按一次空白鍵就換一組新的 5 色配色，生成跟匯出都不限次數。對於只是想先抓靈感、還不確定要用哪個顏色的人，這個速度是它最大的優勢。
不過它真正的限制藏在「Generate method」這個功能裡：單色（Monochromatic）、類比（Analogous）、互補（Complementary）、分裂互補（Split Complementary）、三等分（Triadic）、四等分（Tetradic）、正方（Square），7 種配色法則全部掛著 PRO 徽章要付費才能用，免費版只有自動隨機一種模式。也就是說，如果你的需求是以品牌主色為基準推出互補色，免費版的 Coolors 其實做不到，只能靠一直按空白鍵碰運氣。
它的匯出選單反而做得比很多工具齊全，一次給出 12 種格式：URL、Share、PDF、Image、CSS、ASE、SVG、Code、Tailwind、Embed、X、Pinterest。其中 ASE（Adobe Swatch Exchange）格式可以直接匯進 Illustrator 或 Photoshop 變成色票，不用一格一格手動抄色碼進設計軟體，這一點多數整理型文章不會提到。要留意的是匯出的 SVG 檔案裡內嵌了 2 行文字，分別是「Exported from Coolors.co」與這組配色的網址，拿去用之前要自己刪掉。
畫面上的廣告偏多，實際使用時遇到過 Bluehost、Netlify、Wegic 的廣告位，右上角與畫面底部各佔一塊，會擋到部分內容。整體來說，Coolors 適合拿來快速抓靈感，或是需要把配色直接變成 Adobe 軟體色票的人；如果你已經有一個固定的品牌主色要延伸，免費版能幫上的忙有限。
Adobe Color：Coolors 鎖起來的配色法則，這裡免費
Coolors 免費版鎖住的整排配色法則，換到 Adobe Color 反而全部開放。網址是 color.adobe.com/create/color-wheel。這個工具已經併進 Adobe Express，頁面標題也換成了「Color palette generator and color wheel tool」。介面跟早期獨立版的 Adobe Color 已經不一樣，以下寫的是目前實際看到的樣子。
同樣不用註冊就能用，色輪、套用配色法則、複製色碼、下載，未登入狀態下全部都能操作。畫面上一整排配色法則按鈕都是免費的，常見的互補、類比、三等分等模式，右側箭頭還能展開更多種類，這正是 Coolors 免費版整個鎖住的那一塊。
起手方式有 3 種：指定一個主色（Primary color）、上傳一張圖片直接抽色（Image）、或是直接拖動色輪（Color wheel）。工具列上另外有兩個實用的圖示，分別是對比檢查與色覺模擬，可以先看過配色在色覺障礙讀者眼中會不會出問題，這是前面 Coolors 沒有的功能。整組配色會排成 5 色一列，每一格直接顯示 HEX 色碼，可以單獨複製其中一格，也有下載與分享的按鈕；只有想把配色存進 Adobe 帳號的 Libraries 時才需要登入。
同樣是免費，Coolors 只能按空白鍵碰運氣，Adobe Color 可以指定以某個主色為基準推出互補色。如果你已經有品牌主色，要從它延伸出一整組能用在網站與物料上的配色，這是四個工具裡最直接的選擇。
Realtime Colors：唯一能看到「做成網站長什麼樣」的
前面兩個工具給的都是色塊，Realtime Colors 給的是一整個模擬網站。它同樣不用註冊，頁面上明白寫著 100% Free Forever，畫面裡有導覽列、標題、按鈕、卡片、頁尾等區塊，改動任何一個顏色，整個版面會即時跟著變化。
它把顏色強制分成 5 個角色：文字、背景、主色（Primary，用在主要的行動呼籲按鈕）、次要色（Secondary，用在次級按鈕與資訊卡）、強調色（Accent，用在連結、標籤與高亮）。這種分法跟只給你五個色塊的工具很不一樣，它逼使用者在挑顏色的當下就想清楚每個顏色要放在版面的哪個位置，而不是先挑好看再煩惱怎麼分配。
匯出格式包含 .zip、.png、CSS、SCSS 與 QR Code，另外還有一個 Figma 外掛可以裝。要提醒的是，示範頁面上那段「Plans & Pricing」與底下一排使用者推薦，其實是拿來預覽配色效果的假內容，頁面自己就寫了那是通用區塊、推薦人是虛構的，並不代表 Realtime Colors 真的有付費方案，它就是完全免費的工具。
如果要做的是網站，這是四個工具裡跟實際版面最貼身的一個，畢竟色票排起來好看，跟做成網頁後好不好看，中間常常有落差，這個工具直接把那段落差省掉了。
Color Hunt：不生成，但最適合還沒有方向的時候
跟前面三個工具的邏輯不一樣，Color Hunt 不是生成器，而是一面策展好的配色靈感牆。瀏覽與複製色碼不用登入，只有要收藏（Collection）才需要註冊帳號。
它沒有生成按鈕，也沒有任何匯出功能，能做的只有複製 HEX 色碼；每一組配色固定是 4 色，跟其他工具常見的 5 色不一樣。找配色的方式是依 New、Popular、Random 排序瀏覽，或是用超過 30 個標籤篩選，像是 Pastel、Vintage、Retro、Neon、Gold、Light、Dark、Warm、Cold，以及春夏秋冬四季與 Wedding、Christmas、Halloween 這類節慶標籤。
每一組配色下面都標著愛心數與發佈時間，一眼就看得出哪組比較受歡迎，使用者也能自己投稿新的配色組合，另外還有 Chrome 擴充功能可以裝。它最適合的情境是完全還沒有方向、想先看看有什麼風格存在的人；如果已經有主色、要從它推出一整組配色，這個工具反而幫不上忙，因為它本來就不是拿來推導配色的。
節慶與季節標籤對做節慶主視覺特別實用，如果在做的是禮盒、紅包袋、傳單這類有明確檔期的主視覺，直接照節慶標籤去找配色，比自己憑空調色快得多。
所以你該用哪一個？情境對照
四個配色網站各自解決一個階段的問題，實際要挑哪一個，看你現在的情況比較準：
| 你的情況 | 用哪個 | 為什麼 |
|---|---|---|
| 完全沒方向，想先看看有什麼風格 | Color Hunt | 策展好的現成配色，標籤好篩 |
| 已經有品牌主色，要推出整組 | Adobe Color | 免費就能指定配色法則 |
| 配色要用在網站上 | Realtime Colors | 直接看到套在版面上的樣子 |
| 要拿到設計軟體裡用 | Coolors | 匯出 ASE 可直接進 Adobe |
| 要檢查對比與色覺友善度 | Adobe Color | 內建對比檢查與色覺模擬 |
| 要做節慶檔期主視覺 | Color Hunt | 節慶與四季標籤 |
四個都試過之後，差別最大的是這五件事
如果之後想再找別的配色網站，用下面這五點去比，會比看功能列表準得多。這四個工具的實際差距，也都落在這幾項上。
- 要不要註冊才能匯出，差異比想像中大，有些連匯出都不用登入，有些連收藏都要
- 能不能指定配色法則（互補、類比、三等分），還是只能隨機，這是免費與付費最常見的分界
- 匯出格式有沒有設計軟體吃得下的（ASE、SVG），還是只給你一串色碼
- 匯出檔裡有沒有夾帶來源標記，要不要自己清乾淨才能用
- 是只給你色塊，還是能直接預覽套在真實版面上
工具給得出配色，給不出的是這三件事
前面四個配色網站都能算出一組協調的顏色，但有三件事它們給不了答案，而這三件事往往才決定配色最後成不成立。
螢幕好看不等於印出來好看
配色網站算出來的每一個顏色，都是在 RGB 色域裡運作，螢幕怎麼顯示就是怎麼好看。問題是印刷用的是 CMYK 色域，兩者能呈現的顏色範圍不一樣，轉換過程中一定會有顏色掉出範圍，最明顯的是螢光綠與寶藍這類高飽和度的顏色，印出來常常會變得比螢幕上暗、濁。
如果這組配色最後要印在名片、包裝、海報上，不能只看配色網站的畫面就直接定案，印刷前務必先確認轉成 CMYK 後的實際效果。
工具給的是配色，不是品牌色
配色網站幫忙把顏色湊成一組看起來協調的組合，但這組顏色能不能拿來當品牌主色，是完全不同的判斷。品牌代表色要考慮的是辨識度夠不夠、產業裡的慣例是什麼、跟競爭對手的顏色會不會撞在一起，這些都不是配色工具算得出來的，工具只知道顏色搭不搭，不知道品牌處在什麼樣的市場裡。
挑好看的顏色只是第一步，接下來還要確認這個顏色定案後能不能跨物料維持一致，從網站到名片、招牌都要對得起來。
比例比顏色更決定成敗
就算 5 個顏色都挑對了，比例分配錯了，畫面照樣會顯得雜亂。前面提到 Realtime Colors 強制把顏色分成文字、背景、主色、次要色、強調色 5 個角色，其實就是在提醒使用者，同一組顏色擺的位置跟面積不一樣，看起來的效果會有明顯落差。
一個常見的錯誤是把強調色當成主要背景大面積使用，或是把該用來吸睛的顏色藏在角落，這些都不是配色網站能幫忙判斷的事，得靠自己抓比例的邏輯。
配色網站能幫你省掉的，是從色輪手動推算配色的時間，但省不掉的是判斷。工具只負責把顏色湊成一組和諧的結果，至於這組顏色要往哪個方向發展、要用在什麼比例、能不能印得出來，這些決定權還是在自己手上。
下一次打開配色網站之前，先花一分鐘問自己：我現在是沒有方向，還是已經有主色要延伸？是要用在海報，還是要套在網頁上？答案不同，該打開的工具就不一樣。想清楚再動手，你會發現配色停在原地的情況少很多。