Free Image Color Picker
Click any pixel to get its HEX, RGB, HSL, HSV and CMYK values — with a live magnifier loupe for pixel-perfect precision. All in your browser.
Image
Color
What Is an Image Color Picker?
An image colour picker (also called an eyedropper tool) lets you sample any pixel from a photo and get its exact colour values. You click a spot on the image, and the tool reads the RGB data straight from the pixel — no guessing, no approximating by eye.
This is how designers match brand colours, developers grab accent colours from a hero image, and anyone can find the hex code of that perfect shade they saw in a photo.
Why use a magnifier loupe?
Photos are made of millions of tiny pixels, and at normal viewing size you can't see individual ones. The magnifier loupe solves this — it follows your cursor and shows a heavily zoomed view (typically 12×) of the pixels around it.
- Pick the exact pixel you want, not a nearby one.
- See subtle gradients — the sky at the top of a photo is a slightly different blue than at the horizon.
- Avoid JPEG artifacts — compression creates tiny colour noise near edges. Zooming lets you pick a clean pixel.
- Confirm the colour visually before copying it.
This is exactly how professional tools like Photoshop's eyedropper, macOS's Digital Color Meter, and Chrome DevTools' colour picker work.
The five colour formats
| Format | Example | Best for |
|---|---|---|
| HEX | #FF5733 | HTML, CSS, design tools — the universal format |
| RGB | rgb(255, 87, 51) | Screens, CSS, programmatic manipulation |
| HSL | hsl(11, 100%, 60%) | Adjusting colours — "make it lighter" or "less saturated" is intuitive in HSL |
| HSV | hsv(11, 80%, 100%) | Design tools — Photoshop, Figma, Illustrator use HSV internally |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Print production (approximate — always verify against a colour proof) |
HEX vs RGB vs HSL — when to use which
- HEX is the most compact and universally supported. Use it in CSS, HTML, SVGs and everywhere else. It's just RGB written in base 16.
- RGB is easier to reason about programmatically.
rgb(255, 0, 0)is obviously "full red". Use it in JavaScript, canvas code, and CSSrgba()for transparency. - HSL is best for thinking about colours. Want a lighter version of a colour? Increase lightness. Want a more muted tone? Decrease saturation. Hue stays constant. This is why designers love it.
- HSV looks like HSL but behaves differently. In HSV, 100% value is the brightest version of a hue — not white. Designers use it because it maps naturally to how colour pickers work.
Common use cases
Extract Brand Colours
Pull the exact accent colours from a logo, brand photo or design mockup.
Web Development
Sample colours from client-supplied screenshots for CSS variables.
Graphic Design
Match a colour from a reference image in Photoshop, Figma or Sketch.
Photography
Find the exact colour temperature of a sky, skin tone or sunset.
Fashion & Decor
Match paint, fabric or furniture colours from inspiration photos.
Palette Building
Sample several colours from one image and build a coordinated palette.
Print Preparation
Get CMYK values for a colour you need to reproduce on paper.
Game & UI Design
Match in-game colours for UI overlays, skins, and interface elements.
Accuracy notes
Colour pickers read the exact pixel data stored in the image file. What you see on screen may differ slightly because:
- Your monitor may not be calibrated. Two monitors can display the same #FF5733 with different tints. Trust the numeric values, not your perception.
- Browser colour profiles may apply sRGB, P3 or custom profiles — the raw pixel data doesn't change, but what you see does.
- JPEG compression introduces tiny colour variations. Zooming in with the magnifier lets you pick a "clean" pixel from a uniform area rather than one right on an edge.
- CMYK is approximate. Real print conversion depends on ink, paper and printer profile. The value shown is a mathematical approximation.
Privacy and security
This image colour picker runs entirely in your browser. Image loading uses FileReader, and pixel sampling uses the Canvas 2D API's getImageData. Your image is never uploaded, stored, or transmitted to any server — the entire pipeline stays on your device. Safe for confidential design assets, unreleased product photos, and any private material.