尚未選取任何顏色
圖片預覽
將圖片拖放到這裡
或點擊瀏覽
JPG | PNG | WebP | GIF
#000000
移動滑鼠以預覽顏色 · 點擊以擷取並儲存至紀錄
目前顏色
HEX
—
RGB
—
HSL
—
色彩歷史 （最多 12 個）
什麼是圖片色彩擷取？
圖片色彩擷取可讓您將游標懸停在圖片的任意位置，立即查看該像素的精確顏色。點擊即可鎖定顏色，並複製為 HEX、RGB 或 HSL。色彩紀錄面板最多可儲存 12 個擷取的顏色，方便參考 — 適合設計師、開發人員，以及任何需要從照片或螢幕截圖中比對顏色的人。
如何使用圖片色彩擷取
- 點擊拖放區或將檔案拖曳至該區域，即可上傳任何圖片。
- 將滑鼠移到圖片上，即可在浮動標籤和側邊面板中看到即時顏色預覽。
- 點擊圖片任意位置即可擷取該顏色，並儲存至紀錄。
- 使用「複製」按鈕將 HEX、RGB 或 HSL 值複製到剪貼簿。
- 點選歷史記錄面板中的任一色票，即可將該顏色還原到主顯示區。
瞭解顏色擷取 ▾
範例
輸入
上傳品牌螢幕截圖，並將游標停留在標誌顏色上
輸出
#1A73E8 · rgb(26, 115, 232) · hsl(217, 80%, 51%) —可供複製
常見使用情境
- 從標誌或螢幕截圖辨識精確的品牌顏色
- 從相片匹配背景顏色，用於 UI 設計
- 從設計稿擷取 CSS 顏色值
- 點選多種顏色並使用歷史記錄面板，建立迷你調色盤
為何使用此工具
- 使用 Canvas getImageData 進行像素精確的顏色擷取—不進行四捨五入。
- 三種輸出格式（HEX、RGB、HSL），每種皆可一鍵複製。
- 完全在您的瀏覽器中執行—圖片永遠不會離開您的裝置。
常見問題
我的圖片會上傳到伺服器嗎？
不會。所有處理都完全在您的瀏覽器中，使用 HTML5 Canvas API 進行。您的圖片永遠不會離開您的裝置。
擷取的色彩值有多準確？
這些數值精確到像素——工具會使用 Canvas getImageData API 讀取游標下像素的確切 RGBA 值，再以數學方式轉換為 HEX、RGB 和 HSL。
這與調色盤擷取工具有何不同？
調色盤擷取工具會自動從圖片中取樣主要顏色。此工具則可讓你手動點選任一特定像素，取得其確切顏色，讓你精準控制要擷取的顏色。
複製按鈕使用哪種格式？
每種格式都會以可直接使用的字串複製：HEX 複製為 #RRGGBB，RGB 複製為 rgb(R, G, B)，HSL 複製為 hsl(H, S%, L%)。