圖片取色與調色盤
圖片取色與調色盤
圖片取色與調色盤，支援從圖片點擊取色、擷取主色並匯出 CSS 變數或 JSON，適合設計取色、品牌色擷取與主題配色整理。
拖放圖片到這裡或點擊選擇
支援 PNG / JPEG / WebP / AVIF / HEIC / HEIF
圖片取色與調色盤匯入圖片：拖放或點擊選擇面板切換：桌面端在右側面板；行動端點擊底部按鈕點擊取色：在圖片上點擊任意位置，取得該像素的顏色複製顏色：取色後可複製 HEX/RGB/CSS 格式設定顏色數量：拖動滑桿或點擊預設（4/6/8/12/16/24/32）擷取調色盤：點擊擷取按鈕，擷取主色列表匯出 CSS：調色盤擷取後可匯出 CSS 變數檔案匯出 JSON：調色盤擷取後可匯出 JSON 資料檔案重置：清空當前圖片與結果
快速開始
1
2
3
4
5
6
7
8
9
常見使用情境
設計稿/海報取色
擷取主色與輔助色用於配色方案
主題/設計系統
匯出 CSS 變數或 JSON 用於專案
元件配色
為按鈕、標籤、圖表等擷取搭配色
品牌統一
從品牌素材中擷取標準色板
取色與調色盤選項
顏色數量：2–32，常用 8/12；照片/漸層建議 16–32
預設按鈕：4/6/8/12/16/24/32 一鍵切換
排序方式：按佔比從高到低排列，最常見的顏色在前
顏色右側數字：表示該色在圖片中的像素佔比
使用建議
先用 8/12 看整體效果，再根據需要增加到 16/24/32
落地到專案時建議將 --color-1 改成語意化名稱（如 --color-primary）
大圖擷取時保持頁面前台，避免瀏覽器節流導致變慢
限制與相容性
單檔上限 128MB，超大圖可能導致卡頓
調色盤擷取會自動下採樣以提升效能，結果為代表色
HEIC/HEIF 解碼依賴瀏覽器支援，失敗時請先轉為 JPG/PNG
透明像素會被忽略或按實際 RGBA 處理
隱私與安全
圖片只會在本地瀏覽器中處理；你可以隨時重新取色、擷取調色盤並匯出結果。
常見問題
將匯出的 :root { --color-1: ... } 放入全域 CSS，然後用 var(--color-1) 引用。
用於腳本/設計系統復用，例如生成 Design Tokens 或主題配置。每個顏色包含 hex/css/rgb 和 count。
一般 UI：8 或 12；極簡圖示：4–6；照片/漸層：16–32。可用預設快速對比。
點擊取色是單點像素；調色盤是從整圖量化擷取的代表色，強調整體主色趨勢。
需要先點擊「擷取調色盤」按鈕，擷取完成後匯出按鈕才可用。
預設用原圖檔名（去副檔名）+ .palette-顏色數 + .css/.json，並自動清理非法字元。