比較 · 檢查日期 2026-10-25
最佳免費配色與對比度工具
好的配色工具應該能從圖片找出顏色、由一個顏色產生和諧的配色、確認文字仍然清楚易讀，並把色票交給您的設計或程式工具。以下是各工具在自家頁面上的功能比較。
我們開發的是 Slop Colors，為本頁所列工具之一。其他工具的所有事實均來自其官方頁面，連結列於各工具下方，內容依 2026-10-25 時的版本。價格與功能會變動，選擇前請先查看各網站。
我們如何比較
- 免費，以及帳號或方案多了什麼
- 從圖片取色
- 由一個顏色產生和諧配色與色階
- WCAG 對比度檢查
- 匯出檔案（CSS、Tailwind、ASE、GPL）
一覽
| 工具 | 價格 | 執行環境 | 從圖片取色 | 對比度檢查 |
|---|---|---|---|---|
| Slop Colors 本站 | 免費，不需帳號 | 任何現代瀏覽器 | 滴管與主要顏色（k-means） | 對比率、AA 與 AAA，並附修正建議 |
| Coolors | 免費方案；Pro 方案 | 網頁、iOS 應用程式、Figma 外掛、Chrome 擴充功能 | Image Picker | Contrast Checker |
| Adobe Color | 免費 | 網頁 | 從圖片擷取 | 對比率，並附 WCAG 指引 |
| WebAIM Contrast Checker | 免費 | 網頁 | 否（滴管只能從螢幕取色） | AA 與 AAA，一般文字、大型文字與介面元件 |
| 功能 | Slop Colors 本站 | Coolors | Adobe Color | WebAIM Contrast Checker |
|---|---|---|---|---|
| 從圖片取色 | 是 | 是 | 是 | 否 |
| 由單一顏色產生和諧配色 | 是 | 未說明 | 是 | 否 |
| WCAG 對比度檢查 | 是 | 是 | 是 | 是 |
| 大型文字與介面等級 | 是 | 未說明 | 未說明 | 是 |
| 色盲模擬預覽 | 否 | 未說明 | 是 | 否 |
| CSS 匯出 | 是 | 是 | 未說明 | 否 |
| Tailwind 匯出 | 是 | 是 | 未說明 | 否 |
| Adobe .ase 匯出 | 是 | 是 | 未說明 | 否 |
| GIMP .gpl 匯出 | 是 | 未說明 | 未說明 | 否 |
| OKLCH 數值 | 是 | 未說明 | 未說明 | 否 |
| 不需帳號 | 是 | 部分支援 | 部分支援 | 是 |
| 圖片留在您的裝置上 | 是 | 未說明 | 未說明 | 是 |
1. Slop Colors（本站）
最適合： 在同一頁私密地從您自己的圖片取色、檢查對比度，並把色票匯出為程式碼或色票檔。
優點
- 圖片在瀏覽器中讀取，不會上傳
- 可匯出 CSS 變數、Tailwind 設定、JSON、Adobe .ase 與 GIMP .gpl，匯出的檔案也能再次開啟
- 支援 HEX、RGB、HSL、OKLCH 與 CMYK，超出色域的 OKLCH 會對應到 sRGB
缺點
- 沒有可瀏覽的共享色票資料庫
- 沒有色盲模擬預覽
- 無法將色票匯出為 PDF 或圖片
2. Coolors
最適合： 快速產生與瀏覽色票，擁有龐大的色票資料庫，並提供設計工具的外掛。
優點
- 按空白鍵即可產生配色，並可瀏覽超過 1,000 萬組色票
- 可匯出 PDF、圖片、CSS、ASE、SVG、程式碼與 Tailwind
- Palette Visualizer 可將顏色套用在設計稿上預覽
缺點
- 免費方案最多保存 10 組色票；其頁面將 Image Picker 取色與進階匯出列為 Pro 功能
Coolors 官網 · 來源： Coolors 首頁
3. Adobe Color
最適合： 使用 Adobe 應用程式的設計師，想在色環上套用和諧規則，並把色票存入自己的資料庫。
優點
- 在色環上提供單色、互補、類似、三角與分裂互補等和諧規則
- 色盲模擬預覽
- 可將色票存入您的資料庫，供其他專案使用
缺點
- 其色環頁面沒有提及匯出檔案
Adobe Color 官網 · 來源： Adobe Color，色環
4. WebAIM Contrast Checker
最適合： 依 WCAG 檢查一組文字與背景顏色，並附上可分享結果的連結。
優點
- 明度滑桿可調整任一種顏色
- 結果有固定連結，並提供 JSON API
- 前景色可設定透明度
缺點
- 只能檢查一組顏色，無法產生或匯出色票
WebAIM Contrast Checker 官網 · 來源： WebAIM Contrast Checker
該如何選擇
若顏色來自您自己的圖片，而且色票最後要進入程式碼或設計工具，我們推薦 Slop Colors：滴管、主要顏色、對比度檢查與匯出都在同一頁，而且不會上傳任何內容。
若看重產生器、資料庫與外掛，請選 Coolors；若要色環與 Adobe 資料庫，請選 Adobe Color；若只想檢查並分享一組顏色，請用 WebAIM 檢查器。
常見問題
我需要多少對比率？
WCAG AA 要求一般文字為 4.5:1，大型文字與介面元件為 3:1；AAA 要求 7:1，大型文字為 4.5:1。四個工具都會顯示對比率。
哪種檔案可以在 Photoshop 或 Illustrator 中開啟？
Adobe Swatch Exchange（.ase）檔案。Slop Colors 與 Coolors 都能匯出這種檔案。
我的圖片會被上傳嗎？
Slop Colors 不會：圖片會在您的瀏覽器中讀取。其他工具請查看各自的隱私權說明。
其他產品名稱為其擁有者的商標。Slopographic 與它們沒有關聯。