ByteScope

Image Color Picker & Inspector

放大、擷取像素顏色並記錄取樣點 — HEX、RGB、HSL 與 OKLCH。

檔案不會離開你的瀏覽器 — 全部在本機處理。

Drop an image here

or click to browse — you can also paste an image (Ctrl+V) anywhere on this page

hover to magnify · click to record a sample point · scroll to zoom · drag to pan

關於這個工具

這是圖片取色器與檢視器的合體：一個專為圖片打造的開發者工具。載入任何圖片後，用放大鏡在你想要的位置精確擷取像素顏色 — 立即以 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 取樣模式有什麼差別？
它們決定取樣時要平均多少個像素。1 px 讀取單一精確像素；3 × 3 和 5 × 5 則平均游標周圍的小範圍，能撫平 JPEG 壓縮雜訊與 dithering，取得更具代表性的顏色。
為什麼工具顯示的是座標而不是螢幕位置？
座標一律以原始圖片的像素空間回報，而不是你的螢幕。檢視器會把縮放與顯示器的 devicePixelRatio 都納入計算，所以即使你放大或平移過畫面，(x, y) 仍然對應到來源檔案中的實際像素。
什麼是 OKLCH？為什麼要提供它？
OKLCH 是 CSS 支援的現代感知色彩空間（亮度、彩度、色相）。與 HSL 不同，OKLCH 中相同的間距在人眼看來差異也相同，因此更適合建立無障礙、間距均勻的色階。這個工具會把每個取樣像素轉成 OKLCH 字串，可直接貼進 CSS。
我的圖片會被上傳到伺服器嗎？
不會。圖片完全在你的瀏覽器中以 JavaScript 和 Canvas API 解碼與檢視 — 不會離開你的裝置，頁面載入後也能離線繼續使用。

相關工具