Image Color Picker

How to pick a color from an image

1. Drop an image on the upload area or click to choose a file.
2. Move the pointer over the image to preview colors, or tap on mobile.
3. Click a pixel to lock the color into the history strip.
4. Copy the hex, RGB, or HSL value with the Copy button next to each value.

Common uses

• Sampling brand colors from a logo so you can recreate them in CSS, then drop the values into a color palette generator
• Identifying accent shades from a screenshot of an existing website or app design
• Matching a photo's mood by picking dominant tones for a background or theme color
• Building a quick reference of colors from a moodboard image, then passing them to a contrast checker

Technical specification

• Algorithm or formula: Image is drawn to a hidden canvas at natural resolution. The pointer position is mapped to canvas coordinates, then getImageData(x, y, 1, 1) returns the RGBA bytes for the sampled pixel. HSL is derived from RGB with the standard cylindrical-coordinate formula.
• Browser API or library: Canvas 2D API (getImageData). No external library.
• Input limits: Image files up to 50 MB and 50 megapixels.
• Output: Hex, RGB, and HSL values per pick, plus a history strip of the last five unique colors.
• Known limitations: Transparency is ignored: a semi-transparent pixel reports its color before blending, and a fully transparent pixel reads as #000000. Color values are sRGB; wide-gamut images are read in the canvas's default color space.

Frequently asked questions

What color values does the picker return?

Hex, RGB, and HSL are shown for every pick, each with its own copy button. Each pick reads the pixel under your cursor from a hidden canvas drawn at the image's natural resolution. All sampling runs in your browser using the Canvas API.

Is my image uploaded to a server?

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

How accurate is the color reading?

Pixel-level. The image is drawn to a hidden canvas at its natural resolution, 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.

Does it work on mobile?

Yes. Drag a finger across the image to see live updates with a magnifier showing the sampled pixel. Tap to lock the color into the history strip.

How many colors can I keep in history?

The last five unique picks are kept in the history strip. Click any swatch to bring it back into the main display.