PNG Color Picker
Read the exact colour of any pixel in a PNG. Click anywhere on the image to sample; the tool shows you HEX, RGB, HSL and CMYK values for that point. Useful for design system audits, brand colour extraction and screenshot inspection.
When you need a colour picker
Picking colours from existing images is one of those small design tasks that comes up constantly: matching a brand colour from a logo PNG when no brand guidelines exist, extracting the exact background colour from a screenshot, sampling a palette from a photograph for a moodboard, or verifying that a designed UI matches its mock-up pixel-for-pixel. Native tools exist (macOS Digital Color Meter, Windows PowerToys Color Picker, browser DevTools eyedropper), but they need you to have the image open in a specific app first. A web-based picker that works on any PNG you can drag onto the page is often faster.
This tool gives you four different code formats for every pick:
- HEX —
#FF6B35. The web standard. Use in CSS, HTML attributes, design tools. - RGB —
rgb(255, 107, 53). Modern CSS, also the format every programming language understands. - HSL —
hsl(16, 100%, 60%). Useful when you want to adjust hue/saturation/lightness independently. CSS supports it directly. - CMYK —
cmyk(0%, 58%, 79%, 0%). Print workflow. Approximate — true CMYK requires a colour profile.
How this tool works
Your PNG is loaded into a canvas. When you click, the tool calls getImageData(x, y, 1, 1) at the click coordinates, reads the four bytes representing that pixel's RGBA, and converts the RGB values into the other colour spaces using standard formulas (HSL via the canonical W3C conversion, CMYK via the basic device-CMYK formula). The alpha value is shown separately as a 0–255 number.
The colour values come straight out of the PNG's stored data — there's no interpretation. If the PNG has an embedded ICC colour profile, browsers usually respect it during decoding, so the displayed colour matches what you'd see in any other browser.
HEX, RGB, HSL, CMYK — when to use each
HEX
The most concise way to write a colour. Two hexadecimal digits per channel (R, G, B), so #FF6B35 means red=255, green=107, blue=53. Used everywhere on the web. The only downside: hard to mentally adjust ("I want this slightly darker" requires maths). For machine consumption, HEX is fine; for design work, HSL is easier to reason about.
RGB
Same information as HEX but in decimal. rgb(255, 107, 53) means red=255 etc. Easier to read for non-developers; takes more characters. Modern CSS supports a no-comma form: rgb(255 107 53) and optional alpha rgb(255 107 53 / 0.5).
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Much more intuitive for design: H tells you what colour, S tells you how vivid, L tells you how light/dark. Want this same colour but darker? Just lower the L. Want a complementary colour? Add 180 to H. CSS, JS, design tools all speak HSL natively.
CMYK
Cyan, Magenta, Yellow, Key (black). Used in print workflows because printing inks are subtractive. The values shown here are a quick computational conversion from RGB; for production print, you'd run the image through a colour-managed pipeline using an ICC profile that knows the specific press, paper and ink set. Use these CMYK numbers as a starting point, not as final press values.
Common uses for this picker
- Brand colour extraction — sample a logo or marketing PNG to recover the exact colour for use in your own design.
- Design audit — verify that your implemented page matches the design file pixel-for-pixel by sampling spots in screenshots.
- Mood-board building — pick five colours from a photograph for a new design palette.
- Accessibility check (with caveats) — sample foreground/background colours and feed them into a contrast checker. Note: this tool gives you the colours; contrast ratios need a separate calculation.
- Matching colours across tools — pick from a PNG in this tool, paste the HEX into Figma/Photoshop/your editor.
- Recovering paint colours from photos — sample a wall colour you liked and bring the HEX to a paint store's mixer.
Tips and best practice
- Sample several spots, not one. Photographic colour has variation. For a "true brand red" pick, sample five spots and pick the median.
- Be aware of JPG noise. If your source was JPG (even if now saved as PNG), adjacent pixels often have slightly different RGB values due to compression. The colour you "see" is averaged by your eye; the raw pixel may be a few values off.
- Watch for monitor calibration drift. The HEX you pick is mathematically exact, but your monitor may render it slightly differently than another monitor. For brand-critical work, calibrate.
- For dark backgrounds, the on-screen pixel and the "design intent" can differ. Antialiased text on a dark background has many semi-transparent dark grey pixels that aren't the actual text colour. Sample the centre of larger solid shapes for accuracy.
FAQs
Why doesn't the picked colour match my image editor's eyedropper?
Most often a colour-profile / display calibration mismatch, or anti-aliasing at the click point. Sample the centre of a larger solid region.
Can I pick from a region instead of a single pixel?
This tool reads a single pixel at the click point. For region-averaging, sample several pixels and compute the mean — or use a dedicated dominant-colour tool.
Are the CMYK values exact?
They're a basic RGB-to-CMYK approximation, suitable for non-critical reference. Production print requires a colour-managed workflow with the destination's ICC profile.
Is anything uploaded?
No. The pick runs entirely in your browser using getImageData.
Will this work on JPG or WebP?
Yes — the tool accepts any image format the browser can decode.
How precise is the pick?
Exactly one pixel. The displayed image may be scaled down to fit your screen; the underlying canvas data is the full original resolution and click coordinates are mapped accordingly.