How to find the color of an image (5 methods)
The fastest way to find the color of an image is to open a digital eyedropper, point at the pixel you care about and copy the code. You can do it right in your browser, with nothing to install, using the image color picker on this site: upload or paste the image, click the spot you want and get the value in HEX, RGB, HSL, HSV and CMYK.
If you already work in a design app or in DevTools, you can solve it there too. Below are five methods, from the simplest to the most specialized, plus the built-in operating system shortcuts and the details that make sure the code you capture is really the color you see.
Method 1: the online tool on this site
This is the way to go when you have a file, a screenshot or a photo and want the code without opening heavy software. Everything happens inside the browser.
- Load the image. Click the upload area and choose a file, drag the image onto it, or paste from the clipboard with
Ctrl+V(Cmd+Von a Mac). Pasting is the shortcut for screenshots: take the screenshot and paste it straight into the page. - Use the magnifier. As you move the cursor over the image, a loupe shows the enlarged pixels around the pointer. That keeps you from accidentally clicking the edge of a letter or a shadow.
- Click the pixel. The color is locked in and the codes appear in several formats, each with its own copy button.
- Grab colors outside the image if needed. The “Pick from screen” button opens the system eyedropper (the EyeDropper API, available in desktop Chrome and Edge) so you can sample any visible point, even in another window.
The tool also shows the closest named color. If you clicked a dark blue and the result points to navy blue, that color’s page gives you ready-made combinations and variations.
Method 2: the browser eyedropper
If you build websites, your browser already ships with an eyedropper. It’s handy for grabbing the color of anything on a web page: a button, a background or an image.
Chrome and Edge
- Open DevTools with
F12orCtrl+Shift+I(Cmd+Option+Ion a Mac). - In the Styles pane of any element, click the small color swatch next to a property such as
colororbackground-color. - In the color picker that opens, turn on the eyedropper icon and click anywhere on the page. The property now holds the sampled color, and you can switch the displayed format (HEX, RGB, HSL and more) inside the picker.
Both browsers also implement the EyeDropper API, which lets a website open the system eyedropper with one click. That API is what powers the “Pick from screen” button in the previous method. It isn’t available in Firefox or Safari yet; check MDN for current details.
Firefox
Firefox has its own eyedropper in DevTools. In the Inspector, look for the eyedropper icon in the toolbar: when it’s active, a magnifier follows the cursor, and clicking copies the HEX code to the clipboard. The color picker in the Rules view has an eyedropper too, just like in Chrome.
Keep in mind: the browser eyedropper reads the color as rendered on screen. If the image is scaled down, has a CSS filter or sits behind a semi-transparent layer, you get the final composited color, not the original pixel in the file.
Method 3: Photoshop
Photoshop lets you control the sampling area, which matters a lot with photographs.
- Select the Eyedropper tool from the toolbar or press
I. - In the options bar, set the Sample Size. “Point Sample” reads one exact pixel; the 3 × 3 and 5 × 5 Average options average the surrounding pixels, which smooths out noise and grain.
- Click the image. The color becomes the foreground color, visible in the Color panel and at the bottom of the toolbar.
- Click the foreground swatch to open the Color Picker. There you’ll find a HEX field (marked with
#) along with RGB, HSB, Lab and CMYK values that you can select and copy.
Tip: hold the mouse button down and drag with the Eyedropper to update the color live, then release when you land on the right shade.
Method 4: Figma
In Figma, the eyedropper lives inside the color picker of any fill or stroke.
- Select a layer and click the fill swatch in the properties panel.
- In the picker, click the eyedropper icon or press
I. - Hover over the image (a loupe shows the pixels) and click. The layer takes the color, and its HEX code appears in the picker field, ready to copy.
If you only want to read the color without changing a real layer, apply it to a temporary rectangle and delete it afterward. With fine details, zoom in on the canvas before clicking so you hit the right pixel.
Method 5: on your phone
On a smartphone there are two very different situations:
- An image already on your device (a photo, a screenshot, artwork someone sent you): open the online color picker in your mobile browser, upload the image from your gallery and tap the spot you want. No app needed. The pick-from-screen button depends on the EyeDropper API, so it isn’t available in mobile browsers.
- A real-world object (a wall, fabric, packaging): this is where camera color apps come in, such as Adobe Capture and similar tools. They give you a useful reference, but the reading depends on ambient light, white balance and the camera’s processing. A white wall under warm light comes out yellowish in a photo. For exact physical color, a printed swatch book or a colorimeter is still the standard.
Operating system shortcuts
Sometimes the color is in an app that has no eyedropper at all. Both major desktop systems have a fix:
- Windows, PowerToys Color Picker: after installing PowerToys (free, from Microsoft) and enabling the Color Picker module, press
Win+Shift+C. A magnifier appears over the screen; click and the code is copied in your configured format (HEX by default) and saved to a history. - macOS, Digital Color Meter: it comes preinstalled, in the Utilities folder inside Applications. It shows the values of the pixel under the cursor in real time. Pick the color space to display (for example, sRGB) and the value format from the app’s menus, and use its own options to lock the position and copy the color.
Why the sampled color may not match
It’s common to click two areas that look “the same color” and get different codes. The usual suspects:
| Cause | What happens | How to work around it |
|---|---|---|
| JPEG compression | The format groups pixels into blocks and discards detail, creating variations and artifacts near edges. | Use PNG or the original file; click in the middle of flat areas. |
| Antialiasing | Edges of text and icons blend the color with the background to smooth the outline. | Use the magnifier and pick a pixel inside the shape, not on the edge. |
| Noise and texture | Photos vary naturally from pixel to pixel. | Use area averaging (3 × 3 or 5 × 5) or the palette extractor. |
| Color profiles | An image in Display P3 or Adobe RGB may be converted to sRGB for display, which changes the numbers. | Export in sRGB for the web and compare within the same color space. |
| Monitor and night mode | Blue-light filters, True Tone and calibration change what you see, not the value in the file. | Trust the code, not your eyes; turn filters off when comparing visually. |
A practical example: a logo’s orange might be #FF5733, that is, rgb(255, 87, 51). In a heavily compressed JPEG, neighboring pixels may read as #FE5834 or #FF5631. A difference of one or two units per channel is invisible, but if you need a brand’s official value, look for its brand guidelines instead of relying on a sample alone.
What to do once you have the color
With the code in hand, the most common next steps are:
- Extract the whole palette. If the image is a style reference, the color palette extractor finds the dominant colors in one go, no pixel-by-pixel clicking.
- Convert to another format. The color converter turns HEX into RGB, HSL, CMYK and more. To understand what each format means, read the guide to HEX, RGB and HSL color codes.
- Send it to print. A value sampled from the screen is RGB; before handing it to a printer, read RGB vs CMYK.
- Build combinations. Starting from one base color, the color harmony guide shows how to reach complementary and analogous schemes.
Summary
- For most cases, use the image color picker: upload or paste with
Ctrl+V, use the magnifier and click. - For colors on web pages, the DevTools eyedropper (Chrome, Edge and Firefox) does the job without leaving the browser.
- In Photoshop, press
Iand choose between point sample and averaging; in Figma, pressIinside the color picker. - For any app, use PowerToys (
Win+Shift+C) on Windows or Digital Color Meter on macOS. - Avoid edges and compressed areas, average samples in photos and check the color space.
Want to go further? Browse the list of colors with their own pages or the other color guides.