# Image Color Picker & Inspector

> 免費的線上圖片取色器與檢視器。放大任何圖片、以 HEX、RGB、HSL 和 OKLCH 讀取像素顏色、記錄含座標的取樣點，並把色票匯出成 JSON 或 CSV — 全部在你的瀏覽器中完成。

- URL: https://bytescope.dev/zh-Hant/image-inspector/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/image-inspector.md) · [ja](https://bytescope.dev/ja/image-inspector.md)
- Runs: 檔案不會離開你的瀏覽器 — 全部在本機處理。
- Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile.
- Updated: 2026-09-08

## What it does

這是圖片取色器與檢視器的合體：一個專為圖片打造的開發者工具。載入任何圖片後，用放大鏡在你想要的位置精確擷取像素顏色 — 立即以 HEX、RGB(A)、HSL 和 OKLCH 讀出，每種格式都有一鍵複製按鈕。滾輪縮放、拖曳平移；放大後的像素依然銳利，讓你有把握鎖定單一像素，座標也一律以原始圖片的像素空間回報。

它與一般滴管工具最大的差別在於取樣點工作流程。每次點擊都會在圖上釘一個標記，並在清單中新增一列可加標籤的紀錄 — 座標、色票和 hex 值 — 整份清單可匯出成 JSON 或 CSV。這讓臨時的顏色檢查變成可重複的流程：當作設計系統的圖片色盤擷取器、在 QA 時驗證品牌色，或為遊戲 sprite 與科學影像建立顏色目錄。1 px、3 × 3 和 5 × 5 平均模式能撫平壓縮雜訊，而且全程在瀏覽器本機執行 — 你的圖片絕不會被上傳。

## Limits

Does not edit the image; it decodes headers, chunks and metadata for inspection.

## FAQ

### 如何從圖片中擷取顏色？

拖入或貼上一張圖片，然後把游標移到圖上 — 放大鏡會跟著游標移動，並以 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 解碼與檢視 — 不會離開你的裝置，頁面載入後也能離線繼續使用。

## Related tools

- [Image Format Converter](https://bytescope.dev/zh-Hant/image-convert.md) — PNG、JPEG、WebP、GIF 之間可以整批互轉，檔案大小立刻看得到。
- [Image ↔ Base64 Converter](https://bytescope.dev/zh-Hant/image-base64.md) — 把圖片編成 Base64 data URI，也能再解回圖片。