You have a screenshot of a button you like, a logo file from a client, or a product photo, and you need the exact HEX code of one color in it. To pick a color from an image sounds like a one-click job, but click a pixel near an edge or in a compressed JPEG and you get a value that is a few units off, or one that looks right in the mockup and wrong in production. This guide covers when to pick one pixel versus extracting a palette, why sampled values drift, how to sample reliably, which browser and operating system pickers to use, and how to turn the color you picked into usable design tokens.

Single-Pixel Picking vs Palette Extraction

There are two different jobs hiding behind "get the colors from this image," and they need different tools.

  • Single-pixel picking answers "what is the exact value of this specific color?" Use it for matching a logo, a UI element in a screenshot, a brand swatch, or a specific product color.
  • Palette extraction answers "what colors make up this image overall?" Use it when you want the mood of a photo or illustration as a starting palette.

For the second job, the image to palette extractor returns six dominant colors with CSS, and our guide on how to extract a color palette from an image covers refining that result. The rest of this article focuses on the first job: getting one exact value.

How to Pick a Color From an Image, Step by Step

The image color picker handles this entirely in your browser, so the file is never uploaded anywhere. The workflow:

  1. Load the image. Upload a screenshot, logo, or photo.
  2. Hover first. The tool shows the live color under your cursor, so you can see how much values change as you move across an area before committing.
  3. Click to pick. Clicking reads the exact color of that pixel and adds it to a list of your last 10 picks, each with HEX and RGB.
  4. Pick again nearby. Click three to five points across the same area and compare the list. If they match, you have a trustworthy value.
  5. Copy the HEX. Use the value that repeats most often.

That fourth step is the one most people skip, and it is where most wrong colors come from.

Why the Same Spot Gives Different HEX Codes

An image file is not a perfect record of the colors that went into it. Several processes change pixel values before you ever click.

JPEG compression

JPEG is a lossy format. It processes the image in small blocks and discards fine detail to save space, and most JPEGs also store color information at lower resolution than brightness, so neighboring pixels share blended color data. The result is that a flat brand blue can come back as a cluster of slightly different blues, with visible noise near sharp edges and text. Screenshots that have passed through chat apps or social platforms are often recompressed this way.

Anti-aliasing

Text, icons, and logo edges are drawn with partially blended pixels so curves look smooth instead of jagged. A pixel on the edge of a blue logo on a white background is a mix of the two, a lighter blue that does not exist anywhere in the brand palette. Click there and you get the wrong color.

Resizing and screen density

When an image is scaled up or down, new pixels are interpolated from old ones. A screenshot taken on a high-density display and then resized, or a thumbnail generated by a CMS, will contain in-between colors along every edge.

Color profiles

Images can carry an embedded color profile, such as Display P3 from many phones and Macs. CSS HEX values are sRGB, so a wide-gamut image has to be converted, and very vivid colors outside sRGB get clipped to the nearest value sRGB can show. If two tools report slightly different values for the same pixel, a profile conversion is the usual suspect. For web work, standardize on sRGB values.

How to Sample Flat Areas Reliably

Most sampling errors disappear with a few habits:

  • Go to the source first. If the color comes from a live website, inspect the element and read the CSS. If it is a brand color, check the brand guidelines, the SVG logo, or the design file. A declared value beats any sampled pixel.
  • Prefer PNG over JPEG. PNG is lossless, so flat areas stay flat. Ask for the original file rather than a screenshot of it.
  • Sample the middle of the largest solid area, well away from edges, text, shadows, and gradients.
  • Zoom in before clicking so you can see the pixel grid and avoid blended edge pixels.
  • Take several samples and compare. Identical values mean a clean area. Small variation of a few units means compression noise, so use the most common value. Large variation means you are on a gradient, texture, or lit surface.
  • Accept that photos have no single true color. A red product in a photo varies with lighting, shadow, and camera processing. For photos, decide which pixel represents the color you want, or switch to palette extraction.

Picking Colors Outside the Browser Tab

Sometimes the color is on screen rather than in a file: in a video, a desktop app, or a design tool. These options cover that.

The browser EyeDropper API

Chromium-based browsers such as Chrome and Edge support the EyeDropper API, which lets a web page open a system-style eyedropper that can sample any pixel on screen, including outside the browser window. It must be triggered by a user action like a click, and it returns the color as an sRGB HEX string. Because not every browser supports it, feature-detect before using it:

const button = document.querySelector('#pick-color');

button.addEventListener('click', async () => {
  if (!('EyeDropper' in window)) {
    console.warn('EyeDropper API is not supported in this browser');
    return;
  }
  try {
    const { sRGBHex } = await new EyeDropper().open();
    document.documentElement.style.setProperty('--picked', sRGBHex);
  } catch (error) {
    // The user pressed Escape or cancelled the pick
  }
});

Chrome and Firefox developer tools also include an eyedropper for sampling colors on the page you are inspecting.

macOS: Digital Color Meter

Digital Color Meter lives in Applications, then Utilities. It shows the value of whatever pixel is under the pointer. Two settings matter for web work: choose "Display in sRGB" from the pop-up menu rather than native display values, and set View, then Display Values, to hexadecimal. Press Command-L to lock the sampling position and Shift-Command-C to copy the color as text. The Aperture Size slider controls the sampled area; keep it at the smallest size for a single pixel, or enlarge it to average a noisy region.

Windows: PowerToys Color Picker

Microsoft's free PowerToys suite includes a Color Picker utility. With it enabled, press Win+Shift+C, hover over any pixel, and click to copy the color to the clipboard, in HEX by default. Its editor keeps a history of picked colors, and you can enable other formats such as RGB and HSL in the settings.

From Picked Color to Design Tokens

A HEX code in your clipboard is not yet a usable color. Turn it into a token:

  1. Normalize the format. Paste it into the color code converter to get HEX, RGB, HSL, and a CSS custom property in one place.
  2. Give it a name. The color name finder returns the nearest CSS named color, a useful hint for a descriptive token name. See how to name colors in a design system for naming conventions.
  3. Build a scale around it. A single brand color is not enough for hover states, backgrounds, and borders. The color shades generator produces a 10-step lightness scale with a WCAG badge on each swatch.
  4. Check contrast for every text pair you plan to use. WCAG AA requires 4.5:1 for normal text and 3:1 for large text.
  5. Record where it came from. A short comment saves the next person from re-sampling.
:root {
  /* Sampled from logo.png: five picks in the flat area matched */
  --color-brand: #1f5fbf;
  --color-brand-hover: #194d9c;
  --color-brand-subtle: #e6eefa;
}

Getting Colors Right the First Time

Picking a color from an image is reliable once you control the variables: start from the original file when you can, sample flat areas away from edges, compare several picks, and standardize on sRGB. Use the image color picker for exact values, palette extraction for overall mood, and then turn the result into a named, tested token so the color you found is the color that ships.