UI 與視覺設計靈感
從參考圖和自有視覺素材中提取代表色，作為設計系統配色討論的起點。
適合這些場景
配色提取適用於哪些設計任務？
商品圖視覺統一
比較商品圖、活動圖和品牌素材的主要色調，再人工選擇更適合運營頁面的顏色。
前端 CSS 變量
生成可複製或下載的 CSS 變量，並在真實頁面中檢查文字對比度和可訪問性。
操作路徑
如何提取、調整和導出配色
- 上傳 JPG、PNG 或 WebP 圖片，工具會在瀏覽器本地提取代表色。
- 選擇 5、8 或 10 色配色卡，必要時使用吸管添加指定區域顏色。
- 複製單個色值或 CSS 變量，也可以下載 CSS 文件或導出配色卡 PNG。
理解採樣結果和顏色偏差
- 大面積背景通常會影響主色排序，小面積品牌色可能需要用吸管手動補充。
- 半透明像素、漸變、高光和陰影會影響採樣，提取結果不一定等於物體固有顏色。
- 印刷、商品色卡和品牌標準應使用校準設備與正式色彩規範，不能只依據屏幕截圖。
瀏覽全部圖片處理專題
常見疑問
圖片配色提取常見問題
提取的顏色是圖片中精確佔比最高的顏色嗎？
不一定。工具會縮小圖片並對顏色分桶、排序，結果是代表性主色，適合設計參考而不是精密色彩測量。
為什麼提取結果沒有小面積 Logo 顏色？
小面積顏色在整體採樣中佔比較低，可能不會進入前幾種主色。可以使用吸管選擇 Logo 區域並加入色卡。
網頁 HEX 色值可以直接用於印刷嗎？
不建議直接使用。屏幕 RGB/HEX 與印刷 CMYK、紙張和油墨表現不同，應經過專業色彩轉換和打樣。