圖片調色盤擷取器

從圖片擷取主要色彩,並將調色盤匯出為 HEX、CSS 變數或 JSON。

上傳圖片
選擇要在瀏覽器中本機取樣的圖片。
調色盤設定
控制要擷取的色彩數量以及排序方式。
8

選擇 3 到 12 種調色盤色彩。

較高品質會取樣更多像素,在大型圖片上可能需要更久時間。

變更顯示順序,不會改變擷取出的色彩。

尋找主要色彩時略過完全透明的像素。

調色盤結果
檢視、複製並匯出擷取出的調色盤。
尚無調色盤
上傳圖片即可查看主要色彩和匯出選項。

這個工具的用途

圖片調色盤擷取器會直接在你的瀏覽器中找出圖片的主要色彩。它會取樣圖片、將視覺上相近的像素分組,並為每種色彩回傳包含 HEX、RGB、HSL 與百分比數值的實用調色盤。

適合使用的情境

  • 從截圖、標誌、照片或設計稿擷取品牌或產品色彩。
  • 為登陸頁、縮圖或設計交付快速建立 CSS 調色盤。
  • 比較圖片中有多少比例由單一主要色彩主導,以及其他輔助強調色所占的比例。
  • 處理私人圖片時,不必將檔案傳送到伺服器。

匯出選項

結果可以複製為純 HEX 清單、CSS 自訂屬性或 JSON。當你需要 --palette-1 這類變數時,CSS 格式很實用;JSON 則會把色彩格式與占比一起保留,方便用於腳本或設計自動化。

注意事項

  • 調色盤擷取是近似結果。它的目的是產生實用的視覺色彩分組,而不是列出每個像素色彩的完整盤點。
  • 預設會忽略透明像素,因此圖示和去背圖片不會讓調色盤偏移;當透明度本身是作品的一部分時,請關閉這個選項。
  • 精準品質設定會取樣更多像素,在非常大的圖片上可能比較慢。