How to get a color from an image
- Drop an image or screenshot into the box, or click Try a sample image.
- Hover over the picture to see a zoomed loupe, then click (or tap and release) to pick a color.
- Copy the HEX, RGB or HSL value with the copy buttons next to each code.
- Scroll to the palette, choose 5 to 10 colors, and copy the HEX list or the CSS variables block.
What you can do with Color Picker from Image
- Pixel-zoom loupe
- An 11 × 11 pixel magnifier follows your cursor or finger, so you can hit a one-pixel line or a small icon exactly.
- HEX, RGB and HSL
- Every pick shows all three color formats with one-click copy, ready for CSS, design tools or code.
- Automatic palette
- K-means clustering finds the 5 to 10 dominant colors and shows what percentage of the image each one covers.
- CSS variables export
- Copy the palette as a :root block of --color-1, --color-2 and so on, or as a plain comma-separated HEX list.
- Recent picks
- Your last 16 picked colors are kept as swatches. Click one to show its values again and copy its HEX code.
HEX, RGB and HSL colors from images explained
A color picker from image is the quickest way to match a brand color from a logo, reuse a shade from a photo, or check what color a website element really is from a screenshot. HEX codes such as #2438F0 are the standard for web and design tools. RGB lists the red, green and blue channels from 0 to 255, and HSL describes hue, saturation and lightness, which is easier to adjust by hand when you want a lighter or darker variant of the same color.
Picked values come from the decoded pixels, so they can differ slightly from the source file. JPG compression shifts colors near edges, and photos contain noise, so zoom in with the loupe and pick from a flat area rather than a border. The palette is built by grouping similar pixels and averaging each group, which gives representative colors rather than the single most frequent pixel. Fewer colors give a bold summary of the image; more colors capture accents. Transparent pixels are ignored when the palette is built.
Frequently asked questions
Is my image uploaded to pick colors?
No. The image is drawn onto a canvas in your browser, and colors are read directly from those pixels on your device. Nothing is uploaded, so you can pick colors from confidential mockups or client screenshots safely.
How do I get the HEX code of a color in an image?
Load the image, move your pointer over the spot you want and watch the loupe, then click. The HEX value appears next to the big swatch along with RGB and HSL. Press the copy button beside HEX to put it on your clipboard.
Why is the picked color slightly different from the original design?
Compression, color profiles and anti-aliasing change pixel values. JPG files in particular shift colors around edges, and photos have natural noise. Pick from the middle of a flat area, and use a PNG export or a lossless screenshot for the most accurate brand colors.
Can I extract a color palette from a photo?
Yes. As soon as an image loads, the tool calculates its dominant colors. Choose between 5 and 10 colors from the dropdown, click any swatch to copy its HEX code, or copy the whole set as CSS custom properties.
Does it work on a phone?
Yes. Touch and drag on the image to move the loupe, and lift your finger to pick the color under it. The palette and copy buttons work the same as on desktop.