配色網站與色票工具：20 個品牌、UI、圖片取色與對比檢查工具

快速答案：配色工具要依任務選：抓色、產生色票、建立 UI 色階、檢查對比，不要只挑看起來漂亮的色票。

這篇整理設計工作會真的用到的配色網站與色票工具。配色不是把五個漂亮顏色排在一起，而是要知道哪個顏色負責背景、文字、按鈕、狀態、強調與可讀性。正文收錄的工具都已先進研究表，且附各工具預覽圖。

先看分類：配色工具要依任務選

類型	代表資源	免費/付費	適合用途	授權注意
色票產生器	Coolors、Adobe Color、ColorSpace、Muzli Colors	免費 / Freemium	快速產生配色、圖片取色、靈感發想	色票可作參考，但仍要回到專案脈絡調整
AI 配色工具	Huemint、Colormind、Palettemaker	多為免費	品牌方向、網站配色、場景預覽	AI 產生的是草案，不能跳過對比與品牌檢查
靈感配色庫	Happy Hues、Color Hunt、Dopely Colors	免費 / Freemium	找 moodboard、觀察配色在版面中的角色	不要直接照抄，要轉成自己的文字、背景與元件色
UI 色階工具	UI Colors、Leonardo Color、Material Theme Builder、tints.dev	免費 / Freemium	品牌色階、亮暗模式、Design tokens、Tailwind 色階	產出的色階仍需依產品狀態、可讀性與品牌微調
對比檢查	WebAIM、Colorable、WhoCanUse	免費	文字背景對比、WCAG AA/AAA、包容性檢查	對比通過不等於完整無障礙，仍需整體 UI QA

配色流程：先角色，再色票

• 先決定任務：品牌主色、文章封面、網站 UI、簡報，會需要不同工具。
• 再定義角色：背景色、文字色、輔助色、強調色、錯誤/成功/警示狀態。
• 產生色票後，立刻檢查文字和背景對比。
• 進入 Figma 或程式前，把 HEX 整理成命名規則，例如 primary-500、surface、text-muted。
• 最後用真實內容測試，不要只看空白範例。

20 個配色網站與色票工具

1. Coolors

官方網站。最適合當配色起點：按空白鍵生色票、鎖定顏色、從圖片取色，再把 HEX 帶回設計檔。免費版夠做日常配色，進階管理再看 Pro。

• 價格型態：Freemium
• 適合用途：快速產生色票、圖片取色、對比檢查、匯出色票
• 使用注意：不涉及素材授權；色票可作設計參考，仍需遵守服務條款。

2. Adobe Color

官方網站。Adobe 使用者很好接上工作流，可以用色輪建立類似色、互補色，也能從圖片取色。適合做品牌 moodboard 前期整理。

• 價格型態：免費
• 適合用途：色輪、主題探索、圖片取色、Adobe 工作流
• 使用注意：不涉及素材授權；Adobe 帳號與生態功能依官方條款。

3. Huemint

官方網站。它不是只丟五個色塊，而是會依用途產生背景、文字、強調色等角色。適合想快速找品牌或網站方向時使用。

• 價格型態：免費
• 適合用途：AI 產生品牌、網站、漸層與 UI 色票
• 使用注意：AI 色票可作設計參考，正式品牌案需人工調整。

4. Colormind

官方網站。可以從圖片、電影、藝術作品等資料集學習配色。介面較舊，但用來找不同風格的色彩組合仍然有效。

• 價格型態：免費
• 適合用途：AI 色票、圖片取色、網站模板配色
• 使用注意：不涉及素材授權；色票可作設計參考。

5. Happy Hues

官方網站。很適合新手，因為它直接把顏色放進頁面情境，讓你看到背景、標題、按鈕、插圖各自扮演什麼角色。

• 價格型態：免費
• 適合用途：看配色在真實版面中的背景、文字、按鈕用途
• 使用注意：色票與範例可作配色參考。

