# Image Color Picker & Inspector > Free online image color picker: magnify any image, read pixel colors in HEX, RGB, HSL and OKLCH, and export the sampled palette as JSON or CSV. All local. - URL: https://bytescope.dev/en/image-inspector/ - Locale: en · Also: [ja](https://bytescope.dev/ja/image-inspector.md) · [zh-Hant](https://bytescope.dev/zh-Hant/image-inspector.md) - Runs: Your files never leave your browser — all processing is local. - Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile. - Updated: 2026-09-08 ## What it does This is an image color picker and inspector rolled into one: a developer tool for images. Load any picture, then use the magnifying loupe to get the pixel color from an image at the exact spot you want — read out instantly in HEX, RGB(A), HSL and OKLCH, each with a one-click copy button. Zoom in with the scroll wheel and pan by dragging; magnified pixels stay razor-sharp so you can target a single pixel with confidence, and coordinates are always reported in the original image's pixel space. What sets it apart from a plain eyedropper is the sample-point workflow. Every click pins a marker to the image and adds a labelled row — coordinate, swatch and hex — to a list you can export as JSON or CSV. That turns a quick color check into a repeatable process: use it as an image color palette extractor for design systems, verify brand colors during QA, or catalog colors across game sprites and scientific imagery. The 1 px, 3 × 3 and 5 × 5 averaging modes tame compression noise, and everything runs locally in your browser — your images are never uploaded. ## Limits Does not edit the image; it decodes headers, chunks and metadata for inspection. ## FAQ ### How do I pick a color from an image? Drop or paste an image, then move your cursor over it — a magnifying loupe follows the pointer and shows the exact pixel color in HEX, RGB, HSL and OKLCH. Click anywhere to lock that color in as a sample point you can copy or export. ### What is the sample-point list for? Every click records the pixel's coordinate and color to a list you can label, so you can capture several colors from one image at once — perfect for design QA (checking a button really is #3B82F6), building a color palette, or annotating game art and scientific images. Export the whole set as JSON or CSV. ### What do the 1 px, 3 × 3 and 5 × 5 sampling modes do? They set how many pixels are averaged when you sample. 1 px reads a single exact pixel; 3 × 3 and 5 × 5 average a small window around the cursor, which smooths out JPEG compression noise and dithering so you get a more representative color. ### Why does the tool show coordinates instead of screen position? Coordinates are always reported in the original image's pixel space, not your screen. The inspector accounts for zoom and your display's devicePixelRatio, so (x, y) matches the actual pixel in the source file even when you have zoomed in or panned around. ### What is OKLCH and why include it? OKLCH is a modern perceptual color space (lightness, chroma, hue) supported by CSS. Unlike HSL, equal steps in OKLCH look equally different to the eye, which makes it far better for building accessible, evenly-spaced color scales. This tool converts every sampled pixel to an OKLCH string you can paste straight into CSS. ### Are my images uploaded to a server? No. The image is decoded and inspected entirely in your browser with JavaScript and the Canvas API — it never leaves your device, and the page keeps working offline once loaded. ## Related tools - [Image Format Converter](https://bytescope.dev/en/image-convert.md) — Batch convert between PNG, JPEG, WebP and GIF with live size feedback. - [Image ↔ Base64 Converter](https://bytescope.dev/en/image-base64.md) — Encode images to Base64 data URIs and decode them back.