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 using the buttons next to each swatch.

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: Cross-origin images may taint the canvas and prevent reads. 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. Colour reading is pixel-perfect because the image is drawn to a hidden canvas at its natural resolution and getImageData returns the exact RGBA bytes under the cursor. All sampling runs in your browser using the Canvas API.

Is my image uploaded to a server?

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

How accurate is the color reading?

Pixel-perfect. The image is drawn to a hidden canvas at its natural resolution, and getImageData reads the exact RGBA bytes for the pixel under your cursor.

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.