Boneyard Tools

Image Color Picker (Eyedropper)

Drop in an image, hover to preview the color under your cursor, then click to lock the exact pixel you want. A magnified loupe follows the crosshair so you can land on the precise pixel, and the picked color is shown as hex, RGB, and HSL with a one-click copy on each. Every color you click is kept in a history row, and the whole thing runs in your browser at the image's native resolution, so values are pixel-accurate and nothing is ever uploaded.

How to pick a color from an image

  1. Drop an image onto the zone, or click it to browse (PNG, JPEG, WebP, GIF, or BMP).
  2. Move your cursor over the image; the loupe and swatch preview the pixel under the crosshair.
  3. Click to lock the color you want.
  4. Copy its HEX, RGB, or HSL value with the button beside each one.
  5. Keep clicking to gather colors in the Picked colors row, and click a swatch to reselect it.
  6. Use New image when you want to start over with a different file.

Examples

Pick a blue button pixel (Tailwind blue-500)

click a pixel that is rgb(59, 130, 246)
HEX #3b82f6, RGB rgb(59, 130, 246), HSL hsl(217, 91%, 60%)

Pick a pure red pixel

click a pixel that is rgb(255, 0, 0)
HEX #ff0000, RGB rgb(255, 0, 0), HSL hsl(0, 100%, 50%)

Pick a mid grey pixel

click a pixel that is rgb(128, 128, 128)
HEX #808080, RGB rgb(128, 128, 128), HSL hsl(0, 0%, 50%)

Frequently asked questions

Is my image uploaded anywhere?

No. The file is decoded into your browser and every color is read locally from the pixel data. Nothing is sent to a server, so private screenshots and unreleased artwork never leave your device.

Is the color pixel-accurate?

Yes. The image is read at its native resolution into a raw pixel buffer, so the color you pick is the exact stored value of that pixel, not an average or an approximation from the scaled on-screen preview.

What formats do I get for each color?

Three: hex (for example #3b82f6), RGB such as rgb(59, 130, 246), and HSL such as hsl(217, 91%, 60%). Each has its own copy button so you can paste straight into CSS, a design tool, or a style guide.

What image types can I open?

PNG, JPEG, WebP, GIF, and BMP. The drop zone accepts any standard raster image your browser can decode. Vector SVG files are not pixel data, so they are outside what a per-pixel picker reads.

Can I pick more than one color?

Yes. Each pixel you click is added to a Picked colors row below the picker, keeping up to the ten most recent unique colors. Click any swatch to reselect it, then copy the format you need.

Does it read transparency?

Yes. Pixels carry an alpha channel, and when a locked color is partly transparent the tool shows its alpha as a percentage. The hex, RGB, and HSL fields describe the color itself, while the alpha readout tells you how opaque that pixel is.

The magnifier, how does it help?

A loupe canvas beside the image shows a ten times zoom of the area under your cursor with a marked target pixel. It makes landing on a one pixel edge, a thin line, or a small icon far easier than eyeballing the full-size image.

Why does the HSL differ slightly from another tool?

HSL here is rounded to whole numbers for hue, saturation, and lightness. Different tools round at different points, so a value may land one unit apart. The hex and RGB are exact byte values, so use those when you need a perfect match.

How is this different from the color extractor?

This picker returns the exact color of a single pixel you choose. The image color extractor analyzes the whole image and returns its dominant colors as a ranked palette, which is better when you want an overall scheme rather than one precise spot.

Learn more

Related tools