6. Color Hunt

官方網站。靈感量大，適合快速找 moodboard。缺點是它只給色票，不會幫你決定文字色、背景色或按鈕狀態。

• 價格型態：免費
• 適合用途：找流行色票、靈感分類、快速複製 HEX
• 使用注意：社群色票可作設計參考，仍需自行調整。

7. Paletton

官方網站。介面老派，但色彩理論邏輯清楚。當你想檢查主色、輔色、互補色之間的關係，它比單純隨機色票更穩。

• 價格型態：免費
• 適合用途：互補色、類似色、三角色、傳統色彩理論配色
• 使用注意：色票可作設計參考。

8. ColorSpace

官方網站。給一個主色，它會產生多種配色方向和漸層。適合已有品牌主色，但還不知道背景、輔色、漸層怎麼延伸的人。

• 價格型態：免費
• 適合用途：輸入單色後產生色票與 CSS 漸層
• 使用注意：色票與漸層可作設計參考。

9. Realtime Colors

官方網站。它的價值是把色票直接套到 UI 頁面看。比只看五個色塊更接近真實網站，適合判斷層次和可讀性。

• 價格型態：Freemium
• 適合用途：在網站版面中即時預覽文字、背景、按鈕與強調色
• 使用注意：色票可作設計參考，專案儲存/進階功能依官方方案。

10. UI Colors

官方網站。從單一主色產生 Tailwind 常用的 50-950 色階，適合設計和工程要對齊色彩 token 的專案。

• 價格型態：Freemium
• 適合用途：Tailwind 色階、品牌色、狀態色、Figma plugin
• 使用注意：色票與 Tailwind 色階可作設計參考。

11. Leonardo Color

官方網站。適合進階 UI 色彩系統。它不是單純找漂亮，而是幫你做符合對比需求的色階和資料視覺化配色。

• 價格型態：免費
• 適合用途：可及性配色、對比導向色階、資料視覺化色階
• 使用注意：開源工具；色票與設計 token 可作 UI 色彩系統參考。

12. Material Theme Builder

官方網站。如果做 App 或 Material Design 風格產品，它可以把主色轉成角色色、亮暗模式和整套主題。非 Material 專案也能參考角色色邏輯。

• 價格型態：免費
• 適合用途：Material 3 主題、角色色、亮暗模式、設計系統
• 使用注意：色票可作 Material Design 與 UI 系統參考。

13. WebAIM Contrast Checker

官方網站。正式設計檢查必備。輸入文字色和背景色後，可以直接看 WCAG AA / AAA 對比結果。

• 價格型態：免費
• 適合用途：文字、背景、UI 元件對比檢查
• 使用注意：檢查結果用於可及性判斷，不取代完整無障礙測試。

14. Colorable

官方網站。功能很單一，但快。適合在設計稿旁邊臨時測一組文字色和背景色，不用打開完整檢查工具。

• 價格型態：免費
• 適合用途：快速比較文字與背景的對比、AA/AAA 結果
• 使用注意：檢查結果作可讀性參考。

15. WhoCanUse

官方網站。它把對比結果轉成不同視覺族群的可讀性理解，適合說服團隊不要只憑「看起來還行」決定顏色。

• 價格型態：免費
• 適合用途：模擬不同視覺狀態下的色彩對比
• 使用注意：檢查結果作可讀性與包容性參考。

16. Muzli Colors

官方網站。工具入口簡單，適合快速產生色票、漸層和圖片取色結果。可作靈感補充，不建議直接當品牌系統。

• 價格型態：免費
• 適合用途：色票、漸層、圖片取色與配色靈感
• 使用注意：色票可作設計參考。

17. Dopely Colors

官方網站。工具很多，從色票、漸層到調色都有。適合補靈感，但正式專案要把用到的功能和色票整理回自己的設計系統。

