How to use the Image Color Picker tool
- Add an imageDrop a photo, screenshot or logo, click to choose one, or paste a screenshot with Ctrl+V.
- Hover and clickMove over the image to see the color under the magnifier, and click to pick it.
- Copy the codeCopy the HEX, RGB or HSL value. Every picked color is saved in the list below.
- Grab the paletteUse the automatically detected main colors, or copy them all as CSS variables.
Features
- Magnifying loupeSee an enlarged view of the pixels around your cursor for precise picking.
- Palette extractionFinds the eight most important colors in the image, ordered by how much of it they cover.
- Pick from anywhereIn Chrome and Edge, use the screen picker to grab a color from any window or app.
- Keyboard friendlyMove pixel by pixel with the arrow keys (Shift for 10 px) and press Enter to pick.
- PrivateYour image is processed in your browser and never uploaded.
When you need a color picker
- Match brand colors: get the exact HEX code of a logo when you don’t have the brand guidelines.
- Design from a photo: build a color scheme for a website, presentation or room from a picture you love.
- Front-end development: copy colors from a screenshot of a design mockup straight into CSS.
- Art and crafts: find paint, yarn or fabric colors that match a reference image.
HEX, RGB and HSL
| Format | Example | Used in |
|---|---|---|
| HEX | #7C3AED | Web design, CSS, Figma, Canva |
| RGB | rgb(124 58 237) | CSS, Photoshop, video and screen work |
| HSL | hsl(262 83% 58%) | CSS, creating lighter and darker variants |
Need CMYK for print, or contrast checks for accessibility? Paste the HEX code into our Color Converter.
Why does the same spot give slightly different colors?
Photos are made of many slightly different pixels because of lighting, texture, noise and JPEG compression. Use the magnifier and pick from a flat area, or use the automatic palette, which averages similar pixels into representative colors. For logos and graphics, use the original PNG or SVG rather than a compressed screenshot to get the exact brand color.
How the palette is found
The tool groups similar pixels using k-means clustering, a common technique for color quantization, and reports the average color of each group, ordered by size. It ignores transparent areas, so logos with transparent backgrounds give a clean palette.
Want to extract a color from an SVG logo? Convert it first with SVG to PNG.