ByteScope

Image Color Picker & Inspector

Magnify, pick pixel colors, and record sample points — HEX, RGB, HSL and OKLCH.

Your files never leave your browser — all processing is local.

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

About this tool

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.

Frequently asked questions

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