圖片色票擷取器

使用說明

上傳 PNG、JPEG、WebP 或 AVIF 圖片,工具會在瀏覽器中擷取最多 8 個近似主要色,並提供可複製與下載的色碼。

從選取的圖片擷取代表性色票,點擊色票複製 HEX 色碼,或下載包含 HEX、RGB、HSL 與 CSS 變數的文字報告。

💡 3 步驟快速上手

① 選擇圖片

使用檔案選擇器載入 PNG、JPEG、WebP 或 AVIF 圖片。

② 檢視擷取色票

工具會自動分析圖片,顯示代表性色票與 HEX/RGB 報告;結果不代表所有像素的精確配色。

③ 複製 HEX 或下載報告

點擊色票複製其 HEX 色碼,或按「下載色票」取得 image-color-palette.txt 文字報告,查看 RGB、HSL 與 CSS 變數。

適用情境

適合從照片、插圖或介面截圖快速整理配色參考。

計算或處理方式

工具先把圖片縮小到不超過 96 × 96 像素取樣,略過透明度低於 128 的像素,再將 RGB 色階量化並依出現次數與色彩度排序,最多保留 8 色。

具體範例

上傳一張室內照片,從擷取結果複製牆面與家具的 HEX 色碼,或下載包含 HEX、RGB、HSL 與 CSS 變數的文字檔。

限制與資料處理

圖片會縮小取樣並量化色階,透明度低於 128 的像素會略過,因此漸層、透明區域與面積較小的顏色可能被合併或忽略。無法解碼或超過限制的圖片不會產生色票;EXIF 等圖片中繼資料不會成為色票內容。讀檔時沒有獨立取消按鈕,改選檔案會忽略舊結果。

圖片解碼、取樣、色票整理與文字檔產生都在目前瀏覽器中完成,不會把圖片或擷取結果傳送到 GoGo Tools 後端。

圖片色票擷取器使用指南

操作與限制

使用檔案選擇器載入 PNG、JPEG、WebP 或 AVIF 圖片。

工具會自動分析圖片,顯示代表性色票與 HEX/RGB 報告;結果不代表所有像素的精確配色。

點擊色票複製其 HEX 色碼,或按「下載色票」取得 image-color-palette.txt 文字報告,查看 RGB、HSL 與 CSS 變數。

剪貼簿複製需瀏覽器允許;請確認已複製提示。複製按鈕只提供 HEX,RGB 可從文字報告讀取。

照片光線、圖片取樣與色彩分組會影響結果;正式設計前請在目標背景上檢查配色與對比。

常見問題

圖片色票擷取器:可以使用哪些圖片?

可使用 20 MB 以下且總像素不超過 3,200 萬的 PNG、JPEG、WebP 或 AVIF 圖片。色票數量固定為最多 8 色,沒有調整選項。

圖片色票擷取器:會提供哪些色彩資料?

結果顯示最多 8 個近似主要色,可逐一複製 HEX;下載文字檔另含 RGB、HSL 與 CSS 變數。

圖片色票擷取器:為什麼有些顏色沒有出現?

圖片會縮小取樣並量化色階,透明度低於 128 的像素會略過,因此漸層、透明區域與面積較小的顏色可能被合併或忽略。無法解碼或超過限制的圖片不會產生色票;EXIF 等圖片中繼資料不會成為色票內容。讀檔時沒有獨立取消按鈕,改選檔案會忽略舊結果。

圖片色票擷取器:圖片或色票會上傳嗎?

圖片解碼、取樣、色票整理與文字檔產生都在目前瀏覽器中完成,不會把圖片或擷取結果傳送到 GoGo Tools 後端。