圖片取色與調色盤
在瀏覽器本機為單張圖片取色，複製 HEX/RGB/CSS，擷取 2-32 個代表色調色盤，並匯出 CSS 變數或 JSON；支援 HEIC/HEIF 輸入。
拖放圖片到這裡或點擊選擇
支援 PNG / JPEG / WebP / AVIF / HEIC / HEIF
檔案數
0 / 1
總大小
0 bytes / 25 MB
單檔上限
25 MB
圖片取色與調色盤匯入一張圖片點選預覽取色，並複製 HEX/RGB/CSS選擇調色盤數量（4/6/8/12/16/24/32）擷取代表色匯出 CSS 變數或 JSON
快速開始
1
2
3
4
5
常見使用情境
設計稿/海報取色
擷取主色與輔助色用於配色
主題/設計系統
匯出 CSS 變數或 JSON 用於專案
元件配色
為按鈕、標籤、圖表等擷取搭配色
品牌統一
從品牌素材中擷取標準色板
取色與調色盤選項
顏色數量：2-32，常用 8/12；照片/漸層建議 16-32
預設按鈕：4/6/8/12/16/24/32 一鍵切換
排序方式：依量化樣本數由高到低排列，最常見的顏色在前
顏色右側數字：表示下取樣調色盤影像中的量化樣本數量
匯出契約：CSS 變數使用 :root 的 --color-1 命名；JSON 會為每個調色盤顏色列出 index/hex/css/rgb/count。
使用建議
先用 8/12 看整體效果，再根據需要增加到 16/24/32
落地到專案時建議將 --color-1 改成語意化名稱（如 --color-primary）
大圖擷取時保持頁面前台，避免瀏覽器節流導致變慢
限制與相容性
調色盤擷取會自動下取樣以提升效能，結果是代表色。
精確度說明：點擊取色來自最長邊最高 2,048 px 的預覽 Canvas；調色盤擷取使用 256 px 取樣。
HEIC/HEIF 僅作為輸入；本地解碼可能失敗，必要時請先轉為 PNG/JPEG。
Alpha 處理：CSS 可輸出 rgba(...)；HEX/RGB 不包含 alpha；JSON 透過 css 欄位保留 alpha 表達。
輸入邊界：不支援 URL 匯入、剪貼簿匯入、螢幕取色器或瀏覽器擴充流程。
顏色邊界：不提供 HSL/CMYK/Pantone/LAB/OKLCH 轉換、對比檢查或 WCAG 矩陣。
匯出邊界：不提供 Tailwind/SCSS/ASE/Figma/Procreate 色板匯出。
隱私與安全
圖片取色和調色盤擷取在瀏覽器中完成。來源圖片在本工具開啟期間保留在頁面記憶體中。調色盤數量設定可能保留在瀏覽器儲存中；啟用 WebDAV 同步時，該設定可能依你的設定同步。選取顏色、調色盤、錯誤訊息和預覽縮放 / 平移資料是執行階段複查狀態，存在期間也可能透過 WebDAV 狀態 schema 同步。圖片檔案預設不會同步；只有你明確啟用附件同步時，它才可能進入 WebDAV 附件同步。CSS/JSON 調色盤匯出只在下載時產生，不作為單獨結果保存。共用裝置上，按需清空圖片、取色結果、調色盤、已儲存設定和站點資料。
常見問題
一般 UI：8 或 12；極簡圖示：4-6；照片/漸層：16-32。可用預設快速比較。
點擊取色是在預覽 Canvas 上單點取樣；調色盤是對 256 px 取樣圖進行量化後的代表色，強調整體主色趨勢。
取色和調色盤擷取在瀏覽器中完成。圖片在工具開啟期間保留在頁面記憶體中。調色盤數量可能保留在瀏覽器儲存中，並在啟用時透過 WebDAV 同步；取色結果、調色盤和預覽狀態存在期間也可能作為執行階段狀態同步。圖片檔案只有在你明確啟用附件同步時才會進入 WebDAV 附件同步。
點選取色會顯示 HEX、RGB 和 CSS 格式。調色盤可匯出 CSS 變數和 JSON，JSON 包含 index、hex、css、rgb、count 欄位；HSL、CMYK、Pantone、LAB、OKLCH、ASE、Figma 色板匯出不在此工具範圍內。