Grab exact colors from any image
Your client sends over a mood board. “Match these colors.” No hex codes. No brand guide. Just a photo of a sunset and a vague email saying “this vibe.” You need the actual color values. Right now.
Upload the image. Click on the exact shade of orange in that sunset. Boom: #E87B35, rgb(232, 123, 53). Copy it. Paste it into your CSS. Done. No eyeballing, no guessing, no “close enough.” The Canvas API reads the exact pixel value at the point you clicked.
Everything happens in your browser. The image loads locally, gets drawn to a hidden canvas, and the tool reads pixel data directly from that canvas. Your photo never touches a server.
Using the picker
- Upload an image with “Choose File”.
- Click anywhere on the image.
- Read the HEX and RGB values next to the color swatch.
- Hit Copy to grab the value.
Click again somewhere else to pick a different color. Simple as that.
What you’re working with
- Pixel-perfect accuracy: reads the exact color at the exact pixel you click, via the Canvas API
- HEX and RGB output: the two formats you’ll actually use in code and design tools
- Works with any format: PNG, JPEG, WebP, GIF, BMP, anything your browser renders
- Fully client-side: your image stays on your device
- One-click copy: color value goes straight to your clipboard
Scenarios where this is clutch
Matching a design mockup to code. Your designer sent a Figma screenshot but you don’t have Figma access. You need the exact header background color and the CTA button shade. Upload the screenshot, click on each element, get the hex codes. Takes ten seconds.
Building a color palette from a photograph. You’re designing a website for a vineyard. They want the colors to feel like their landscape, the green of the vines, the brown of the soil, the blue of the sky. Upload a photo of the vineyard. Click on each element. You’ve got a palette that genuinely comes from the place itself.
Brand consistency audits. Something looks off on the website. Is the blue in the footer actually #1A73E8 like the brand guide says, or has someone used #2B7DE9? Screenshot the page, upload it, click on the blue. Now you know.
Interior design and fashion work. Trying to match a paint swatch to a fabric sample? Or find the exact shade in a reference photo to share with a vendor? This gives you the digital color value you can communicate precisely.
Accessibility contrast checking. You need the foreground and background colors from a UI screenshot to run a WCAG contrast ratio calculation. Click on the text, get its color. Click on the background, get its color. Feed both into a contrast checker.
For grayscale conversion, there’s the Image Grayscale tool. The Image Metadata Viewer can reveal color profile information that might explain why colors look different between screens.
Color picker questions
How accurate is this?
Perfectly accurate for the image as rendered in your browser. The Canvas API reads the exact RGBA values at the pixel coordinate you clicked. What you see is what you get, no approximation.
Can I get HSL or CMYK values?
This tool outputs HEX and RGB. For HSL, you can convert with a quick formula or use a color format converter tool. CMYK conversion depends on your color profile, so that’s better handled in print-focused software like InDesign.
Does the image get uploaded?
Not a byte leaves your device. The image is loaded into a canvas element in your browser, and pixel data is read from that canvas using JavaScript. Completely local.
Why does the color look different on my other monitor?
Monitor calibration, color profiles, panel technology, ambient lighting, a ton of factors affect how a color appears on screen. The HEX value is the definitive digital representation. Two properly calibrated monitors will show it identically. Two uncalibrated ones might look quite different.
Can I pick colors from a screenshot?
Absolutely. Screenshots are just images. Take a screenshot, save it, upload it here, and click away. It’s actually one of the most common uses, grabbing colors from a UI that you can’t inspect with dev tools.