拖放圖片至此
或點擊瀏覽 — 你也可以在本頁面任意處貼上圖片 (Ctrl+V)
懸停以放大 · 點擊記錄採樣點 · 滾動以縮放 · 拖曳以平移
放大、擷取像素顏色並記錄取樣點 — HEX、RGB、HSL 與 OKLCH。
檔案不會離開你的瀏覽器 — 全部在本機處理。
拖放圖片至此
或點擊瀏覽 — 你也可以在本頁面任意處貼上圖片 (Ctrl+V)
懸停以放大 · 點擊記錄採樣點 · 滾動以縮放 · 拖曳以平移
這是圖片取色器與檢視器的合體:一個專為圖片打造的開發者工具。載入任何圖片後,用放大鏡在你想要的位置精確擷取像素顏色 — 立即以 HEX、RGB(A)、HSL 和 OKLCH 讀出,每種格式都有一鍵複製按鈕。滾輪縮放、拖曳平移;放大後的像素依然銳利,讓你有把握鎖定單一像素,座標也一律以原始圖片的像素空間回報。
它與一般滴管工具最大的差別在於取樣點工作流程。每次點擊都會在圖上釘一個標記,並在清單中新增一列可加標籤的紀錄 — 座標、色票和 hex 值 — 整份清單可匯出成 JSON 或 CSV。這讓臨時的顏色檢查變成可重複的流程:當作設計系統的圖片色盤擷取器、在 QA 時驗證品牌色,或為遊戲 sprite 與科學影像建立顏色目錄。1 px、3 × 3 和 5 × 5 平均模式能撫平壓縮雜訊,而且全程在瀏覽器本機執行 — 你的圖片絕不會被上傳。
拖入或貼上一張圖片,然後把游標移到圖上 — 放大鏡會跟著游標移動,並以 HEX、RGB、HSL 和 OKLCH 顯示該像素的精確顏色。點擊任一處即可將該顏色鎖定為取樣點,供你複製或匯出。
每次點擊都會把該像素的座標和顏色記錄到一份可加註標籤的清單,讓你能一次從同一張圖擷取多個顏色 — 非常適合設計 QA(確認按鈕真的是 #3B82F6)、建立色票,或為遊戲美術與科學影像做標註。整組取樣點可匯出成 JSON 或 CSV。
它們決定取樣時要平均多少個像素。1 px 讀取單一精確像素;3 × 3 和 5 × 5 則平均游標周圍的小範圍,能撫平 JPEG 壓縮雜訊與 dithering,取得更具代表性的顏色。
座標一律以原始圖片的像素空間回報,而不是你的螢幕。檢視器會把縮放與顯示器的 devicePixelRatio 都納入計算,所以即使你放大或平移過畫面,(x, y) 仍然對應到來源檔案中的實際像素。
OKLCH 是 CSS 支援的現代感知色彩空間(亮度、彩度、色相)。與 HSL 不同,OKLCH 中相同的間距在人眼看來差異也相同,因此更適合建立無障礙、間距均勻的色階。這個工具會把每個取樣像素轉成 OKLCH 字串,可直接貼進 CSS。
不會。圖片完全在你的瀏覽器中以 JavaScript 和 Canvas API 解碼與檢視 — 不會離開你的裝置,頁面載入後也能離線繼續使用。
Batch convert between PNG, JPEG, WebP and GIF with live size feedback.
Encode images to Base64 data URIs and decode them back.