Skip to main content
92 Nodes
All resources
Free tool

Image Color Picker — Pick HEX & RGB Colors

92 ColorLab — pick a color from any image, extract a palette, check contrast, and export.

Upload an image to pick colors, extract a palette, check contrast, and copy color codes. Your image stays in your browser.

Loading 92 ColorLab…
How it works

Exact pixels, not a downscaled guess

The picker keeps two separate surfaces: a visible, viewport-sized canvas for display, zoom, and pan, and a hidden, full-resolution canvas used only for sampling. Whatever you click or tap maps back through the current zoom and pan to an exact coordinate on that full-resolution surface — so the HEX value you copy is the real decoded pixel, not an approximation from a shrunk preview.

Palette extraction uses a third, independently downscaled surface, because clustering a whole multi-megapixel photo pixel-by-pixel would be slow and unnecessary — the trade-off is clearly separated so an exact pixel pick and an approximate palette coverage percentage are never confused with each other.

Transparency

Working with transparent images

PNG and WebP images can carry an alpha channel, so the viewer renders against a neutral checkerboard — the same convention design tools use — rather than a flat color that could be mistaken for part of the image. A fully transparent pixel has no meaningful color to report, and a partially transparent one shows its raw decoded alpha alongside its RGB channels, rather than silently blending it into something that looks like an opaque color.

Accessibility

Checking contrast the correct way

The Contrast tab computes WCAG relative luminance from the actual sRGB channels, then the standard (L1 + 0.05) / (L2 + 0.05) ratio — rounded only for display, never before the AA/AAA pass/fail check. If either color is translucent, it's composited against an explicit backdrop first (the background over the backdrop, then the foreground over that result), so the ratio reflects what would actually render on screen.

A ratio that clears 4.5:1 or 7:1 says one specific pair of colors is readable at that size — it isn't a certification that an entire page or component is accessible.

Keep going

More color & image tools

Once you've pulled a palette from an image, the Color Palette Generator can build out a fuller, harmonious set from scratch, and the CSS Gradient Generator turns any two of your colors into ready-to-paste CSS. Need a square mark turned into every favicon size? Try the Favicon Generator.

FAQ

Common questions

Is my image uploaded anywhere?+

No. The image is decoded and read directly in your browser using the Canvas API. It's never sent to 92nodes or any third-party server, and palette extraction runs in a background Web Worker on your own device.

Why does the picked color look slightly different from the original photo?+

The picker reads the exact value your browser decoded, in sRGB. If the original file carries a different embedded color profile, or you're viewing it on a different display, the same file can render marginally differently — the tool reports what your browser actually decoded, not a guarantee that every app or screen will show an identical value.

What's the difference between single pixel and 3×3 / 5×5 average sampling?+

Single pixel reads the exact pixel under your cursor or finger. 3×3 and 5×5 average a small neighborhood around it instead, which smooths out compression artifacts or sensor noise in photos — useful when a single pixel doesn't represent the color you're actually trying to pick.

How is the extracted palette calculated?+

The image is downscaled to a bounded analysis size, then clustered with median-cut color quantization in a Web Worker. Fully transparent pixels are ignored, partially transparent ones are weighted by their alpha, and near-duplicate clusters are merged — the result is deterministic for the same image and color count. Coverage percentages are approximate, based on how much weight each cluster actually captured.

Does a passing contrast ratio mean my site is accessible?+

No — it means that one foreground/background pair meets the WCAG ratio you checked it against. Font size, weight, surrounding layout, and dozens of other accessibility factors aren't covered by a single contrast check.

Why can't I use "Pick from screen" in my browser?+

It uses the native EyeDropper API, which is currently only available in Chromium-based browsers (Chrome, Edge, Opera) over HTTPS. The image picker, manual entry, and every other feature on this page work in any modern browser regardless.

Is the Tailwind export compatible with any Tailwind version?+

The default export targets Tailwind v4's @theme CSS format. A v3 tailwind.config.js snippet is also offered for older projects, clearly labeled — it isn't presented as a universal, version-agnostic format.

92 Nodes

Have a project in mind? Let's build it.

Tell us about your goals and we'll get back to you within one business day with next steps.

Book a free call