Free Image Color Picker

Pixel Picker vs Palette Extractor, Two Different Jobs

A common confusion worth clearing up first: this is a pixel picker, not a palette extractor. The two tools sound similar and both involve images, but they answer different questions:

• Pixel picker (this tool): you click an exact location, the tool reads the colour of that single pixel. Use when you need the colour of a specific element, the brand red on a logo, the exact blue of a sky in a reference photo, the off-white of a UI background in a screenshot.
• Palette extractor: the tool analyses the whole image and returns the dominant 5-8 colours statistically. Use when you want a colour scheme inspired by an overall image, not one specific spot.

If you actually want statistical dominant colours, the Palette from Image tool is the right pick. The two tools complement each other: extract a palette to understand the overall colour story, then use this picker to grab specific accents.

How It Works

The browser draws your uploaded image to an HTML <canvas> element. When you click, the tool calls ctx.getImageData(x, y, 1, 1): a Canvas 2D API method that returns the RGBA values of a single pixel as a four-element array (red, green, blue, alpha). Those values are then formatted as HEX, RGB, and HSL for display. The magnifier is a second canvas that copies a small region around the cursor and renders it scaled up, so you can see exactly which pixel you're about to select. Everything runs locally in your browser; the image bytes are never transmitted.

When You Reach for a Pixel Picker

• Brand-matching: pull the exact colour of a logo to use elsewhere in a design or marketing asset.
• Reference photography: find the precise sky tone, skin tone, or natural-material colour from a reference image.
• Design QA: verify a screenshot matches the spec colour pixel-for-pixel.
• Reverse-engineering an existing site: pick the actual rendered colour of a button or background when DevTools isn't an option (a screenshot from a colleague, a competitor's interface).
• Mockup analysis: extract the exact colours from a mood board or design comp.
• Mobile screenshot inspection: phone screenshots can be examined on desktop without needing the original device.
• Accessibility audits: read the actual rendered colour of text or UI elements (which can differ from the source CSS due to anti-aliasing or transparency stacking).

HEX, RGB, HSL, Same Colour, Three Notations

The tool emits the same colour value in three formats because different contexts prefer different ones:

