ToolPetal
Image color picker
- Runs on your device
- Nothing uploaded
- Free, no sign-up
The image is opened in this tab with a canvas. It is never uploaded.
Drop an image here, click to choose one, or paste a screenshot with Ctrl+V or Cmd+V.
PNG, JPG, WebP, GIF, SVG, BMP and AVIF where your browser supports it.
Hover or drag to preview, click or tap to pick. With the image focused, arrow keys move one pixel (Shift for 10) and Enter picks.
Your picks
Main colors in the image
How to pick a color from an image
- Drop an image on the box, click it to choose a file, or copy a screenshot and paste it on this page.
- Move over the image. The loupe shows an 11 x 11 pixel zoom with the target pixel boxed, and the codes update live.
- Click or tap to keep the color. It goes into Your picks so you can collect several.
- Press Copy next to the format you need. Click any swatch to copy its HEX code.
- Use Main colors in the image for a quick palette of up to 8 dominant colors.
In Chrome and Edge on a computer a Pick from screen button also appears. It uses the browser's EyeDropper feature to grab a color from anywhere on your screen, not just the image.
Worked example: one color in five formats
Click the rose circle in the sample image and you get:
| Format | Value | Where it is used |
|---|---|---|
| HEX | #B5475F | CSS, Figma, Canva, most design apps |
| RGB | rgb(181, 71, 95) | CSS, Photoshop, screen work |
| HSL | hsl(347, 44%, 49%) | CSS, making lighter or darker tints |
| HSV | hsv(347, 61%, 71%) | Color wheels in Photoshop and Procreate |
| CMYK | cmyk(0%, 61%, 48%, 29%) | A starting point for print |
Getting the right pixel
- Photos have noise. Neighbouring pixels in a JPG can differ by a few values. Pick from the flattest part of the area, or check two or three picks.
- Edges blend. Text and logo edges are anti-aliased, so the outer pixels are a mix of two colors. Pick from the middle of a shape.
- Screenshots can shift color. Night mode, color profiles and compression all change pixels. For a brand color, use the original logo file if you can.
- CMYK here is a simple conversion. It does not use a printer profile, so ask your printer for the exact values before a print run.
Very large images (over 4096 pixels on the long side) are scaled down to that size so they stay quick to read. To convert a color code you already have, use the color converter.
Questions
How do I get the color code from an image?
Open the image here, move over the spot you want and click. The HEX, RGB, HSL, HSV and CMYK codes for that exact pixel appear on the right, each with a Copy button.
Can I pick a color from a screenshot?
Yes. Take the screenshot, then paste it on this page with Ctrl+V or Cmd+V. You do not need to save it as a file first.
Does it work on a phone?
Yes. Tap Choose to open a photo from your gallery, then tap the spot you want. Drag your finger to move the loupe before you lift it.
Is my image uploaded?
No. The picture is drawn on a canvas in your browser tab and read there. Nothing is sent to a server, and closing the tab removes it.
How are the main colors chosen?
The image is scaled down, similar colors are grouped together, and the most common groups that are clearly different from each other are shown, up to 8. It is a quick summary, not a print-accurate palette.
Why does the HEX code differ from the brand color?
Compression, screenshots, color profiles and edge blending all change pixels slightly. Pick from a flat area of the original file, or ask for the official brand values.