Quick answer: An image color picker reads the red, green and blue values of the pixel you click and shows them as HEX, RGB and HSL codes. It also finds the main colors of a picture by grouping similar pixels. Photos contain noise, so two neighboring pixels of the same wall can differ slightly.
Matching a color to a photo, a logo or a screenshot is a common design job: a brand color in a picture, a shade of paint, an outfit, or a sunset you want in your website. This tool works like an eyedropper for any image. Load a picture, move over it to preview colors, and click to get the exact code.
It also picks out the main colors in the image automatically, as a palette you can click. Everything happens in your browser, so your images stay private.
Using the picker
- Load an image by dropping it in or choosing a file. Move the pointer over it to see the color under it, and click to lock that color and get its codes.
- Click any swatch in the palette to use one of the main colors of the picture.
- Copy the HEX code for web design, RGB for CSS and graphics tools, or HSL when you want to make lighter or darker shades.
The color you get is the color of one pixel in the image. Photos are noisy, so two neighboring pixels of the same wall can differ slightly. To get a smoother reading, click a few nearby spots. The palette averages many pixels so it is more stable. Screens and printers show colors differently, so a code from a photo will not match paint or print exactly.
A worked example
Example. Open a photo of a sunset, click the orange of the sky, and you get a value such as #F28C38, the same color as rgb(242, 140, 56). The palette underneath lists the main colors in the picture, which is handy for matching a design to a photo.
Color formats
| Format | Example | Used for |
|---|---|---|
| HEX | #F28C38 | Web design and CSS |
| RGB | rgb(242, 140, 56) | CSS and graphics tools |
| HSL | hsl(28, 88%, 58%) | Making lighter and darker shades |
| CMYK | not shown here | Print, which uses ink instead of light |
The three screen formats describe the same color. After picking, check text contrast with the color converter.
Common mistakes to avoid
- Trusting a single pixel. Click a few nearby spots, or use the palette, which averages many pixels.
- Expecting the code to match paint or print exactly. Screens mix light and paint mixes pigment, so use the code as a close guide and check a physical sample.
- Picking colors from a compressed or filtered picture. JPEG artifacts and filters change colors, so use the original image when accuracy matters.
Frequently asked questions
How do I get the HEX code of a color in a photo?
Load the photo, click the spot you want, and copy the HEX value shown. It looks like #F28C38.
Is my image uploaded?
No. The picture is only read by your browser and is never sent to a server.
How does it find the main colors?
It shrinks the picture, groups similar colors together and lists the ones that cover the most area, skipping shades that are too close to each other.
Why does the color differ from what I see on paint or print?
Screens mix light while paint and print mix pigments, and every screen is calibrated differently. Use the code as a close guide, then check a physical sample.
People also search for this as: color picker from image, get color from photo, image eyedropper, hex color from image, extract colors from image, image palette generator.
Sources and further reading
Formulas on this page are checked by automated tests against independent references. See how we test our tools.