Image Color Picker

Need to know the exact color in a logo, a photo or a screenshot? Upload the image, hover over the spot you care about and click. The color code goes straight to your clipboard in the format you picked: HEX, RGB, HSL, HSV or LCH. Nothing to install, and your image never leaves your computer.

How to get a color from an image

1. Upload an image. Drag it into the window or click “Browse files”. JPG, PNG, WebP and GIF all work.
2. Choose a format. Above the image, pick how you want the color copied. HEX is usually what the web needs, RGB is common in design apps. The tool remembers your choice.
3. Hover over the color. A loupe appears next to the cursor with the surrounding pixels magnified and the color code underneath.
4. Click. The code is on your clipboard and the color is saved under Picked colors. Paste it wherever you need it.

Want to try another image? Drop it right onto the current one, or remove it with the trash icon.

What this eyedropper tool can do

A loupe that shows every pixel

A basic eyedropper only shows the color under the cursor, so hitting the thin edge of a letter is guesswork. Our loupe magnifies an 11 × 11 pixel area around the cursor and frames the pixel in the middle. You see exactly what you are about to click before you click it.

Zoom down to single pixels

Use the plus and minus buttons, or scroll with Ctrl held down, to zoom in up to 64 times. Turn on the grid and pixel borders become visible, so you can click precisely on icons, pixel art or tiny text.

Colors from the original, not a thumbnail

Many online eyedropper tools shrink the image first and read colors from the preview, where neighboring pixels blend together. This one works with the image at full resolution (up to 4096 px on the long side), so you get the real color of the pixel.

One click copy

No selecting text, no retyping numbers. Every click on the image copies the code in the format you chose. If you need the same color in another notation, the color detail lists all five formats, each with its own copy button.

Dominant color palette

As soon as the image loads, the tool finds up to eight colors that dominate it and shows them under Dominant colors. Near identical shades are merged, so the palette is not five versions of gray, and transparent areas of a PNG are ignored. Use it as a starting point for a website, a slide deck or social media graphics. To check whether the colors still hold enough contrast without hue, convert the image to grayscale.

Picked colors always in view

Every color you click is stored under Picked colors (the last 24). Compare several spots in the image and come back to any of them later. On a large screen the color panel sits right next to the image.

When you need a color code from an image

• Websites and apps: The client sent the logo only as a JPG and you need the exact brand color for your CSS. If you also need a version with a transparent background, remove the background.
• Graphics and social media: You want the text on a post to match the photo. Take the color straight from it.
• Presentations and documents: Set your company logo colors in PowerPoint, Google Slides or Canva using HEX or RGB.
• Design QA: Check on a screenshot whether a button in the app really uses the color the design calls for. Then verify the size of exported assets with the image dimension analyzer.
• Interiors and fashion: You have a photo of fabric or a wall and want a similar shade. The code is a good starting point when browsing a color chart.

Color formats you get

• HEX (#1373b6): the notation used in HTML, CSS and most design tools. See the MDN reference for the short and alpha variants.
• RGB (rgb(19, 115, 182)): the amount of red, green and blue, each from 0 to 255. The RGB color model is how screens mix light.
• HSL (hsl(205, 81%, 39%)): hue, saturation and lightness. Handy for making a lighter or darker variant.
• HSV: hue, saturation and value, as used in the color dialogs of Photoshop or GIMP. Wikipedia explains how HSL and HSV differ.
• LCH: a model that follows how the human eye perceives color. It is copied in the syntax modern CSS understands.

The eyedropper tells you which color is in the image. To fine tune it, convert it to more formats or find shades that go with it, continue to the color wheel.

Frequently asked questions

Is my image uploaded to a server?

No. The image is loaded and processed right in your browser. It is never sent anywhere and nothing is left behind once you close the page, so you can safely use the tool on internal files or unreleased designs.

How do I find the HEX code of a color in a photo?

Upload the photo, keep HEX selected above the image and click the spot with the color you want. The code, for example #75dab2, is on your clipboard right away.

Why does the color from a photo look different from real life?

Cameras change colors through lighting, white balance and compression. The eyedropper returns exactly the color stored in the file. With photos, click a few different spots and compare them under Picked colors. If you are mixing paint based on the code, treat it as a rough guide.

Does the image color picker work on a phone?

Yes. Tap a spot in the image and the code is copied just like on a computer. The loupe next to the cursor is not shown on touch screens, so zoom in first when you need a small detail.

What is the difference between HEX and RGB?

Both describe the same color. RGB uses three numbers from 0 to 255, while HEX writes the same numbers in hexadecimal after a # sign. For example, rgb(255, 87, 51) is the same as #ff5733.

How do I get a whole color palette from an image?

Open the Dominant colors tab. It shows up to eight main colors of the image, and clicking any of them copies its code.