Inspect

PNG Color Picker.

Click any pixel to get HEX, RGB, HSL, CSS variables, Tailwind class and Figma token. Magnifier lens, WCAG contrast checker, dominant palette extractor, compare colors, native eyedropper and URL loading. Runs 100% in your browser - nothing is ever uploaded.

7+export formats
0bytes uploaded
WCAGcontrast check

Drop your image here

PNG, JPG, WebP or GIF - click any pixel to pick its color

Dominant Colors
Auto-extracted from your image - click any swatch to load it into the picker
Color Comparison
- Color A
- Color B

Load an image and click any pixel to see its color values, Tailwind class, CSS variable and WCAG contrast scores

How to pick colors from an image

Drop any PNG, JPG, WebP or GIF onto the canvas - or paste an image URL into the bar above - and hover your mouse over it. The magnifier lens shows an 8x enlarged view of the pixels under your cursor. Click to lock in the color and instantly see its HEX, RGB, HSL, Alpha, CSS variable, nearest Tailwind class, Figma design token and WCAG contrast scores.

On Chrome or Edge 95+, the Eyedropper button lets you pick from anywhere on your entire screen. The Dominant Colors strip auto-appears after loading and shows the 6 most distinct colors in your image. Set any two colors as A and B to compare them and see the contrast ratio between them.

Frequently Asked Questions

No - not a single byte is uploaded. The PNG Color Picker runs entirely in your browser using the HTML5 Canvas API. Your image never leaves your device, and it also works offline once the page is loaded.

PNG, JPG/JPEG, WebP and GIF. Full alpha/transparency is supported for PNG - HEX codes include the alpha byte for semi-transparent pixels. You can also load images directly from a public URL.

For every picked pixel you get: HEX, RGB, HSL, Alpha, a CSS custom property (--color-picked: #hex), the nearest Tailwind CSS class (e.g. sky-500) and a Figma design token JSON. Transparent pixels switch to RGBA and HSLA notation automatically.

After picking a color the tool instantly calculates its contrast ratio against white and black and shows WCAG 2.1 AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) pass/fail badges. This is essential for accessible web design and UI development.

When you load an image the tool automatically samples thousands of pixels, groups them into color buckets and surfaces the 6 most visually distinct dominant colors as clickable swatches below the canvas. Click any swatch to load it into the picker panel.

In Chrome and Edge 95+ an Eyedropper button appears next to Browse File. Click it and then click any pixel anywhere on your screen - not just from the loaded image. The picked color loads into the panel instantly. The button only appears if your browser supports the native EyeDropper API.

Pick any color and click Set as A in the panel. Pick a second color and click Set as B. A comparison strip appears below the canvas showing both colors side by side with the WCAG contrast ratio and AA/AAA pass/fail badges between them.

Yes. Paste any public image URL into the URL bar above the canvas and click Load. The image host must allow CORS cross-origin access. Most CDNs and public image hosts support this. If loading fails a clear error message explains why.