Image Color Picker
Sample the exact HEX, RGB, or HSL of any pixel in an image.
Drop an image or click to upload
Drop any image to start sampling colours. JPEG, PNG, WebP. Up to 20 MB.
What is an Image Color Picker?
An image colour picker lets you sample the exact HEX, RGB, and HSL values of any pixel in a photograph or screenshot. Designers use it to pull a brand colour out of a competitor's logo, identify the exact shade of blue in a UI screenshot, or reverse-engineer a palette from a photograph. Photographers use it to check white-balance and expose-for-highlights calculations. It replaces the "open in Photoshop just to eyedrop one pixel" ritual that's otherwise common.
Our picker runs entirely in your browser. The image is drawn to an HTML canvas, and when your cursor moves over it we read the pixel data with getImageData() — the same API Photoshop's eyedropper does at heart. Hovering shows a live sample; clicking pins the colour to a list so you can build up a palette from multiple points. The image never leaves your device, which matters when the source is a client mockup or a private photo.
Why pick colour from an image? Brand audits (what exact blue does Stripe use?), design references (a warm tone from a sunset photo as a UI accent), moodboard palettes (five colours pulled from an architectural photo), and content audits (matching a call-to-action to a hero image). For a computed palette rather than manual picks, see our Image Colour Extractor which uses k-means clustering.
Colour formats: every pick displays in HEX (for design tools), RGB (for raw channel values), and HSL (for adjusting along a single axis). If you need more formats — RGBA, OKLCH, CMYK — copy the HEX and paste into our HEX to RGBA Converter for the full set.
Accuracy. Each pixel in a displayed image is the browser's post-decode, post-colour-profile value. For most images this matches the original file within ±1 per channel. For wide-gamut P3 or HDR sources, your browser may clip or convert to sRGB for display — in those cases the picked value reflects what's on-screen, not the file's original storage. For pixel-perfect colour pipelines in print or HDR workflows, use a dedicated colour-managed tool.
How to pick a colour from an image
- Upload an image. JPEG, PNG, WebP — anything the browser can render.
- Hover to see a live sample of the current pixel.
- Click to pin the colour to the side panel.
- Copy HEX or read RGB and HSL for each pick.
- Pin up to 10 picks to build a reference palette.
Features
- Hover-to-sample live preview.
- Click-to-pin list (up to 10 recent picks).
- HEX / RGB / HSL for every sample.
- Works on any browser-renderable image.
- Runs in your browser — no uploads.
Frequently asked questions
- How accurate is the colour sample?
- It reads the pixel exactly as the browser has decoded it. For standard sRGB images you'll get the file's exact value within ±1 per channel. Wide-gamut P3 or HDR images may be clipped to sRGB for display, in which case the picked value reflects what's on-screen.
- Can I pick colours from a screenshot?
- Yes. Any browser-renderable image works — screenshots, photos, UI mockups, illustrations. Paste a screenshot directly or upload the saved file.
- Why is the cursor changing colour in real time?
- The cursor preview reads the pixel directly under the mouse every time you move. Click to pin that colour if you want to keep it; otherwise it updates continuously.
- How do I get the colour in RGBA / OKLCH?
- Copy the HEX and paste it into our HEX to RGBA Converter — it outputs every format including OKLCH, HSV, and CMYK.
- Is there a limit on image size?
- 20 MB per image. The canvas downscales to 960px wide internally to keep memory usage reasonable; the sampled colour still matches the original pixel faithfully.