Processed locally in your browser — nothing is uploaded.
Image Color Picker
Quick answer
Click any pixel in a photo to read off its exact HEX, RGB and HSL values, or let the tool pull a ready-made dominant-color palette from the whole image automatically.
What the image color picker does
Hover over the image and a magnifier loupe zooms into the pixels under your cursor, which makes it possible to land precisely on a single pixel in a busy or low-contrast area instead of guessing. Clicking locks in that pixel and reports its color three ways at once: HEX for CSS and design tools, RGB for anything that wants channel values directly, and HSL for adjusting hue, saturation or lightness independently.
Alongside manual picking, the tool runs an automatic palette extraction that clusters the whole image down to its handful of most dominant colors, a fast path for a brand palette or a background swatch without hunting for the right pixel by hand, such as pulling five colors out of a product photo for a matching listing-page color scheme.
One limitation is worth flagging honestly: what you see on screen is not always a perfectly accurate read of the file. A color-managed display applies its own profile on top of the raw sRGB values stored in the image, and a screenshot of that display can shift again. The values reported here come from the decoded pixel data itself, the ground truth, but matching a color by eye off a screenshot of a screenshot can show small discrepancies from the original source.
How to use it
Upload the image
Add the photo or screenshot you want to sample colors from.
Hover to magnify
Move the cursor over the area you want to sample; the loupe zooms in so you can target a single pixel precisely.
Click to pick
Click to lock in that pixel and see its HEX, RGB and HSL values, with a one-click copy for each.
Review the auto palette
Check the automatically extracted dominant colors if you want a quick set of swatches rather than one specific pixel.
Your images never leave your device
Designers frequently need to match a brand color from a client-supplied product photo or an unreleased packaging mockup that has not been approved for wider viewing yet. Since the pixel sampling happens directly in your browser, that unreleased artwork never has to be handed to a third-party service just to extract a HEX code from it.
- No file is ever uploaded to a server
- Works offline after the first visit
- No account, no watermark, no limits
Format and quality tips
Zoom in before trusting a sampled color
JPEG compression smears color slightly at edges and in fine detail, so a pixel picked right at a boundary between two colors can read as a blend of both rather than either one cleanly. Use the loupe to confirm you are sampling the middle of a flat area, not an edge.
Use the dominant palette for a quick starting point, not a final decision
Automatic clustering picks the most statistically common colors, which is great for a fast palette but can miss a small, visually important accent color that only covers a few pixels, like a logo mark in the corner of a photo.
Frequently asked questions
Why does the color I picked not match what I see in another app?
Different displays and color-managed viewers can render the same sRGB values slightly differently, and a screenshot taken of the screen adds another layer of possible shift. The values reported here come from the actual decoded pixel data, not from what your monitor happens to show.
What is the difference between HEX, RGB and HSL?
They describe the same color three different ways: HEX and RGB both encode red, green and blue channel intensities, while HSL separates hue, saturation and lightness, which is often easier to adjust by hand, for example to make a color darker without changing its hue.
How does the dominant color palette get chosen?
The tool clusters all the pixels in the image by similarity and reports the largest clusters as the dominant colors, which favors colors covering more area over small but visually striking accents.
Can I pick a color from a screenshot instead of a photo?
Yes, any image file works the same way, including screenshots, though be aware a screenshot of a colored UI element can already differ slightly from that elements underlying defined color value.
Does this tool tell me the color of a printed object, not just a photo of it?
No. It reads the pixel values in the digital image you upload; lighting, camera color balance and compression during the original photo all affect how close that value is to the real-world object color.
Can I copy the picked color directly into my CSS?
Yes, the HEX value is shown in a ready-to-paste format with a one-click copy button next to it.
Further reading
- How to Watermark Photos: A Practical GuideA watermark buys you attribution and friction, not protection. Here is how to place, size and batch one so it actually reads — and an honest look at what metadata credit can and cannot do.6 min read
- How to Blur Faces and Redact Photos ProperlyA blur only protects you if the hidden pixels are gone from the exported file — and if the blur is strong enough that nobody can rebuild what was under it. Here is how to get both right.7 min read
- Favicon Sizes and Formats: A Complete GuideYou need fewer favicon sizes than most generators produce, but the ones you need are specific. Here is what each size is for, the exact HTML and manifest, and why a full logo turns to mush.6 min read