What this image color picker does
This free online image color picker reads the exact color of any pixel in a photo, screenshot or logo and gives it to you as HEX, RGB and HSL. There’s nothing to install and no account to make.
Whether you search for a color picker, a colour picker (the spelling used in the UK, Canada and Australia) or an eyedropper, the idea is the same: point at a pixel, get its code. This page is a color picker from image files, so it works on photos, logos, screenshots and product shots alike.
It also builds a six-color palette from the dominant shades in your picture and checks whether black or white text reads better on the color you picked. Designers, developers, painters and anyone matching a paint chip to a screenshot can use it to stop guessing and start copying real values.
Why use this tool
- Pixel-exact results. You get the value your browser decoded for that pixel, not an estimate or a nearby average.
- No signup, no watermark. Open it and use it.
- Private by design. The image is drawn on a canvas on your device and never uploaded.
- Precision controls. A magnifier shows the pixels around your pointer, and the arrow keys nudge the marker one pixel at a time.
- Three formats at once. HEX for CSS, RGB for code and design apps, HSL for quick tweaks. It doubles as a hex color picker and an RGB finder in one place.
How a color picker from an image works
When you add a file, your browser decodes it into a grid of pixels. Each pixel is stored as four numbers: red, green, blue and alpha (opacity), every one from 0 to 255. This tool draws that grid onto an HTML canvas, then reads the numbers at the spot you clicked using the standard getImageData method.
That makes it a lookup, not a guess. There’s no averaging, no AI estimate and no server round trip. Think of it as an eyedropper tool online that works on files and screenshots instead of your live screen. The HEX and HSL codes are simple conversions of the same red, green and blue numbers, so all three always describe one identical color.
HEX vs RGB vs HSL: which color code should you copy?
Every pick shows three formats because different tools expect different ones. Here’s the same blue in each:
| Format | Example | Best for |
|---|---|---|
| HEX | #2563EB | CSS, Figma, Canva, brand guidelines, most hex color picker workflows |
| RGB | rgb(37, 99, 235) | JavaScript, canvas code, app settings and sliders that use 0–255 |
| HSL | hsl(221, 83%, 53%) | Making lighter, darker or duller variants, hover states and themes |
If you’re unsure, copy HEX. As a hex color picker, this tool returns six-digit uppercase codes like #2563EB, ready to paste into CSS. It’s the shortest and works in nearly every design tool and stylesheet. Switch to HSL when you want to adjust the lightness value by a few points without picking a new color.
Step-by-step guide to using the image color picker
1. Load your image
Drag a file onto the dashed box, tap it to browse, or press Ctrl+V (Cmd+V on Mac) to paste a screenshot straight from your clipboard. Pasting is the fastest route when you’ve just captured part of a screen.
2. Aim with the magnifier
Move your pointer over the image. The magnifier on the left shows an 11×11 pixel grid with the center pixel at its middle, and the line under it shows that pixel’s HEX code. On a phone, tap once to pick, then use the magnifier to confirm it was the right spot.
3. Pick and copy
Click, tap, or press Enter or Space on the focused image. The swatch updates and the three codes fill in. Press Copy next to the format you need. A confirmation appears under the tool.
4. Collect a palette
The Image Palette section lists up to six dominant colors. Click any chip to load it into the picker, or press “Copy palette as CSS” to get a ready-made block of custom properties like --color-1: #1A2B3C;.
5. Get cleaner samples
If you’re sampling a small icon, crop the image to the icon first so it fills the view. For large photos, resize the image to a manageable size before you start.
How to find a color code from an image on phone, Windows or Mac
On a phone
Open this page, tap the box and choose a photo from your gallery or take a new one. Tap the spot you want. If your finger covers the target, tap, then check the magnifier to confirm the pixel.
On Windows or Mac
Drag a file in, or paste a capture. On Windows, press Win+Shift+S, select an area, then press Ctrl+V on this page. On a Mac, press Control+Shift+Command+4 to copy a selection, then Command+V here. This is the quickest way to find a color code from anything visible on your screen, including websites, apps and PDFs.
From a PDF or video frame
Screenshot the part you need and paste it. Need a still from a PDF first? Our PDF to JPG converter turns pages into images you can sample.
Generate a color palette from an image
Besides single picks, the tool works as a simple image palette generator. It shrinks your picture to a 48×48 sample, groups similar shades into 16 levels per channel, counts how many pixels fall in each group, and keeps up to six that are clearly different from each other.
The result reflects the most common colors, not necessarily the most eye-catching ones. A small red button on a mostly gray screenshot may not appear, so click it directly. Use “Copy palette as CSS” to paste the colors into a stylesheet as --color-1, --color-2 and so on. Turn a palette into icons with the Favicon Generator, or read text from the same image with Image to Text.
Supported formats, specs and limits
| Item | Detail |
|---|---|
| Input formats | JPG/JPEG, PNG, WebP, GIF (first frame), BMP |
| Maximum file size | 50 MB |
| Sampling size | Images over 4096 px on the long side are scaled down before sampling |
| Output formats | HEX (#RRGGBB), RGB (0–255), HSL (degrees and percentages) |
| Transparency | Semi-transparent pixels are blended over white; fully transparent pixels are flagged |
| Palette | Up to 6 dominant colors, grouped in 16 levels per channel |
| History | Last 12 picks, kept only while the page is open |
| Input methods | Drag and drop, file browser, clipboard paste, keyboard |
Use cases
- Web designers use the color picker to match a client’s logo color without asking for a brand guide.
- Front-end developers pull HEX values from a mockup screenshot into CSS.
- Brand managers check that a printed flyer and a website use the same blue.
- Painters and crafters photograph a swatch or a sunset and note the closest digital color.
- Interior decorators capture wall or fabric tones from room photos for mood boards.
- Teachers and students explore how RGB and HSL numbers map to real colors.
- Social media creators build a thumbnail palette from a hero photo.
Key features and benefits
- Live pixel magnifier with 11×11 zoom
- One-click copy for HEX, RGB and HSL
- Dominant-color palette with CSS export
- Black or white text contrast ratio for each pick
- Clipboard paste, drag and drop, and full keyboard control
- Light and dark themes that follow your system
Expert tips and common mistakes
Don’t trust one pixel in a JPG
JPG compression adds tiny color noise. If a sky looks like one flat blue, click three or four nearby pixels and use the one that repeats. Photos with gradients should be sampled at the exact spot where you need the color, not “somewhere around there.”
Avoid anti-aliased edges
The edge of a letter or logo blends into the background. Pick from the thick middle of a shape, not its outline.
Screenshots beat photos for brand colors
A phone photo of a poster bakes in lighting and white balance. A screenshot of the digital original keeps the real values. Save screenshots as PNG, since lossy formats shift colors slightly.
Check contrast before you use it
A color that looks great as a background can fail for text. The contrast line below the codes follows the WCAG formula, where 4.5:1 is the usual minimum for body text. Read more about web colors on Wikipedia.
Keep the file small if you only need colors
You don’t need a 40 MB original. Compressing the image first keeps sampling quick, but compress lightly, since heavy compression changes colors.
Privacy and security
Your files are processed in your browser and are never uploaded. When you add an image, the page draws it onto an HTML canvas on your device and reads pixel values from that canvas. There’s no upload step in the code, and your recent picks live only in memory until you close or refresh the tab.
The page doesn’t ask for an account, so there’s no login data to protect. Use only images you own or have the right to use.
This tool vs. alternatives
| Feature | This browser tool | Desktop design software | Server-based online pickers |
|---|---|---|---|
| Install needed | No | Yes | No |
| Image leaves your device | No | No | Often yes |
| Cost | Free | Free or paid | Varies |
| Best for | Quick codes from any image | Full color-managed workflows | Quick checks when upload is acceptable |
| Color-profile control | Browser decoding only | Advanced | Varies |
If you need strict print color management, a desktop editor is the right pick. For fast web colors, a browser-based color picker from image is usually quicker.
Troubleshooting
- “Unsupported file type” message. Convert the file to JPG or PNG first. HEIC images need a conversion, and our HEIC to JPG converter handles that.
- File too large. The limit is 50 MB. Shrink it with the resize or compress tools, then try again.
- Image won’t load. The file may be corrupted or renamed from another format. Re-export it from the original app.
- Copy button does nothing. Some browsers block clipboard access on insecure pages. Select the code in the box and copy it manually.
- Color differs from my design app. Check the app’s color profile. Browsers may convert profiled images to the screen’s space.
- Pick lands off target on a phone. Zoom the page, or crop the image so your target is larger.
- Transparent area returns white or a warning. The pixel has no color. Pick from the opaque part of the image.
- Paste doesn’t work. Click the page first, then paste. Only image data is accepted, not file paths.
Glossary
- HEX
- A six-digit hexadecimal color code such as #2563EB, used heavily in CSS.
- RGB
- A color model that mixes red, green and blue light, each from 0 to 255.
- HSL
- Hue (0–360°), saturation and lightness. It’s handy for making a color lighter or duller.
- Dominant color
- A shade that covers a large share of an image’s pixels.
- Contrast ratio
- A WCAG measure of how readable text is against a background. See CSS color values on MDN for syntax.
Frequently asked questions
Is this image color picker free?
Yes. It’s free with no signup, no watermark and no limit on how many colors you pick. Your own device does the work, so there’s nothing to install and nothing to pay for.
Is it safe to use my photos here?
Your images are processed in your browser and are never uploaded. The file is drawn onto a canvas on your device and pixel values are read locally. Nothing is sent to a server, so private screenshots and client files stay with you.
Do I need to create an account?
No. Open the page, drop in a picture and start picking. There’s no login, no email prompt and no trial period, so you can finish in a few seconds.
Which image formats and sizes are supported?
JPG, PNG, WebP, GIF and BMP up to 50 MB. Images larger than 4096 pixels on the long side are scaled down for sampling to keep the tool fast, so a single-pixel pick on a huge photo can differ slightly.
Does it work on my phone?
Yes. Tap anywhere on the image to pick a color. The layout stacks on small screens and every button is at least 44 pixels tall. For pixel-level accuracy, crop the image first or use the arrow keys on a keyboard.
Is the picked color exact, or is there quality loss?
You get the exact value your browser decoded for that pixel, and nothing is recompressed. JPG files contain compression noise, though, so neighboring pixels in a flat-looking area can differ by a few values.
Can I use it offline?
After the page has loaded, picking works without a connection because no server is involved. Loading the page itself offline depends on your browser cache, since this is a normal web page and not an installable app.
What’s the difference between HEX, RGB and HSL?
They describe the same color three ways. HEX is a six-digit code used in CSS and design tools. RGB lists red, green and blue from 0 to 255. HSL gives hue in degrees plus saturation and lightness percentages, which is easier to adjust by hand.
How do I find the HEX code of a color in a picture?
Upload the picture, click the exact spot, and read the HEX line in the Picked Color panel. Press Copy to put it on your clipboard. Choose a solid area rather than an edge, since edges blend into their background and change the result.
Can I pick a color from a screenshot?
Yes. Paste a screenshot with Ctrl+V or Cmd+V, or drop the saved file. Screenshots suit brand colors best because they keep the on-screen values, while a phone photo of a screen adds glare and white balance shifts.
How do I get a color palette from an image?
Load the image and check the Image Palette section. It lists up to six dominant colors. Click a chip to load it, or press Copy palette as CSS to get custom properties you can paste straight into a stylesheet.
Is a colour picker the same as a color picker?
Yes. “Colour” is the British, Canadian and Australian spelling and “color” is the American one, but both names mean the same tool. Whichever you search for, this page lets you pick a color from any image and copy its HEX, RGB or HSL code.
Why does a color look different in Photoshop or Figma?
Color profiles and display settings. This tool reads the values your browser decodes, and browsers may convert images that carry embedded profiles. Small differences against design software are normal, especially on wide-gamut photos.
Pick your first color now
Need a quick color picker for a mockup, a colour picker for a print brief, or a hex color picker for CSS? An image color picker saves you from eyeballing shades and guessing at codes. Scroll back up, drop in an image, and copy the exact HEX, RGB or HSL you need. It’s free, it’s private, and it takes a few seconds. Need to prep the image first? Try the tools below.