圖片取色與調色盤
圖片取色與調色盤
從圖片點擊取色，自動提取主色與調色盤，支援複製 HEX/RGB 並匯出 CSS 變數。支援 PNG、JPG/JPEG、WebP、AVIF、HEIC/HEIF。
拖放圖片到這裡或點擊選擇
支援 PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
圖片取色與調色盤
🚀 快速開始
- 匯入圖片：拖放或點擊選擇
- 面板切換：桌面端在右側面板；行動端點擊底部按鈕
- 點擊取色：在圖片上點擊任意位置，取得該像素的顏色
- 複製顏色：取色後可複製 HEX/RGB/CSS 格式
- 設定顏色數量：拖動滑桿或點擊預設（4/6/8/12/16/24/32）
- 提取調色盤：點擊提取按鈕，提取主色列表
- 匯出 CSS：調色盤提取後可匯出 CSS 變數檔案
- 匯出 JSON：調色盤提取後可匯出 JSON 資料檔案
- 重置：清空當前圖片與結果
📌 常見使用情境
- 設計稿/海報取色：提取主色與輔助色用於配色方案
- 主題/設計系統：匯出 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 處理
🔒 隱私與安全
- 所有處理均在您的瀏覽器內完成，資料不會離開您的裝置
❓ 常見問題
匯出的 CSS 檔案怎麼用？
將匯出的 :root { --color-1: ... } 放入全域 CSS，然後用 var(--color-1) 引用。
匯出 JSON 有什麼用？
用於腳本/設計系統復用，例如生成 Design Tokens 或主題配置。每個顏色包含 hex/css/rgb 和 count。
顏色數量選多少合適？
一般 UI：8 或 12；極簡圖示：4–6；照片/漸層：16–32。可用預設快速對比。
為什麼點擊取色和調色盤顏色不一樣？
點擊取色是單點像素；調色盤是從整圖量化提取的代表色，強調整體主色趨勢。
為什麼匯出按鈕是灰色的？
需要先點擊「提取調色盤」按鈕，提取完成後匯出按鈕才可用。
匯出的檔案名是怎麼生成的？
預設用原圖檔名（去副檔名）+ .palette-顏色數 + .css/.json，並自動清理非法字元。