Image Color Picker
Upload a photo, click any pixel, and get its exact HEX, RGB, HSL, and CMYK codes instantly
Drop an image here
or click the button to browse
What This Image Color Picker Actually Does
Upload a picture and click any spot on it, and the tool reads that exact pixel from the canvas and shows it back to you as a large swatch, an approximate color name, and four ready-to-copy formats. Every click also generates a set of shades and tints, a complementary pairing, and five analogous colors built from the same hue, so you leave with more than a single value.
A running history keeps your last picks side by side, and the whole set can be exported at once as JSON, plain text, CSS variables, or an Adobe Swatch Exchange (ASE) file for design software. Because everything runs through the browser’s own canvas, the picture never has to leave your device or reach a server.
Step-by-Step: Picking a Color
- Add your picture. Drag a JPG, PNG, WEBP, or GIF onto the drop zone, or use Choose Image to browse for one, up to 30MB.
- Click the spot you need. The pixel under your cursor becomes the active color the moment you click, with the swatch updating instantly.
- Get in closer if needed. The zoom In and Out buttons scale the picture up, and on desktop a circular magnifier tracks your cursor so you can confirm a pixel before committing to it.
- Copy what you need. HEX, RGB, HSL, and CMYK sit in their own rows with individual copy buttons, or use Copy All Formats to grab the full set in one paste.
- Look through the related colors. Shades and tints, a complementary color, and five analogous options appear below the swatch automatically, and clicking any of them swaps in as the new active color.
- Save the set. Once a few colors are in your history, export them as CSS variables, JSON, plain text, or an ASE swatch file.
Built-In Features
Drag, Drop, or Browse
JPG, PNG, WEBP, and GIF files up to 30MB can be dropped straight onto the upload area or picked through the file browser.
Magnifier and Zoom Controls
A live magnifier follows the cursor on desktop, and dedicated zoom In, Out, and Reset buttons let you scale the canvas for pixel-level accuracy.
Touch Loupe & Eyedropper
Hold on mobile to open a draggable loupe with live color, or use the Eyedropper button on supported desktops.
Four Formats, One Click Each
Every pick is instantly converted to HEX, RGB, HSL, and CMYK, each with its own copy button, plus a convenient Copy All Formats shortcut.
Automatic Palettes
Shades, tints, a complementary tone, and five analogous colors are generated from every pick without any extra steps, giving you a complete color palette instantly.
History and Real Export Files
Recent picks stay in a clearable history, and the full set downloads as JSON, TXT, CSS variables, or an ASE file for design software, not just as a screenshot.
Why the Picked Color Can Look Slightly Off
This is the part most color picker pages skip, but it explains almost every “the color doesn’t match” complaint. A color picker only ever reports the exact pixel values stored in the file you uploaded, and two things can make that pixel different from the color you had in mind.
JPEG Compression
JPEG saves space by softening small color differences between neighboring pixels. A single point in a JPEG photo, especially near an edge or a gradient, can shift a few shades from the original scene. PNG and uncompressed screenshots do not have this problem, since every pixel is stored exactly as captured.
Screen Calibration
The RGB or HEX value the tool reports is objective and comes straight from the file, but how it looks to your eye depends on your monitor’s brightness, contrast, and color profile. The same hex code can look warmer on one screen and cooler on another, which is normal and not a fault in the reading. For the most accurate results, use the reported value rather than judging the color by appearance alone.
If exact accuracy matters, such as matching a printed swatch, pick from a PNG or an uncompressed screenshot rather than a heavily compressed JPEG, and zoom in first so the click lands on a flat area of color rather than an edge between two tones.
How Do I Find the Hex Code of a Color in a Photo?
Upload the picture into the tool above and click the exact spot you need. The HEX value appears next to RGB, HSL, and CMYK immediately, with a copy button beside it so you can paste it into CSS, a design file, or a message to a printer without retyping it.
If the area is small or sits close to a similar shade, zoom in first or watch the magnifier as you move the cursor so the click lands on the right pixel. When you already know the shade you want and would rather dial it in than sample it from a photo, the standalone Color Picker tool lets you set a hex code directly on a wheel or slider.
Turning a Few Picks Into a Full Palette
A palette rarely comes from one click. Start by picking two or three anchor colors from the photo, such as a background tone, a subject color, and an accent, then let the automatic shades, tints, complementary color, and analogous set fill in the gaps around each one. Every pick you make is added to the recent history, so you can build up a working set before deciding what to keep. Once the palette is where you want it, export it in the format your next tool actually needs rather than retyping values by hand.
| Format | Typical Use |
|---|---|
| HEX | Web design, CSS, and most design software |
| RGB | Screens and code that renders colors for digital displays |
| HSL | Adjusting lightness or saturation while keeping the same hue |
| CMYK | Print materials such as flyers, packaging, and brochures |
Common Reasons to Use an Image Color Picker
Matching a Brand’s Colors
Pull the exact hex codes from a logo or product photo so new designs stay consistent with an existing brand palette.
Recreating a Web or App Design
Grab hex or RGB values straight from a screenshot of a site or app you’re rebuilding, so the CSS colors match without guesswork.
Preparing Files for Print
Check the CMYK breakdown of a color from a photo before sending artwork to a printer, since screen colors and print colors don’t always line up.
Building a Reference Palette for Art
Sample colors from a reference photo and use the generated shades, tints, and analogous colors as a starting point for illustration or painting.
Useful Tips
Zoom Before You Click Small Areas
Thin lines or tiny details are easy to miss with a single click. Zoom in first so the cursor lands on a flat patch of color rather than an edge.
Eyedropper for Anything On-Screen
If your browser shows the Eyedropper button, it can sample a color from anywhere on your screen, not only from the uploaded image.
Export CSS Variables for Coding
Building a website from these colors? Export as CSS variables so they’re ready to paste straight into a stylesheet.
Use ASE for Adobe Apps
Working in Photoshop or Illustrator? Export your history as an ASE file and import it directly as a swatch library.
Frequently Asked Questions
How do I pick a color from an image online?
Upload your image using the drop zone or Choose Image button, then click anywhere on it. The color under your click appears instantly with its HEX, RGB, HSL, and CMYK values.
Is this image color picker free?
Yes. The tool is free to use, runs in your browser, and does not require an account or sign-up.
Which image formats can I upload?
JPG, PNG, WEBP, and GIF files are supported, up to 30MB in size.
Is my image uploaded to a server?
No. The image is read and processed entirely in your browser using canvas. It is never uploaded or stored anywhere.
Why does the picked color look different from what I expected?
Two common causes are JPEG compression softening the exact pixel value, and your monitor’s own calibration affecting how that value appears. The reported HEX or RGB code is still an accurate reading of the file itself.
What color formats does the tool give me?
Every pick is shown as HEX, RGB, HSL, and CMYK, each with its own copy button, plus a Copy All Formats option.
Can it tell me the name of a color?
Yes. The tool matches each pick against a list of common color names and shows the closest one alongside the exact values.
What is the magnifier for?
As the cursor moves over the image on desktop, a floating magnifier shows a zoomed-in view of the surrounding pixels, helping you confirm the exact spot before clicking.
How does color picking work on mobile?
A quick tap picks the color right away. Holding a finger down instead opens a loupe you can drag around to fine-tune the exact pixel before lifting to confirm.
What is the Eyedropper button?
On browsers that support it, the Eyedropper opens your system’s native color picker, letting you sample a color from anywhere on your screen, not only the uploaded image.
Can I save more than one color?
Yes. Every color you pick is added to a recent history list, so you can build up a small palette before exporting.
How do I export a color palette?
Use the Export Palette buttons to download your recent colors as a JSON file, a TXT file, a CSS variables file, or an ASE file for design software.
What are the shades, complementary, and analogous sections?
They are palettes generated automatically from whatever color you pick. Shades and tints adjust lightness, the complementary color sits opposite on the color wheel, and the analogous colors sit close to it on either side.
Can I use the keyboard instead of a mouse?
Yes. Once an image is loaded, arrow keys move a pixel-by-pixel cursor across it, Shift moves in larger steps, and Enter or Space picks the color at that position.
Does this tool work on mobile devices?
Yes. The layout and picking method both adapt for touchscreens, including the hold-and-drag loupe.