- Category:
- Workflow Tips
- Summary:
- The eyedropper tool lets you pick colors from any image or screen in Photoshop, Figma and online editors to ensure precise matches and efficient workflow.
An eyedropper tool samples a color from an image or your screen and returns its numeric code — HEX, RGB, HSL, or others. It is a color picker, color sampler, or simply the eyedropper depending on the app.
Where to pick colors fast:
What Is an Eyedropper Tool (and What Isn't It)?
In digital design, an eyedropper tool is a utility that reads the color value of a single pixel (or an average of a small area) and displays that value in a format you can reuse — most commonly HEX, RGB, HSL, or HSV. You click a point on an image, a web page, or the screen itself, and the tool records the color.
The name comes from the physical glass dropper used in chemistry, but the two share only a name. A digital eyedropper picks color data, not liquid. It may also be called a color picker, color sampler, or simply eyedropper depending on the software (online tools tend to label it "color picker"; Adobe apps call it "Eyedropper Tool").
How to Pick a Color from an Image Online
When you need a color code from a photo or graphic but don't have design software installed, a free online tool gets the job done in seconds. Three widely used options are PhotoAiD, get‑color.com, and imagecolorpicker.com. All let you upload an image, click a color, and copy the resulting code.
The basic workflow is the same across all three:
- Upload your image (or paste a URL on imagecolorpicker.com).
- Move the crosshair cursor over the area whose color you want.
- Click — the HEX and RGB values appear instantly.
- Copy the code and paste it into your design tool, CSS, or document.
The table below shows how the three tools compare on key specs.
| Tool | Max upload | Formats | AI enhanced? | Processing |
|---|---|---|---|---|
| PhotoAiD | 30 MB, 10000×10000 px | JPEG, WEBP, PNG | Yes | Server‑side |
| get‑color.com | Not specified | JPG, PNG, GIF, WEBP | No | Not specified |
| imagecolorpicker.com | No limit stated | JPG, PNG, GIF, WEBP (via URL) | No | In‑browser, no data sent |
All three output HEX and RGB at minimum; some also provide HSL and HSV. If privacy matters, imagecolorpicker.com processes entirely in your browser and never sends your image to a server.
How to Pick Colors from Any Webpage with a Browser Extension
To sample a color from any live web page — not just an uploaded image — a browser extension is the most direct tool. The Eye Dropper extension for Chrome has been available since 2010 and is used by more than 1 million people, with over 2,000 positive reviews. It weighs 113 KiB, is free, and collects no data.
How to use it:
- Install the extension from the Chrome Web Store.
- Click the Eye Dropper icon in your browser toolbar.
- Hover over any color on the page — a magnified preview appears.
- Click to capture the color. The extension displays HEX, RGB, and HSL values, and you can save the color to a palette for later use.
As of October 2026, the latest version is 4.10.3.17, updated July 15, 2026. The extension works on any webpage, making it a practical choice for web designers and developers who need to inspect live site colors.
How to Use the Built‑In Eyedropper in Firefox
Firefox includes an eyedropper tool directly in the browser — no extension required. It is available on the desktop version and copies the HEX value to your clipboard with a single click.
To access it: open Firefox, go to the Tools menu, select Browser Tools, then click Eyedropper. You can also find it under More Tools in the toolbar. Once activated, the cursor becomes a magnifying circle. Click any color on the screen, and the hex code is copied immediately.
For a quick walkthrough, see Mozilla's official feature page. No installation, no configuration — it simply works.
How to Use the Eyedropper Tool in Adobe Illustrator
The Eyedropper tool in Illustrator is more powerful than most users realize. Beyond picking a fill color, it can sample stroke attributes, transparency, gradients, and even character or paragraph styles. This section covers the essentials and then moves into advanced techniques that save significant time.
Basic Color Sampling
Press <kbd>I</kbd> to activate the Eyedropper, then click any object in your document. The fill color of the clicked object becomes the active fill color. You can also sample from placed images or from objects on a different artboard.
Copying Multiple Attributes
By default, the Eyedropper copies the fill color and stroke color of the clicked object. But it can also capture stroke weight, opacity, blending mode, and character/paragraph styles (when used with text). Double‑click the Eyedropper icon in the toolbar to open the Eyedropper Options panel, where you can check exactly which attributes to sample and which to leave unchanged.
Gradient Copying and Bulk Replace
Click an object that has a gradient fill, and the Eyedropper copies the entire gradient — not just one stop. This is useful when you want to apply a complex gradient across multiple shapes without recreating it manually.
For bulk color replacement, select several objects, then use the Eyedropper on the target color. All selected objects update to that color in one action. To sample multiple distinct colors and save them as swatches, Shift+click each color — Illustrator adds them to the Swatches panel automatically.
Cross‑Document and External Image Sampling
The Eyedropper works across open Illustrator documents, so you can pick a color from a different file without switching tabs. It can also sample colors from images that are not embedded in the document — for example, a photograph open in another application on your screen. This makes it a versatile tool for maintaining color consistency across an entire project.
For more advanced tips, see this detailed guide on TourBoxTech and Adobe's official Eyedropper documentation.
How to Use the Eyedropper Tool in Figma
Figma's eyedropper tool is available from the toolbar or by pressing <kbd>I</kbd>. It samples colors from layers within your file, images placed on the canvas, and even the background area outside the canvas — useful for pulling a color from a browser window or UI mockup behind Figma.
The tool works with fills, strokes, and effects. When you click a color, Figma applies it to the currently selected element, and the color code appears in the properties panel. You can also use the eyedropper from within the color picker dialog by clicking the dropper icon.
Figma's official help article covers the basics, but as of 2026 some users have encountered bugs — see the troubleshooting section below.
How to Fix Common Eyedropper Tool Problems
⚠️ Known Bug: Figma Eyedropper Returns Random Colors
After a recent Figma update, several users reported that the eyedropper picks random hex values and random opacity instead of the actual color under the cursor. For example, hovering over a known swatch might return a completely different color at 1.57% opacity.
What Figma support suggests:
- Force‑quit Figma and relaunch it.
- Clear the app cache.
- Test the eyedropper in the browser version vs. the desktop app.
- Open a different file and see if the issue persists.
As of October 2026, no permanent fix has been confirmed. The official documentation states the tool works as described, but community reports indicate that a bug exists in certain versions. If you encounter this, the browser version appears more reliable.
Other common issues:
- Tool grayed out: In Photoshop, the Eyedropper may be unavailable if no layer is active. Select a layer and try again.
- Color looks different in another app: This is typically a color‑space mismatch — browsers use sRGB, while Adobe apps may use Adobe RGB. The eyedropper returns the raw value, but how that value displays depends on the app's color management.
What the Eyedropper Tool Can't Do and What's Still Uncertain
The eyedropper is a single‑point sampling tool. It has clear limits worth knowing before you rely on it for complex color work.
- It does not generate color palettes. The tool records one color at a time. To build a palette from an image, you must sample multiple points manually or use a dedicated palette extractor. For palette creation, tools like the Adobe Color Wheel are more appropriate.
- It does not compute contrast ratios. After sampling a foreground and background color, you still need a contrast checker to meet WCAG accessibility standards.
- Color‑space inconsistencies are not resolved by the tool. A hex code is absolute, but its on‑screen appearance varies depending on whether your software uses sRGB, Adobe RGB, or Display P3. None of the major online tools or browser extensions warn about this.
- The Figma bug remains unresolved. As noted above, the eyedropper in Figma may not function reliably after certain updates — a conflict between official docs and community reports that users should be aware of.
- Mobile apps are not covered here. While tools like Adobe Capture and Color Grab exist for iOS and Android, they fall outside the scope of this article because reliable, source‑backed procedures were not available in the research material.
The eyedropper tool is remarkably capable within its narrow role — reading a color and giving you a code you can use elsewhere. Knowing exactly where that role begins and ends is what makes you a more efficient designer.