The eyedropper reads the colour of any pixel on your screen and hands you its value. It uses the browser’s native EyeDropper API, which means the picking happens at the operating system level — you can sample from anything visible, not just from this page: another tab, a design tool, a video frame, a PDF, an image in a folder.
Browser support and permissions
The EyeDropper API is available in Chrome, Edge and other Chromium-based browsers, and in recent Firefox. Safari does not support it at the time of writing. Where it is unavailable, the tool falls back to picking from an image you load, which covers most practical cases.
Activation always requires a deliberate user gesture, and while picking, the browser takes over the cursor. Nothing is sampled without you clicking, and no screen content is transmitted anywhere — the value is read locally and stays in the page. See the privacy policy.
What you are actually sampling
This is the part worth understanding, because it explains most surprises.
You get the composited pixel, not the source colour. What lands on screen has been through opacity, blend modes, shadows, overlaying elements and any filters in the stack. Sampling text that sits at 80% opacity over a background returns the blend, not the colour anyone specified.
Anti-aliasing pollutes edges. The pixels along the boundary of text or an icon are intermediate values between the shape and its background. Sample the middle of a solid area, never an edge — a single pixel off and you have a colour that appears nowhere in the design.
Compression artefacts. JPEGs and heavily compressed video shift colours locally, especially near high-contrast boundaries. A sample from a compressed screenshot is approximately right, not exactly right.
Display profile and calibration. The value is what your display is showing. On a wide-gamut screen with colour management in play, that can differ from the value in the source file. Two people sampling the same image on different monitors can legitimately get different answers.
Practical technique
- Zoom in before sampling. More screen pixels per source pixel means less chance of catching an anti-aliased edge.
- Sample several points in a region that should be uniform. If they agree, you have the real colour; if they do not, you are on a gradient, a texture, or compression noise.
- For brand colours, find the specification. Sampling a logo off a website gives you what survived export and compression, not what the brand guidelines say.
- If a sampled colour looks slightly off, it probably is. Round to a sensible value rather
than shipping
#3d8bf4when the intended colour was#3d8bf5.
Where people go wrong
Trusting a single pixel. Almost every sampling error comes from this. One pixel is a sample size of one.
Sampling from a screenshot of a screenshot. Each round of compression moves the values a little further from the truth.
Assuming the sampled colour is accessible. Whatever you pick still has to pass contrast against whatever you pair it with — run it through the contrast checker before using it for text.
Expecting it to work on a phone. The API is a desktop feature; mobile browsers do not offer it. Use the image-based fallback or image to palette there.
Once you have a value, the converter will give you every format, and shades and tints will build the rest of the family around it.