• 價格型態：Freemium
• 適合用途：色票、漸層、調色、色彩靈感、色彩工具集合
• 使用注意：色票可作設計參考，部分功能需登入或依方案使用。

18. Palettemaker

官方網站。它會把配色套到不同設計場景，例如 Logo、UI、Poster。這比只看色票更容易判斷配色能不能真的用。

• 價格型態：免費
• 適合用途：AI 色票、Logo / UI / Poster 範例預覽、匯出
• 使用注意：AI 色票可作設計參考。

19. Figma Color Palette Generator

官方網站。適合 Figma 使用者，產生色票後能快速帶進設計檔。完整品牌 tokens 還是要在 Figma variables 或 design system 裡整理。

• 價格型態：免費
• 適合用途：產生色票、鎖定/編輯顏色、開到 Figma
• 使用注意：色票可帶入 Figma 工作流，使用依 Figma 條款。

20. tints.dev

官方網站。從單一主色產生完整色階，特別適合 Tailwind 專案。設計師和工程師可以直接對齊 50、100、500、900 這種命名。

• 價格型態：免費
• 適合用途：Tailwind 50-950 色階、API、亮度與飽和度調整
• 使用注意：Tailwind 色階可作設計與開發參考。

使用情境建議

從圖片抓配色

可以先用 Coolors、Adobe Color、Muzli Colors，或創作邦自己的 圖片取色工具。圖片取色後不要直接全用，通常只保留主色、輔色和一個強調色，再補文字色和背景色。

做品牌配色

先用 Huemint、Palettemaker 或 ColorSpace 找方向，再用 UI Colors、Leonardo Color、tints.dev 建立色階。品牌色不要只留一個 HEX，至少要有主色、輔色、背景、文字、狀態色和禁用狀態。

做 UI / 網站配色

Realtime Colors、Material Theme Builder、UI Colors 比一般色票牆更適合 UI，因為它們會讓你看到色彩放到文字、按鈕、卡片和背景後的效果。完成後再用 WebAIM、Colorable、WhoCanUse 檢查可讀性。

做社群圖與簡報

Color Hunt、Happy Hues、Dopely Colors 適合找情緒方向。封面或社群圖不一定要完整色階，但標題字和背景一定要拉開對比，否則縮圖後會很難讀。

常見錯誤

• 只看色票漂亮，沒有測文字和背景對比。
• 把所有顏色都用得一樣重，版面沒有主次。
• 品牌主色太亮，拿來當按鈕或文字時不易讀。
• 只做亮色模式，忘記深色模式或反白狀態。
• 設計稿有色票，但工程端沒有命名與 token 規則。

FAQ

配色網站產生的顏色可以直接用嗎？

可以當起點，但不要直接交付。至少要檢查文字對比、品牌適配、亮暗模式、狀態色，以及實際內容放上去後的可讀性。

怎麼檢查配色可讀性？

用 WebAIM Contrast Checker、Colorable 或 WhoCanUse 輸入文字色和背景色，確認是否符合 WCAG AA / AAA。大標題、小字、按鈕和提示文字都要分開測。

如何把色票貼到 Figma？

可以先複製 HEX 到 Figma styles 或 variables。若使用 Figma Color Palette Generator 或 UI Colors 這類工具，可以先產生完整色票，再整理成命名清楚的 variables。

品牌色要幾個顏色？

最小可從主色、輔色、背景色、文字色、強調色開始。若是網站或 App，還要補成功、警示、錯誤、資訊、禁用、邊框和 hover 狀態。

AI 配色工具可靠嗎？

適合找方向，不適合直接定稿。AI 色票要再經過對比檢查、品牌語氣判斷和實際版面測試。

延伸工具

• 創作邦色票產生器
• 創作邦圖片取色工具
• 創作邦色彩對比檢查器
• 看更多創作邦設計資源

最後更新：2026-06-27。本文是設計工具整理與配色流程建議，不取代各工具最新服務條款或完整無障礙檢測。