Image Color Picker
Drop an image here, paste it, or choose a fileChoose an image from your device
PNG, JPG, WebP, GIF, AVIF, BMP, SVG · never leaves your device
How to use
1.
Choose a PNG, JPG, WebP, GIF, AVIF, BMP or SVG image, drop it onto the page, or paste a screenshot from your clipboard
2.
Hover over the image to preview colors and click to pick one - on a touch screen, touch the image, drag to aim, and lift to pick
3.
Copy the HEX, RGB or HSL value from the Color panel, or click a swatch in the History panel to copy its HEX
Common uses
▸
Extracting exact brand colors from a logo or screenshot
▸
Building a color palette from a reference image
▸
Identifying a specific color from a design mockup or photo
Similar tools
Frequently asked questions
How precise is the color picker?
Each pick samples a single pixel. Small images are enlarged to fill the preview with sharp pixel edges, so every pixel is easy to hit, and on touch screens a bubble beside your finger shows the color you are aiming at. Very large images (above about 16.7 megapixels, such as 24 or 48 MP phone photos) are scaled down to fit browser canvas limits, so on those a sampled pixel can blend a few neighboring pixels of the original.
Are the values exactly what is stored in the image file?
Not always. The browser converts images to the standard sRGB color space when it draws them, so a photo with an embedded color profile (for example Display P3 from recent phones, or Adobe RGB) is reported as its sRGB equivalent rather than the raw numbers in the file. For ordinary sRGB images and screenshots the values match the file.
Is my image uploaded to a server?
No. The image is loaded and sampled entirely in your browser using the Canvas API. No image data is transmitted anywhere.
What about transparent pixels?
Semi-transparent pixels include their alpha: HEX becomes #RRGGBBAA, and RGB and HSL become rgba() and hsla() - a half-transparent red reads #FF000080 and rgba(255, 0, 0, 0.5). A fully transparent pixel is labeled Transparent, with an alpha of 0 in every value, rather than being reported as black.
How do I use the color history?
Each color you pick goes to the front of the History panel, which keeps the last 12 - picking a color again moves it to the front rather than adding a duplicate. Click or tap a swatch to copy its HEX value and make it the current color again, so its RGB and HSL values show in the Color panel. Copy all copies every HEX value, one per line, and Clear empties the history. Loading another image starts a new history.