How do I pick an exact color from an image (eyedropper)?
Image eyedropper online - drop a photo, hover over any pixel, see the exact color (HEX, RGB, OKLCH). Click to add it to a palette.
Designed for designers: pulling colors from brand assets, competitor-site screenshots, product photos.
Everything runs locally - image never leaves your browser.
We also return OKLCH (perceptually uniform color space) - the modern CSS standard since 2023, used by Tailwind v4.
How to use it
- Upload a photo - PNG, JPG, WebP, AVIF, HEIC.
- Hover over the image - the pixel under the cursor shows below with HEX / RGB and coordinates.
- Click anywhere to add the color to the palette on the right. Max 12 colors - newer push older out.
- Click any HEX / RGB / OKLCH value in the palette to copy.
When this is useful
Where the eyedropper pays off - typical scenarios:
- Brand assets - client sent you a PNG logo, you need exact colors for CSS.
- Competitor research - screenshot from a competitor site, want their exact accent blue.
- Product photos - pull a representative color from the dress photo to compose store-page backgrounds.
- UI design - exported screenshot from Figma / Sketch, verify final colors after rendering.
- OKLCH workflow - if you work with modern CSS color (Tailwind v4, OKLCH design tokens), tool returns ready-to-paste OKLCH coordinates.
Questions and answers
No. Everything runs locally - image loaded via Canvas API, pixel sampling via `getImageData`. DevTools → Network = no requests.