PDFConvertersOnline.comHow to pick a color from an image
- Choose a photo, screenshot or logo. The main colors of the image appear below it right away.
- Move over the image to see a magnified view of the pixels, then click or tap the exact spot you want.
- Copy the color as HEX, RGB or HSL. Every color you pick is kept in a row of swatches.
What designers and developers use it for
- Matching a brand color from a logo when nobody can find the style guide.
- Building a palette for a website, slide deck or social post from a photo you like.
- Copying a color from a screenshot of an app or web page to reproduce it in code.
- Choosing paint, fabric or yarn to go with a picture, as a starting point before you compare real samples.
- Checking contrast, by picking text and background colors and testing them in a contrast checker.
Precise picking with the magnifier
Neighboring pixels in a photo are rarely exactly the same color, especially in JPG files, where compression adds slight noise. The round-cornered magnifier shows an 11 × 11 block of pixels enlarged, with the pixel you will pick outlined in the middle, so you can aim at a single pixel instead of guessing. On a phone, press and drag: the magnifier floats above your finger so it doesn't hide the spot, and the color is picked when you lift. With a keyboard, focus the image and use the arrow keys, then press Enter.
HEX, RGB or HSL?
All three describe the same color; they are just written differently. CSS accepts every one of them.
| Format | Example | Best for |
|---|---|---|
| HEX | #3563E9 | Web design, design apps and brand guides. Short and easy to paste. |
| RGB | rgb(53, 99, 233) | Code and graphics tools that ask for red, green and blue values from 0 to 255. |
| HSL | hsl(225, 81%, 56%) | Making variations: keep the hue and change lightness for a hover color, or lower saturation for a muted tone. |
If the pixel is partly transparent, as in some PNG logos, the codes include the transparency: an eight-digit HEX, rgba() and hsla().
The main colors of the image
Below the picture, the tool lists up to eight colors that cover most of the image. It works by repeatedly splitting all the pixels into groups of similar colors and averaging each group, a method called median cut. The percentage shows roughly how much of the picture each color covers. Because the colors are averages, a palette swatch may not match any single pixel exactly; use the picker when you need an exact value.
Good to know
Colors are read after the browser has converted the image to standard sRGB, the color space of the web. A photo saved with a wide-gamut profile can therefore give slightly different numbers than a photo editor that works in that profile. Very large images, over about 24 megapixels, are scaled down for picking, which makes no visible difference to the colors. To grab a color and then edit the picture, try Add Text to Image.
Frequently asked questions
How do I get the HEX code of a color in a picture?
Open the image, click or tap the spot you want, and press the copy button next to HEX. The code is copied in the usual #RRGGBB form.
Why do I get slightly different values when I click next to the same spot?
Photos contain small variations between neighboring pixels, particularly in JPG files. Use the magnifier to aim at one pixel, or pick a few and choose the one that looks most typical.
Can I pick colors from a screenshot?
Yes. Take the screenshot, save it, and open the file here. On a computer you can also paste a copied screenshot directly onto the page.
Is my image uploaded?
No. The picture is drawn and analyzed inside your browser, so it never leaves your device.
Does it work with transparent PNG files?
Yes. Transparent areas show a checkered background, and picked colors include the transparency level. Fully transparent pixels are left out of the main colors.