Hex Color Picker from Image: Get HEX, RGB and HSL Codes
Upload, drop or paste an image into this hex color picker from image tool, then click any pixel to get its HEX, RGB, HSL and CMYK code. Zoom in for exact pixels, pull a color palette from the photo, check text contrast and export your saved colors. Free and private.
By Troopus · Updated: October 24, 2026
- HEX, RGB, HSL, CMYK
- Zoom and magnifier
- Palette extractor
- Image never leaves your device
Hex color picker from image: pick colors from your picture
Click or tap a pixel to pick it. Hover to preview. Arrow keys move one pixel (hold Shift for 10).
Saved colors
Palette from this image
How do I get a hex color code with a hex color picker from image?
To get a hex color code from an image, upload the picture and click the pixel you want. The tool shows its HEX code, such as #0A3D91, along with the RGB, HSL and CMYK values. Press Copy next to any format, or save the color to a list.
- Choose an image, drop one on the picture area, or paste a screenshot with Ctrl+V (Cmd+V on Mac). No file handy? Try the sample image.
- Move over the picture to preview colors, then click or tap to pick one. The magnified view shows the exact pixels around your pointer.
- Copy the format you need. Every pick is added to Saved colors.
Type a HEX code or RGB values into the HEX box to convert them. The contrast line shows whether white or black text is readable on the color. On Chrome and Edge, a button also picks a color from anywhere on your screen.
Used as a hex color finder from image uploads, it works the same way for logos, photos and screenshots.
HEX, RGB and HSL: what is the difference?
HEX, RGB and HSL describe the same color in different notations. HEX and RGB both use red, green and blue amounts, written in base 16 or 0 to 255. HSL uses hue, saturation and lightness, which makes it easier to make a color lighter or darker by hand.
| Format | Example | Typical use |
|---|---|---|
| HEX | #0A3D91 | CSS, design tools, brand guides |
| RGB | rgb(10, 61, 145) | CSS, code, image editors |
| HSL | hsl(217, 87%, 30%) | CSS themes and tints |
| CMYK | cmyk(93%, 58%, 0%, 43%) | Rough print reference |
In #0A3D91, 0A, 3D and 91 are the red, green and blue amounts in hexadecimal, which equal 10, 61 and 145. The CMYK value is a simple conversion. Real print colors depend on printer, ink and paper, so it is not press-ready.
How does the image color picker find an exact pixel?
To pick an exact pixel, raise the zoom slider, keep the sample size on "Exact pixel" and use the magnifier to place the pointer. You can also move one pixel at a time with the arrow keys after clicking the image, and 10 pixels at a time with Shift.
The magnifier next to the color swatch shows a 9 x 9 pixel area around the pointer, with the picked pixel boxed in the middle. Above 3x zoom the picture is drawn with hard pixel edges, so you see real pixels instead of a blurred image.
For photos, a single pixel can be an outlier because of sensor noise and JPEG compression. Switch the sample size to 3 x 3 or 5 x 5 to average the neighbors. Use the exact pixel for flat colors in logos, icons and screenshots.
How to extract colors from image files and build a palette
Load the photo and the Palette section lists its main colors automatically, with the share of the image each one covers. Choose 3 to 12 colors. Click a swatch to see its codes, or press Save all palette colors to export the set as a HEX list, CSS variables or JSON.
The palette uses a median cut method on a reduced copy of the image: it repeatedly splits the pixels into groups by their widest color range and averages each group. The percentage on each swatch is the share of sampled pixels in that group, so it is a good guide to dominant colors but not an exact area measurement.
| Format | Looks like |
|---|---|
| HEX list | #0a3d91 one per line |
| CSS variables | --color-1: #0a3d91; inside a :root block |
| JSON | An array with hex, rgb and hsl for each color |
How to find color code from image logos and screenshots
To match a color from a logo or screenshot, zoom in, use the exact pixel mode and click the middle of a solid area, away from edges. Edges are anti-aliased and blend two colors. A PNG screenshot is lossless, while a JPG logo may be off by a few values.
- Pick in the interior. Pixels on curved or diagonal edges are a mix of the shape and its background.
- Check two or three spots. If they agree, you have the flat color. If they differ slightly, the file was compressed.
- Prefer the source file. A PNG logo gives a cleaner result than a screenshot of a web page.
If your brand color matters legally or in print, confirm it against the official brand guide. A picked pixel is a close match, not a specification. Need a signature in that color? The signature maker has an ink color picker.
Is my image uploaded anywhere?
No. Your image is opened and read inside your browser and is never uploaded, stored or sent to a server. The pixels are read with the browser's canvas, and closing the tab discards the image. Saved colors also live only in the open page.
The tool makes no network requests with your image and stores nothing, so it suits unreleased designs and private screenshots. The sample image is drawn by the page itself.
Very large images are scaled down to a maximum of 5,000 pixels on the longest side for picking, and the tool tells you when it does so. Pick from the original in a desktop editor if you need exact values from a huge file.
Frequently asked questions
How do I get hex code from image files like a JPG or PNG?
Upload the image above and click the color you want. The HEX code appears next to the swatch, such as #0A3D91, with a Copy button. Zoom in and use the magnifier if you need a specific pixel.
How do I get a color from a picture online for free?
Choose an image, click the pixel you want and copy its code. The tool is free, needs no sign-up and adds no watermark. It works with photos, logos and screenshots in common image formats such as PNG, JPG, WebP and GIF.
Is this an image color palette generator?
Yes, as well as a single-pixel picker. Load a photo and the Palette section lists its main colors with the share of the image each one covers. Choose 3 to 12 colors and export them as a HEX list, CSS variables or JSON.
How can I extract a palette from an image?
Load the image and look at the Palette section. It lists the main colors with the share of the image each covers. Choose how many colors you want, click one to see its codes, or save the whole set and export it as CSS variables or JSON.
Why does the picked color look slightly different from the original?
Photos have noise and JPEG compression, so neighboring pixels differ slightly. Color profiles and screens also change how a color looks. Try the 3 x 3 or 5 x 5 average, and pick from flat areas away from edges.
Can I paste an image from the clipboard?
Yes. Copy an image or take a screenshot, click outside any text box on the page and press Ctrl+V (Cmd+V on Mac). The image loads straight into the picker. Dropping a file on the picture area works too.
Is there an eyedropper tool online for any page?
Chromium browsers such as Chrome and Edge have a built-in EyeDropper feature, and this tool shows a button for it when available. It lets you pick any color on your screen. Safari and Firefox may not support it, so use the image picker instead.
Can I pick a color from a transparent PNG?
Yes. Partly transparent pixels are shown blended over white, and the tool notes when that happens. Fully transparent areas therefore read as white, so pick from an opaque part of the image.