Color Picker from Image Online Free
Drop a photo, aim with the loupe, and copy the HEX, RGB, or HSL. Flat logos use one pixel. Photos can average a small patch. On a phone, zoom in and aim above your finger. The file stays in this tab.
Drop a photo to pick a color
JPG, PNG, WebP, GIF, BMP, or AVIF. One file under 40 MB. Paste a screenshot with Ctrl+V or ⌘V.
100% private — the pixels stay in this browser. Nothing is uploaded.
Move over the photo. The loupe is the real pixels. Click to lock. On a phone, aim above your finger.
Colors in this file
Locked colors
Chrome and Edge only. This reads the screen, not the file above.
100% local
The color picker runs in this browser. The photo never leaves the tab.
No upload
Nothing is sent to a server to read a pixel or build the palette.
Free, no account
No signup and no watermark on the code. Copy HEX, RGB, or HSL.
Also on this site: Split Image · Crop Image · Blur Image · Pixelate Image · Merge Images · Image Compressor
What is this color picker from image?
A color picker from image reads the color of a pixel in a file you already have and hands you the code. People also type image color picker, HEX color picker, or color picker from image online. The job is the same: a still in, a code out. It is not a search for pictures of colors, and it is not a filter that changes the photo.
Desktop eyedroppers and browser extensions read the screen. They cannot open a PNG sitting in Downloads, and they fail in browsers that have no screen-pick API. This page draws your file on a canvas and reads that canvas. Paste a screenshot, or drop the file. A remote web address is not accepted, because another site’s image usually cannot be read from this tab, and this page will not upload the file to work around that.
One pixel is the right read on a flat logo or a button fill. On a photograph it is often the wrong read. JPEG blocks, camera noise, and anti-aliased edges make neighboring pixels disagree, while the eye averages them. The 3×3 and 5×5 settings average that small patch so the code is closer to the color you see. The loupe draws those real pixels, with the center cell marked, so the pointer itself does not hide the spot.
HEX, RGB, and HSL are the same color
Copy the spelling the next app expects. The three codes below describe one locked pixel.
| Format | Example | Use |
|---|---|---|
| HEX | #1A73E8 | CSS, HTML, Figma, and most design tools. Six digits after #. |
| RGB | rgb(26, 115, 232) | The same color as red, green, and blue from 0 to 255. |
| HSL | hsl(214, 82%, 51%) | Hue, saturation, and lightness. Easier when you need a lighter or darker step. |
What you can do here
One file, a loupe, a zoom, a sample size, and codes you can copy. The palette keeps both the large areas and the stronger colors.
A loupe of the real pixels
The grid follows the pointer and draws an 11 by 11 block from the file, not a blurry zoom of the preview. The center cell is the pixel you are about to lock. Arrow keys move one pixel. Shift moves ten.
Fit, 2×, or 4×
Fit shows the whole file. 2× and 4× enlarge it so a small mark is easier to hit. Drag the enlarged file to move, then click or lift to lock. The loupe still reads the file’s own pixels.
1 px, 3×3, or 5×5
1 px is the single pixel, for logos and flat UI. 3×3 and 5×5 average the patch around it, for photos where neighbors disagree. Transparent pixels in the patch are skipped.
HEX, RGB, HSL, and a nearest name
Copy HEX, RGB, or HSL from the locked color. The name is the closest common color name by RGB distance. It is not the brand name printed on a package.
A palette from this file
Eight swatches mix the largest flat areas with the stronger colors, so a small logo is not buried under a white background. Click one to lock it. Near-duplicate browns are skipped. This is still not a brand style guide.
How to pick a color from an image
Add the file, aim, lock, copy. The preview is the file. There is no second convert step.
Add the photo
Drop a JPG, PNG, WebP, GIF, BMP, or AVIF, or paste a screenshot. The pixels are decoded in this tab.
Aim and lock
Use 1 px on a flat fill, or 3×3 / 5×5 on a photo. Click to lock. On a phone, zoom in if the mark is small. The sample sits above your finger. Lift to lock.
Copy the code
Copy HEX, RGB, or HSL. Download a flat swatch PNG of that color if you need a file, not just a code.
Why the color you see and the pixel disagree
The mismatch is in the file, not in the click. These are the cases this page is built to show you.
The edge of a letter is not the fill
Anti-aliasing mixes the fill with the background along every edge. A click on that fringe returns a third color. Aim at the middle of the flat area, and use 1 px.
A JPEG is stored in blocks
JPEG does not store a smooth sky as one code. Neighboring pixels jump. A 1 px read will hop as you move. A 5×5 average stays closer to the color the eye reports.
A screenshot is already compressed
If the picture was saved by a chat app or a screenshot tool, the original brand color may already be gone. This page reports the file you added. It cannot recover a code that is no longer in the pixels.
A finger covers the pixel
On a phone the sample sits above the finger, and the loupe shows those pixels. Lift to lock. If the mark is small, use 2× or 4× and drag the picture until the loupe is on it. Arrow keys move one pixel when a mouse is too coarse.
A color profile is not the pixel number
Photoshop can show a different HEX for the same spot when the file carries Display P3 or a print profile. This page reads the sRGB pixels the browser decoded, which is the number CSS and Figma paste. It cannot turn that number into a press proof, and it cannot undo a screenshot that already captured the monitor.
Before you trust the code
- On a logo, click the middle of a flat shape. The rim is a blend.
- On a photo, start at 5×5. Drop to 1 px only when you need one exact pixel, such as a single LED.
- If two clicks on the same sky give two HEX codes, that is the file. Average them with 5×5 instead of hunting for a pixel that matches your memory.
- The closest name can say “steel blue” for a brand blue. Paste the HEX into the design tool. Do not paste the name into CSS and expect a match.
- Animated GIFs use frame one. A later frame can be a different color.
- HEIC from an iPhone will not open here. Export JPG or PNG first.
- This page does not invent a print CMYK value. A screen pixel converted to ink is not a press proof.
- If Photoshop shows another HEX, the file may carry a color profile. This page reports the sRGB pixels the browser decoded.
Three jobs this page actually finishes
Each card is a file you have, a sample setting, and the limit of that read.
A logo for a stylesheet
You have a PNG of a mark and you need the fill in CSS.
File: A PNG or SVG exported to PNG, with a flat brand shape.
Setting: 1 px, aimed at the middle of the fill.
You copy: HEX, pasted into CSS or Figma.
Limit: The anti-aliased rim is a different code. Do not click the edge.
A screenshot of a site
You can see a button color and you cannot open the stylesheet.
File: A screenshot pasted from the clipboard.
Setting: 1 px on the flat part of the button, not the border.
You copy: HEX or RGB.
Limit: The screenshot’s compression, and the monitor it was taken on, may already have shifted the code.
A product photo
You want a workable color for a background tint, not a single noisy pixel.
File: A JPG of the product.
Setting: 5×5 on the material, away from highlights and shadows.
You copy: HSL, then a lighter step made in the design tool.
Limit: The patch is an average of that spot. It is not a measured brand chip.
This page and a desktop eyedropper
This page
Reads a file in the browser
Drop or paste a still. The loupe, the sample size, the HEX, and the palette all come from that file. No extension, no Windows app, no account. Chrome and Edge can also pick from the screen with the browser’s own eyedropper. That extra control is labeled as a screen pick. It does not read the file.
A different job
Screen pickers, editors, and filters
A desktop color tool or an extension watches the monitor. Photoshop can sample too, inside a full editor. Neither is required to read one code from a file you already saved. This site’s crop, blur, and pixelate pages change pixels. They do not hand you a HEX code. Split Image cuts a photo into tiles. Use those when the job is a new picture, not a code.
Questions about picking a color from an image
How do I pick a color from an image? +
Drop the photo on this page or paste a screenshot. Move over the image until the loupe sits on the color you want, click to lock it, then copy HEX, RGB, or HSL.
Is this color picker from image free? +
Yes. There is no account, no trial, and no watermark on the code. The read happens in the tab you already have open.
Do I need an extension or a Windows app? +
No. Extensions and desktop pickers read the screen. This page reads a file or a pasted screenshot in the browser. On Chrome and Edge you can also use Pick from screen, which is the browser’s own eyedropper and only sees the monitor.
How do I get the HEX code? +
Lock a pixel, then press Copy HEX. The code looks like #1A73E8. Copy RGB and Copy HSL are the same color in the other two spellings.
Why do two clicks on the same area give two codes? +
Photographs and JPEGs do not store one flat code for a sky or a shirt. Neighboring pixels differ. Use 3×3 or 5×5 to average a small patch. On a logo, stay on 1 px and click the middle of the flat fill, not the fringe.
Can I get the color name? +
The page shows the closest common name, such as steel blue or tomato. That name is a nearest match. It is not a brand name, and it will not round-trip to the same HEX if you type it into CSS.
Does the photo get uploaded? +
No. The browser decodes the file and reads the pixels on this device. Closing the tab clears it. There is no account attached to the read.
Can I paste a screenshot? +
Yes. Copy the screenshot, click this page, and paste. On a phone, use the file picker if paste is not offered.
Can I paste a web address and pick from that picture? +
No. A picture hosted on another site usually cannot be read from this tab, and this page will not upload your file to a server to fetch it. Save the image, then drop that file.
Will you give me a CMYK value for print? +
No. Converting a screen pixel to CMYK is not a press proof. Copy the HEX or RGB and do the print conversion in the app that knows the paper and the profile.
Does it work on a phone? +
Yes. The sample sits above your finger, and the color locks when you lift. Use 2× or 4× when the mark is small, then drag the picture to move it. Very large photos are sampled from a 2,000 px copy so the tab stays usable, and the page says so when that happens.
Why does Photoshop show a different HEX? +
The file can carry a color profile. Photoshop may show the number inside that profile. This page reads the sRGB pixels after the browser decodes the file, which is the value to paste into CSS or Figma. A screenshot is further along: it is already the monitor’s pixels. Neither reading is a CMYK press proof.
Pick a color from your image
Drop a photo or paste a screenshot. Lock a pixel. Copy the code. The file stays on this device.
Pick a color