Image Color Picker
Upload your image, click to pick any color, and copy the exact color codes seamlessly in seconds
Drop an image here
or click the button to browse
Explore Related Image Tools
Boost your workflow with our secure, fast, and privacy-focused utility tools.
What This Image Color Picker Actually Does
Upload any photo, screenshot, or design file and click on the exact spot you need. The tool reads the precise pixel value at that point and instantly converts it into HEX, RGB, HSL, and CMYK at the same time, so you never have to reformat a value by hand before pasting it into your CSS file, your design software, or a client email.
Supported formats are JPG, PNG, WEBP, and GIF, with a file size limit of 30MB, which comfortably covers a phone screenshot, a product photo, or a high resolution export from a design tool.
Every Format, One Click Away
Each color value sits in its own row with a dedicated copy button next to it, so grabbing just the HEX code or just the CMYK breakdown takes one click. A “Copy All Formats” option is also available when you want every value at once, ready to paste into documentation or a design brief.
Pixel Level Precision on Desktop
Moving your mouse across the uploaded image brings up a live circular magnifier that follows your cursor. It shows a zoomed in view of the pixels around your pointer before you click, which matters when you’re sampling a thin line, a gradient edge, or fine detail in a small icon.
Built for Touch, Not Just Adapted to It
A finger can’t hover the way a mouse cursor can, so touch devices use a different approach entirely. A quick tap picks a color instantly, which means normal page scrolling keeps working exactly as expected. Press and hold on the image for a moment instead, and a magnified loupe appears above your finger, letting you fine tune your exact position before lifting to confirm the pick.
Native Eyedropper Support
If your browser supports the EyeDropper API, an extra eyedropper button appears next to the color swatch. This lets you sample a color from anywhere on your screen, not just inside the uploaded image, which is useful for matching something open in a different tab or application.
Browser Support for the Eyedropper Feature
The native eyedropper button only appears in browsers that currently support the underlying EyeDropper API. The image click and touch picking methods described above work identically everywhere, so this only affects the extra screen-wide sampling option.
| Browser | Eyedropper Button | Notes |
|---|---|---|
| Chrome (Desktop) | Supported | Samples any pixel on screen, not just the image |
| Edge (Desktop) | Supported | Same engine as Chrome, same support |
| Firefox | Not yet supported | Use click-on-image picking instead |
| Safari | Not yet supported | Use click-on-image picking instead |
| Mobile Browsers | Not applicable | Use tap or press-and-hold loupe instead |
If the eyedropper button is missing on your setup, nothing else about the tool changes. Clicking or tapping directly on the uploaded image still reads the exact pixel color the same way.
No Uploads, No Waiting, No Signup
Everything described above happens using your browser’s own canvas and file handling capabilities. When you choose an image, it is read locally using the FileReader API and drawn to a canvas element in your browser. There is no step where the image travels to a server for processing, and no file is stored anywhere outside your own device. This matters if you are working with client photos, internal design assets, or anything else you would rather not upload to a third party just to check a color value.
Because there is no server round trip involved, the tool also responds immediately. There is no progress bar to wait through and no queue, since the entire operation is just reading pixel data that is already sitting in your browser’s memory.
Beyond a Single Color – Palettes and Relationships
Picking one color is usually just the starting point. Once you select a color, the tool automatically builds a few reference palettes underneath your result, so you don’t need a second tool to explore what goes with it.
Shades and Tints
The same hue is shown across nine lightness steps, from near white to near black. This is the fastest way to find a slightly darker border color or a lighter hover state without opening a separate color tool.
Complementary Color
The color sitting directly opposite your pick on the color wheel is calculated automatically, a common starting point for high contrast designs and call-to-action buttons.
Analogous Colors
Five hues sitting close to your original on the wheel are generated as well. These tend to blend naturally together in the same design without clashing, useful when building a cohesive palette from a single reference photo.
Nearest Color Name
The tool also matches your picked color against a list of common, recognizable color names. This is meant as a quick descriptive reference, since color naming itself is subjective, rather than a scientific classification. It’s a fast way to describe a shade to a client or teammate without reading out a hex code.
Keeping Track of Your Picks
Design work rarely involves picking just one color and moving on. You sample a background, then a text color, then an accent, then maybe go back to compare the first two. To support this, the tool keeps a running history of your last several picks, shown as small clickable dots. Selecting any dot instantly reloads that color into the main display, along with its full set of values and palettes, so you can jump back and forth without re-sampling the image. When you’re done with a session, clearing the history takes one click.
Common Ways People Use This Tool
Developers use it to grab exact brand colors from a screenshot of a client’s existing website before rebuilding it. Designers use it to sample a color from a mood board photo and immediately see what shades and complementary tones pair well with it. Illustrators and digital artists use it to match a reference photo’s palette when starting new artwork. Marketers building social graphics use it to pull a color straight from a product photo so their promotional banner matches exactly. And plenty of people use it simply out of curiosity, wanting to know the precise hex code behind a color they liked in a photo.
How to Use the Image Color Picker
Exporting Your Palette
Once you’ve built up a small collection of colors from an image, you’ll usually want to take them somewhere else. Four export formats cover the range designers and developers commonly need.
| Format | Best For |
|---|---|
| JSON | Feeding a palette into a script or a design system tool |
| TXT | Quick documentation or handing a palette to a non-technical teammate |
| CSS Variables | Dropping straight into a stylesheet as custom properties |
| ASE (Adobe Swatch Exchange) | Importing directly into Photoshop, Illustrator, or InDesign |
A Few Honest Limitations
The nearest color name feature is matched against a fixed list of commonly known names, so unusual or very subtle shades will be labeled by their closest match rather than a precise, unique name. The native eyedropper button only appears in browsers that support the EyeDropper API, currently desktop Chrome and Edge, so Firefox and Safari users will rely on clicking directly within the uploaded image instead. And while the 30MB file size limit covers the vast majority of photos and screenshots, extremely large uncompressed files will need to be resized before upload.
Working Alongside Other Penpost Tools
If you frequently need to pick colors without starting from an uploaded photo, for example when you already know the shade you want and just need to explore variations or convert between formats, the standalone Color Picker tool on Penpost is built for that exact case.
If the image you want to sample from needs a bit of preparation first, such as cutting out a specific section before you upload it, the Image Cropper can trim it down to just the area you care about. And if your source photo is oversized and loading slowly in the picker, running it through the Image Resizer first will make the whole process smoother.
Final Thoughts
Matching a color exactly used to mean either guessing, or opening heavyweight design software for a task that takes two seconds. An image color picker built specifically for this job removes that friction entirely. Upload an image, click where you need to, and walk away with every format you need, along with the shades, tints, and complementary colors to build a full palette around it. Since it runs entirely in your browser, there’s nothing to install, nothing to sign up for, and nothing about your image ever leaves your device.
Frequently Asked Questions
Yes, the tool is completely free with no signup or account required. You can upload as many images and pick as many colors as you like.
No. The entire process happens locally in your browser using canvas and file reading APIs. Your image is never sent anywhere, which makes this a safe option for client work or private photos.
JPG, PNG, WEBP, and GIF are supported, with a maximum file size of 30MB per image.
Every pick is shown in HEX, RGB, HSL, and CMYK at the same time, and each format has its own copy button so you can grab exactly what you need.
Yes. Tapping the image picks a color instantly, and pressing and holding brings up a magnified loupe so you can fine tune your exact position before lifting your finger to confirm.
A mouse can hover over the image continuously, so the magnifier follows your cursor in real time. A finger cannot hover the same way, so the tool uses a press and hold gesture instead, which also keeps normal page scrolling working as expected.
That button uses your browser’s native EyeDropper API, which lets you sample a color from anywhere on your screen, not just the uploaded image. It currently works in desktop Chrome and Edge. If your browser does not support it, the button simply will not appear, and you can still pick colors by clicking directly on the image.
The name is matched against a list of common, recognizable colors, so it is meant as a helpful description rather than an exact scientific label. Two very close shades might both be labeled with the same nearest name.
Yes. You can export your color history as a JSON file, a plain TXT file, a CSS variables file, or an ASE file for use in Adobe applications like Photoshop and Illustrator.
Yes, your recent picks are shown as small clickable dots so you can jump back to an earlier color without re-sampling the image. This history clears when you refresh the page or click the clear button, since nothing is stored permanently.
Yes. Once an image is loaded, you can move a virtual cursor across it using the arrow keys and press Enter or Space to pick the color at that position.
No. Zooming only changes how the image is displayed so you can see fine detail more easily. The color value read at any point is always based on the actual pixel data of the original image.