Eyedropper Generator Online

How to Pick Colors from an Image

1. Upload Your Image: Drag and drop a JPG, PNG, WebP, GIF, BMP, or HEIC file, or click "Add Files" to browse. The image stays in your browser session — no upload to a server, no sign-up.
2. Click a Pixel to Sample: Hover the eyedropper cursor over the image and click any pixel. A zoomed magnifier helps target single pixels — useful when an anti-aliased edge sits one pixel away from the solid fill you actually want.
3. Copy a Color Code: The picked color appears as HEX (#a3c4f7), RGB (rgb(163, 196, 247)), HSL (hsl(216, 86%, 80%)), and OKLCH. Click the Copy icon next to any format to push it to your clipboard. Pick again to sample more pixels — recently picked colors stay listed.
4. Use the Browser EyeDropper for Screen Sampling (Optional): Chromium-based browsers expose a native screen picker that reads pixels from anywhere on your screen, including outside the tab. Click "Pick from Screen" if your browser supports it (see the table below). The image-based picker remains the fallback for Firefox and Safari users.

Why Use an Online Eyedropper?

A pixel's color is just a triplet of numbers, but reading those numbers correctly matters for design, accessibility, and brand consistency. This tool reads RGB values directly from the decoded image — what's actually stored in the pixel — not what's displayed after monitor color profiles, browser gamma, or zoom-level filtering. That's the difference between "looks like the brand blue" and "is the brand blue."

• Brand color matching from screenshots — A client sends a marketing screenshot and asks "match this blue." Sampling the JPG gives you the literal hex code instead of eyeballing it. Pair the result with Color Converter to translate the HEX into HSL or OKLCH for your design system tokens.
• Accessibility contrast audits — Pull the foreground text color and the background color from a finished design, then plug both into a WCAG contrast checker. The eyedropper removes the guesswork — you're testing the actual rendered colors, not the CSS source values that may have been overridden by inheritance.
• Design reference & mood boards — Sample swatches from competitor sites, magazine scans, or photography to build a palette. The OKLCH output is especially useful here because perceptually uniform lightness lets you sort sampled colors into a coherent gradient.
• Reproducing colors from photography — Match a paint color from a room photo, identify a product hex from a press shot, or pull the dominant tone from a logo PNG. Use lossless source files (PNG, WebP-lossless) for accuracy; JPEG compression shifts colors slightly at chroma boundaries.
• Quick code lookup for developers — Sample a color from a Figma export or design mock, copy the hex, paste it into your CSS. Faster than opening a full image editor when you just need one value.
• Print-to-screen color verification — Designers checking that a logo PNG actually contains the corporate color (e.g., Pantone-derived sRGB equivalent) rather than a near-miss from a careless export.

Color Format Output — Reference

Format	Example	Where it's used	Notes
HEX	#a3c4f7	CSS, design tools, brand guides	Most common; case-insensitive; 6 digits = 24-bit sRGB
HEX + alpha	#a3c4f7cc	Modern CSS (Chrome 62+, FF 49+)	8 digits; last 2 = alpha 00–FF
RGB	rgb(163, 196, 247)	CSS, scripting, image libraries	Channel values 0–255; sRGB color space
RGBA	rgba(163, 196, 247, 0.8)	Legacy CSS syntax	Modern CSS allows rgb(163 196 247 / 0.8)
HSL	hsl(216, 86%, 80%)	Color manipulation in CSS	Hue 0–360°, saturation/lightness as %
OKLCH	oklch(82% 0.07 252)	Modern design systems (CSS Color 4)	Perceptually uniform; Chrome 111+, FF 113+, Safari 15.4+
CMYK (approx.)	cmyk(34%, 21%, 0%, 3%)	Print workflows (reference only)	Conversion from sRGB is approximate; print shops want the actual CMYK profile, not a screen-derived one

Browser Support — Native EyeDropper Web API

The native window.EyeDropper API lets users sample colors from anywhere on screen, including outside the browser window. xconvert's image-based picker works in every browser; the screen-sampling button only appears where the API is available.

Browser	EyeDropper API support	Notes
Chrome / Chromium	Supported since Chrome 95 (October 2021)	Desktop only
Edge	Supported since Edge 95	Desktop only
Opera	Supported since Opera 81	Desktop only
Firefox	Not supported (as of Firefox 153, May 2026)	Use the image-based picker
Safari	Not supported (desktop or iOS)	Use the image-based picker
iOS Safari / Chrome Android	Not supported	Use the image-based picker

The API requires a secure context (HTTPS) and a user gesture — EyeDropper.open() must be invoked from a click or tap handler, not a timer or page-load script. This is a deliberate privacy guard so background scripts can't silently sniff pixel colors.

Frequently Asked Questions

How does the picker read a pixel's color?

The image is drawn onto an HTML <canvas> element, and getImageData() returns a Uint8ClampedArray with the red, green, blue, and alpha bytes for every pixel. The picker maps your click coordinates back to the canvas's intrinsic pixel grid and reads four bytes at that offset. No server round-trip, no inference — just the literal stored values from the decoded image.

Does the picker sample a single pixel or average an area?

xconvert returns the exact single-pixel value at your click point. Some tools average a 3×3 or 5×5 block to mask JPEG block-noise and chroma subsampling artifacts; that's gentler on lossy images but hides the real pixel data. If you suspect compression noise, sample several nearby pixels yourself and compare — a stable region returns the same hex code from each click, while a noisy region drifts a few values per channel.

Why does my JPEG screenshot give a slightly different color than the source?

JPEG uses lossy DCT compression and 4:2:0 chroma subsampling by default, which means color information is averaged across 2×2 pixel blocks before encoding. Edges between two contrasting colors get smeared, and even flat fills can drift a few RGB values per channel. For pixel-accurate work, save screenshots as PNG (lossless) or WebP-lossless. Slack, Discord, and most messaging apps will re-encode pasted images as JPEG — share a PNG file attachment instead if color fidelity matters.

My HEIC photo's colors look right on iPhone but wrong here. What gives?

HEIC images from iPhones often embed a Display P3 color profile, which uses a wider gamut than standard sRGB. When the picker reads RGB bytes, it doesn't apply color management — you get the raw P3 values, not the sRGB-mapped equivalent your iPhone shows. For sRGB-accurate sampling, export the photo as a JPEG or PNG with the sRGB profile first (iOS Photos → Share → Save as JPEG, or use HEIC to PNG and pick from the result).

Is the EyeDropper Web API the same as picking from an image?

No — they solve different problems. The native window.EyeDropper API samples pixels rendered to your screen (any window, any monitor). xconvert's image picker samples pixels stored in an uploaded file, which is what you usually want when matching a brand color from a logo or measuring a design mock. Screen sampling is convenient for "what color is that pixel right now on my desktop"; image sampling is reliable for "what color does this file actually contain." The image picker also works in Firefox and Safari, where the screen API isn't available.

How do I sample colors from a PDF or a website I don't have a file for?

Take a screenshot first (Cmd+Shift+4 on macOS, Win+Shift+S on Windows), save as PNG, then upload it here. For PDFs, export the page as PNG at high resolution to avoid color smearing in low-quality JPEG previews. Some screenshot tools default to lossy formats — check that PNG is selected. If you're on Chrome, the native EyeDropper "Pick from Screen" button skips the screenshot step entirely.

What's OKLCH and why should I care about it?

OKLCH is a perceptually uniform color space added to CSS Color Module Level 4. Unlike HSL, where 50% lightness yellow looks much brighter than 50% lightness blue, OKLCH lightness values match perceived brightness across hues — so a palette built in OKLCH stays visually balanced. It ships in Chrome 111+ (March 2023), Firefox 113+ (May 2023), and Safari 15.4+ (March 2022). Tailwind v4, Radix Colors, and many modern design systems use OKLCH as the source of truth, then export HEX for legacy support.

Can I sample from animated GIFs or videos?

The picker reads whichever frame is currently displayed when you click. For an animated GIF that's the first frame by default. To sample a specific frame from a video, take a screenshot at the timestamp you want (or pause and use the OS screenshot tool), save as PNG, then upload. Picking pixels from a streaming <video> element is blocked by canvas cross-origin restrictions for most external sources.

Why do anti-aliased edges give me a color that doesn't match either side?

That's the anti-aliasing at work — pixels along a curved or diagonal edge are mathematically blended between the foreground and background colors to smooth the visual transition. A pixel that looks "almost blue" against a white background might be 50/50 mixed at the sub-pixel level. Sample several pixels inward from the edge to get the solid fill color, not the blended transition pixel.