• HEX: #2b7190. Compact, six characters, the de facto standard for web design and most copy-paste workflows. Easy to drop into CSS, design-tool colour pickers, or markdown.
• RGB: rgb(43, 113, 144). The underlying numeric form. Useful when you need to tweak channels independently or when working in tools that expect decimal values (Tailwind's arbitrary values, programmatic generation).
• HSL: hsl(199, 54%, 37%). Hue / saturation / lightness, easier for humans to reason about. Adjusting "the same hue, slightly lighter" is one number in HSL but a multi-channel change in HEX or RGB.

The Anti-Aliasing Trap

A pixel-perfect picker reads exactly the pixel under your cursor, but in real images, that pixel may not be the colour you think it is. Anti-aliasing blends the edges of letters, icons, and curved shapes with the surrounding background to make them look smooth. So clicking on the "edge" of black text against white may give you a grey rather than pure black. Two practical habits to avoid the trap:

• Pick from the centre of solid shapes, not from edges where anti-aliasing happens.
• Use the magnifier to confirm you're on a pixel that's clearly the brand colour rather than a blended edge pixel.

JPEG Compression and Why Reference Quality Matters

JPEG compression introduces small colour distortions, especially around contrast edges and in flat areas of solid colour. A "pure red" (#FF0000) brand colour exported as a JPEG and then re-imported can read as #FE0102 or similar, close, but not identical to the source. For exact brand-matching, prefer:

• PNG or WebP-lossless source images when picking colours that matter.
• Vector source files (SVG, PDF) rendered at high zoom, vector colours are exact.
• Direct from the design tool (Figma, Sketch, Photoshop) when possible, rather than from a screenshot.

Browser-Level and OS-Level Eyedropper Alternatives

Several other ways to pick colours from your screen:

• The CSS EyeDropper API (new EyeDropper()). MDN's status: "Limited availability, this feature is not Baseline because it does not work in some of the most widely-used browsers." In practice, supported in Chrome and Edge (since Chrome 95), not in Firefox or Safari. Returns a colour as { sRGBHex }. Good when supported, but the spotty support means a Canvas-based picker still earns its place for cross-browser use.
• macOS Digital Color Meter: built-in macOS app that reads any pixel on screen.
• Windows PowerToys Color Picker: Microsoft's official PowerToys utility includes a pixel-picker.
• Browser DevTools: Chrome and Firefox both include eyedroppers in their colour-picker UI when editing CSS in the Inspector.

Why a web-based picker still earns its place: works on shared screenshots that came in over Slack or email, doesn't require installing software, runs from any browser on any OS, and the image never leaves your machine.

Privacy

Images often carry more than just pixels: EXIF metadata can include GPS coordinates of where the photo was taken, the camera serial number, and original capture timestamps. Screenshots can contain confidential UI, draft text, or pre-release branding. Faces are biometric identifiers under several jurisdictions' privacy laws. This tool runs entirely in your browser, the image goes from your file system to an in-memory canvas, gets sampled pixel-by-pixel, and the only thing that leaves the page is the colour value when you copy it. Server-side image-picker tools upload the entire image; that's the trade.

Common Mistakes

1. Picking on an anti-aliased edge. The colour you get is a blend of the shape and its background. Pick from the middle of solid areas instead.
2. Picking from a heavily-compressed JPEG. Compression artefacts shift colours subtly. Use a higher-quality source for exact brand matching.
3. Confusing the picker with a palette extractor. If you want the dominant colours of an overall image, you want a palette extractor, not a pixel picker.
4. Picking from a transparent PNG against a coloured page background. Depending on how the canvas composes transparency, you may end up sampling the page background through the alpha channel. Convert the image to a known background first if precision matters.
5. Trusting screenshot colour exactly. Some monitors apply colour calibration that shifts the rendered colour from the source. The pixel value the picker reads is what's encoded in the image, not necessarily what the originating display showed.
6. Picking from a low-resolution image and missing detail. A 200×100 thumbnail of a logo gives fewer distinct pixels to choose from than the original asset. When possible, work from the highest-resolution source.

More Frequently Asked Questions

What's the difference between this and a colour-palette generator?

A picker reads the colour of one specific pixel you click on. A palette generator analyses the whole image and returns the most dominant colours statistically. Different jobs: pickers are precise, palette generators are interpretive. For a generated palette from your image, see Palette from Image.

Why does the colour I pick differ from the brand spec?

Two common reasons. First, the image you're picking from may have been compressed (JPEG re-encoding shifts colours by a few RGB values). Second, the pixel you clicked may be on an anti-aliased edge that blends with the background. For exact brand matching, use a vector source or a high-quality PNG / WebP-lossless and pick from the middle of solid areas.

Can I use this on mobile?

Yes, tap-to-pick works on touch devices, though the magnifier behaviour and exact pixel precision can vary by mobile browser. For pixel-perfect work on mobile, the larger touch target makes a magnifier-anchored picker hard; consider doing colour-critical picking on a desktop browser when possible.

Is the image uploaded anywhere?

No. The image is loaded into a local Canvas element via the browser's FileReader / image-load APIs; pixel reads happen via getImageData; nothing is transmitted to a server, no analytics endpoint sees the image. Useful when the image contains EXIF GPS data, faces, screenshots of confidential UI, or pre-release branding you don't want to upload.

Why pick a colour from an image at all when CSS shows the value?

CSS shows the declared colour, but rendered pixels can differ, gradients, opacity stacking, anti-aliasing, dark-mode adjustments, browser colour-profile handling, and screenshot compression all cause divergence. When you need to know what the pixel actually is (for design QA, accessibility, or matching against a reference), reading the rendered pixel directly is the only reliable answer.

Why is the magnifier helpful?

Single pixels are tiny, at typical screen resolution, individual pixels are well below the size your eye can distinguish without aid. The magnifier shows a zoomed-in view of the area under your cursor so you can confirm exactly which pixel you'll click. Especially valuable on dense images, anti-aliased text, or curved shapes where adjacent pixels differ by small amounts.