How to Pick Colors From Images

An eyedropper is the fastest way to grab a color that already exists in the world. Instead of squinting at a screenshot and guessing hex codes, you click a pixel and copy the value. Every operating system and design tool ships an eyedropper now, and browsers finally support the EyeDropper API natively. The tricky part isn’t the click — it’s picking the right pixel, because compressed images, anti-aliased edges, and gamma-shifted displays can hand you a value that doesn’t match what your eyes actually see. This guide covers the tools, sampling strategy, handling screenshots, brand-matching workflows, and the accessibility caveats that make “just use the eyedropper” not quite the full answer.

What an eyedropper actually does

It reads the RGB value of one pixel at the cursor and gives you that value in whatever format you asked for — hex, RGB, HSL, OKLCH. No magic, just a pixel read. Everything interesting is in which pixel you sample.

A single-pixel sample is brittle. A 3x3 or 5x5 average is more reliable on photos, JPEGs, and anything with noise. Most desktop tools default to a single pixel but let you change the sample size in settings.

The browser EyeDropper API

Chrome, Edge, and Opera support window.EyeDropper. One method, one promise, one hex string back:

const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
console.log(sRGBHex); // "#3b82f6"

The cursor becomes a magnifier and the user clicks anywhere on the screen. Works across browser windows, the desktop, other apps — it pulls from the actual rendered pixels. Safari and Firefox don’t yet support this; feature-detect before relying on it.

OS-level eyedroppers

macOS Digital Color Meter (built-in), Windows PowerToys Color Picker, the GNOME Color Picker — all let you sample any pixel on screen and copy the value to clipboard. Shortcut keys matter; train yourself to use them rather than opening the app each time.

• macOS: Shift-Cmd-4, press Space bar in Digital Color Meter
• PowerToys (Windows): Win-Shift-C by default
• Figma: press I with a layer selected
• Photoshop: I
• Chrome DevTools: the color swatch next to any color value

Sampling strategy

A good sample avoids:

Anti-aliased edges. The pixel one over from the edge is a blend of foreground and background. Move toward the center of a solid region.

JPEG block boundaries. At quality 80, every 8x8 block has mild color shift. Sample the center of a block, not the seam.

Gradients. The value depends on exactly where you clicked. Decide which end of the gradient you want; then sample there, not halfway.

Shadows and highlights. If you’re trying to match a brand, ignore specular highlights and pure-black shadows — sample the mid-tone area.

Sampling from screenshots

Screenshots go through gamma, color profile, and (if shared) compression. The screenshot is not necessarily the same color as the original. To match brand colors reliably:

• Work from the original PNG or SVG, not a screenshot.
• If only a screenshot is available, take it at 1x zoom.
• Disable OS-level “improve colors” / HDR before sampling.
• Sample 5x5 and use the average, not a single pixel.

Matching colors across tools

Hex round-trips perfectly: #3b82f6 in Figma is the same in CSS. RGB-255 round-trips perfectly. Where it gets flaky:

Percentages. Some tools store RGB as 0–1 floats, and rounding can drift. Use integer RGB when transferring.

Color profiles. A sRGB color sampled from an Adobe-RGB export will not look the same. Always export in sRGB for web work.

HSL. HSL ↔ hex is lossy at the edges because of integer rounding in the saturation/lightness percentages. Store the hex as source-of-truth.

Getting brand-exact colors

Sampling the logo PNG is approximate. To get the real brand value:

• Check the brand guideline PDF if there is one.
• Inspect the brand’s website CSS for :root variables.
• Download the SVG logo and read the fill attribute.
• Look in their GitHub repo for tailwind.config.js or theme files.

Only fall back to the eyedropper when none of those work. The eyedropper is a last resort for brand spec because of the compression and profile issues above.

HDR and wide-gamut displays

On an HDR monitor, the eyedropper might return values outside sRGB. Most web workflows assume sRGB so the value gets clamped. If you’re seeing unexpected hex codes (things like #101010 when the pixel looked black), your monitor might be in HDR mode. Switch to SDR when picking for web use.

The 5x5 average trick

For photos, always sample 3x3 or 5x5 rather than a single pixel. The single-pixel value on a photo is dominated by noise. A 5x5 average gives you the local mean, which is what a human actually perceives.

Single pixel on a red wall:      #c5302a
5x5 average on the same wall:    #c73330
Human-perceived color:           closer to the 5x5 value

Accessibility caveats

Eyedroppers solve “what color is this pixel” but not “what color should this pixel be.” Just because you sampled a brand’s gray-on-white subtitle doesn’t mean you should copy it — it might fail WCAG. Always re-check contrast after picking.

Also: color blindness. A color that pops for you might merge with its background for a deuteranope. After picking, run the pair through a simulator — don’t trust your own eyes as the judge of accessibility.

Common mistakes

Sampling at anti-aliased edges. Move to the center of a solid region. The edge is always a blend.

Picking from a screenshot when the original is available. Each step of compression shifts the color slightly.

Single-pixel samples on photos. Noise dominates. Use an averaged sample area.

Ignoring display color profile. A sRGB pick on a wide-gamut monitor can return a value that doesn’t reproduce on standard monitors.

Not verifying contrast. You picked it, it’s brand-consistent, and it still fails AA. Run the numbers.

Treating RGBA alpha as a color property. Picking #000 at 40% opacity gives you a blend with the background, not a new color. If you want the effective color for a flat replacement, sample the blended pixel directly.

Forgetting to disable HDR/Night Shift/True Tone. They shift your perception of color, and some shift the actual rendered values too.

Run the numbers

Pick a hex from any uploaded image with the color picker. For a full palette (not just a single sample), use the color extractor, and pipe the hex through the color converter when your design tool wants RGB, HSL, or OKLCH instead of the hex you just grabbed.