This image color picker finds the exact color of any pixel in a photo, screenshot or logo and gives you its HEX, RGB and HSL code. A zoom loupe helps you hit the right pixel on a phone or computer, and the tool also extracts a palette of 5 to 12 colors with the dominant and average color. The image never leaves your browser.
How to use
- Open an image, drop it on the card or paste a screenshot with Ctrl+V. A sample image is shown until you do.
- Move the pointer over the image to see the loupe, then click to pick that pixel. On a phone, hold your finger on the image, slide until the loupe shows the right pixel, and lift.
- Tap HEX, RGB or HSL to copy the picked color. Recent picks stay in the row next to the big swatch.
- The palette updates on its own. Choose 5 to 12 colors and the method, tap a swatch to copy it, then export the palette as CSS, JSON or a PNG swatch.
- K-means groups similar colors and usually gives the most natural palette. Median cut splits the color range evenly and keeps small accent colors.
- The dominant color is the largest group in the palette. The average color is the mean of every visible pixel, so it is often a muted tone.
- Large images are scaled to 2400 pixels on the long side for picking, which keeps flat areas exact. Fully transparent pixels are ignored.
- The image stays in your browser. Nothing is uploaded.
Picking an exact pixel
Move the pointer over the image to see an enlarged loupe, then click. On a touch screen, hold your finger on the image, slide until the loupe shows the pixel you want and lift. Large images are scaled to 2400 px on the long side for picking, which keeps flat areas such as logos and UI colors exact. Photos have noise, so neighboring pixels of a sky or a shirt often differ by a few values; the palette gives a more representative color.
How the palette is built
K-means groups similar colors and usually gives the most natural palette for photos. Median cut splits the color range evenly and keeps small accent colors, which suits illustrations and brand images. Each swatch shows its share of the image.
The dominant color is the largest group. The average color is the mean of every visible pixel, so it is often a muted tone that does not appear in the picture itself. Fully transparent pixels are ignored.
Using the codes
HEX (#1e88e5) is the usual format for CSS, design tools and brand guides; RGB gives the same color as red, green and blue from 0 to 255; HSL describes hue, saturation and lightness, which makes lighter or darker variants easy. Export the palette as CSS variables, JSON or a PNG swatch sheet.
Frequently asked questions
How do I find the color code of something in a picture?
Open the image, move over the spot with the loupe and click or lift your finger. The HEX, RGB and HSL codes appear next to the swatch, and a tap copies them.
Can I pick a color from a screenshot?
Yes. Press Ctrl+V to paste a screenshot directly, or drop the file. Screenshots are ideal because their colors are not changed by camera noise.
Why is the picked color slightly different from the real brand color?
JPEG compression and camera processing change pixel values a little. For logos, use the original PNG or SVG file if you can, or compare a few nearby pixels.
What is the difference between dominant and average color?
The dominant color is the largest group of similar pixels. The average blends all pixels together, so a red and blue image averages to a purple that may not appear anywhere.
How many colors can the palette have?
Between 5 and 12. Fewer colors give the main theme; more colors also catch small accents.
Is my image uploaded?
No. The image is read and analyzed in your browser and is never sent anywhere.