Where is the image read when I click a pixel?

In this tab. The image is drawn once onto a hidden canvas, and each click reads one pixel from it with getImageData. Our servers are not involved at any point.

How accurate is the color reading?

Pixel-level. The tool draws the image at its natural resolution to a hidden canvas, and getImageData reads the pixel under your cursor. The browser converts images with an embedded color profile (such as Display P3 phone photos) to sRGB first, and semi-transparent pixels can shift slightly, so a value can differ a little from the number stored in the file.

Why are hex, RGB, and HSL all shown?

Hex is convenient for CSS and design tokens, RGB matches what most image editors display, and HSL is useful when you want to tweak hue, saturation, or lightness without rewriting the whole color.

Does it work on mobile?

Yes. Touch and drag across the image to see live color updates, with a magnifier showing the exact pixel you are sampling. Tap a history swatch to bring it back, then copy its value.

Can I sample colors from screenshots?

Yes. Drop a screenshot of any UI, photo, or design file into the picker and click to read brand colors, accent shades, or background tones.

Color Picker from Image

Drop any image and click anywhere on it to read the color at that pixel. The tool returns hex, RGB, and HSL values, keeps a history of your recent picks, and lets you copy any value with one tap. All processing runs in your browser using the Canvas API.

Drop an image or click to choose

JPG, PNG, WebP, GIF, SVG, AVIF. Runs in your browser.

CURRENT PICK

Choose an image to begin.

HOVER

#000000

Hover over the image.

ACTIONS

Runs entirely in your browser

How it works

The tool draws your image to a hidden HTML canvas at its natural resolution. When you click a pixel, the Canvas API call ctx.getImageData(x, y, 1, 1).data returns the RGBA values of that pixel, after the browser has converted any embedded color profile to sRGB. Those values are formatted as hex, RGB, and HSL, and the color is added to a small history strip of recent picks.

Processing runs in your browser

All color sampling happens locally in your browser tab using the Canvas API. Our servers are not involved at any point.

Frequently asked questions

Where is the image read when I click a pixel?: In this tab. The image is drawn once onto a hidden canvas, and each click reads one pixel from it with getImageData. Our servers are not involved at any point.
How accurate is the color reading?: Pixel-level. The tool draws the image at its natural resolution to a hidden canvas, and getImageData reads the pixel under your cursor. The browser converts images with an embedded color profile (such as Display P3 phone photos) to sRGB first, and semi-transparent pixels can shift slightly, so a value can differ a little from the number stored in the file.
Why are hex, RGB, and HSL all shown?: Hex is convenient for CSS and design tokens, RGB matches what most image editors display, and HSL is useful when you want to tweak hue, saturation, or lightness without rewriting the whole color.
Does it work on mobile?: Yes. Touch and drag across the image to see live color updates, with a magnifier showing the exact pixel you are sampling. Tap a history swatch to bring it back, then copy its value.
Can I sample colors from screenshots?: Yes. Drop a screenshot of any UI, photo, or design file into the picker and click to read brand colors, accent shades, or background tones.

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to image tools
Step by step: Build a color system for a design project