Pixel-perfect zoom loupe
A magnified 11 by 11 pixel view follows your cursor, so you pick the exact pixel you want instead of a blurry blend at an edge.
Free, private, pixel-perfect
Image Color Picker Pick colors & extract a palette from any image
Upload any photo, logo or screenshot and pick exact colors with a pixel-level zoom loupe. Get HEX, RGB, HSL, HSV and CMYK codes plus an automatic color palette, all inside your browser.
- Pixel zoom loupe
- Auto color palette
- HEX, RGB, HSL, CMYK
- Images never uploaded
Pick a color from an image
Drop your image to start picking
Hover to zoom, click to pick. Drop an image here or paste a screenshot with Ctrl + V. Keyboard: arrows move, Shift moves 10 px, Enter picks.
#E1604BClosest CSS color: tomato
- HEX
- RGB
- HSL
- HSV
- CMYK
Contrast (WCAG)
-White text-
-Black text-
Tints and shades
Click to usePicked colors
Colors you pick will appear here.
Color palette from this image
Why it's better
Why this image color picker is better
Most color pickers give you a HEX code and little else. This one pairs pixel-level precision with the palette, format and accessibility tools designers and developers actually need.
Automatic color palette
Extract the 5 to 10 main colors of any image with k-means clustering, sorted by how much of the picture each color covers.
Every color format
Copy HEX, RGB, HSL, HSV or CMYK in one click, ready for CSS, Figma, Photoshop, Canva or a print brief.
Pick from anywhere on screen
In Chrome and Edge, the screen eyedropper grabs a color from any window, app or website, not just the image you uploaded.
Contrast, tints and shades
See WCAG contrast ratings with white and black text, plus an 11-step scale of lighter and darker versions of your color.
Private and instant
Images are read by your own browser and never uploaded. Drop, paste or choose a file and start picking immediately.
How it compares with typical color pickers
| Feature | This color picker | Typical image color pickers |
|---|---|---|
| Zoom loupe | Yes, 11 by 11 pixel grid | Sometimes |
| Palette extraction | 5 to 10 colors with coverage % | Often a fixed 5 colors |
| Color formats | HEX, RGB, HSL, HSV, CMYK | Often HEX and RGB only |
| Pick from the whole screen | Yes, in Chrome and Edge | Rarely |
| WCAG contrast check | Yes, with white and black text | Rarely |
| Tints and shades | 11-step scale | Rarely |
| Palette export | CSS variables, Tailwind, PNG | Sometimes |
| Paste a screenshot | Yes, Ctrl + V | Sometimes |
| Image uploaded to a server | Never | Sometimes |
How to use
How to pick a color from an image
Get an exact color code from any picture in about five seconds.
Keyboard friendly: Tab to the image, move with the arrow keys (hold Shift for 10 px steps) and press Enter to pick.
Add your image
Click Upload image, drag a file onto the picker or paste a screenshot with Ctrl + V. JPG, PNG, WebP, GIF, BMP and SVG all work.
Hover to zoom
Move over the image and the round loupe magnifies the pixels under your cursor, showing the HEX code live.
Click to pick
Click the exact pixel. The color appears with every code, its closest CSS color name and contrast scores, and HEX is copied for you.
Explore the palette
The main colors are extracted automatically. Choose 5, 6, 8 or 10 colors and click any swatch to inspect and copy it.
Copy or export
Copy any single format, export the palette as CSS variables or a Tailwind config, or download it as a PNG for your mood board.
Color codes
HEX, RGB, HSL, HSV or CMYK: which code do you need?
Every format describes the same color in a different way. Here is the same blue written five ways, and where each one is used.
| Format | Example | Best for |
|---|---|---|
| HEX | #1E90FF | Websites, CSS and design tools like Figma and Canva |
| RGB | rgb(30, 144, 255) | CSS, screens, image editors and code |
| HSL | hsl(210, 100%, 56%) | CSS themes, since lightness is easy to adjust |
| HSV / HSB | hsv(210, 88%, 100%) | Photoshop, Procreate and most color wheels |
| CMYK | cmyk(88%, 44%, 0%, 0%) | Print design, as a starting point for your printer's profile |
Need to convert a code you already have? Use the color converter, or build smooth blends with the CSS gradient generator.
Behind the palette
How automatic palette extraction works
The tool samples up to about 40,000 pixels from your image and groups similar colors with k-means clustering. Each group's average becomes one palette color.
Colors are sorted by coverage, so the first swatch is the dominant color of the image. Transparent pixels are ignored, and the average color of the whole image is shown below the palette.
Tips for accurate color picking
Zoom in with the loupe and pick from a flat area, not an edge where two colors blend.- Use PNG or high-quality images when you can. JPEG compression adds speckles around text and details.
- Photos vary pixel to pixel, so pick a few spots or use the palette for the averaged main color.
- Screenshots can shift slightly between displays and color profiles.
- For brand colors, confirm the result against the official brand guidelines.
- Check the contrast badges before using a color for text on a website.
Benefits
Who uses an image color picker?
Anyone who needs to match, reuse or document a color can save time with a fast, accurate picker.
Designers
Pull exact colors from references, mood boards and client logos, then turn them into a ready-made palette.
Developers
Grab HEX and RGB values from mockups and screenshots and paste CSS variables or a Tailwind config straight into code.
Artists and illustrators
Study the palette of a photo or painting you love and recreate its mood in your own artwork.
Marketers and brand teams
Keep social posts, slides and ads on brand by matching colors from logos, products and campaign photos.
Popular uses
- Match brand colors from a logo
- Build a website palette from a photo
- Copy colors from a screenshot
- Choose paint colors from a room photo
- Create Canva and Instagram themes
- Check text contrast
- Study colors in artwork
- Match product photos
FAQ
Image color picker FAQ
How do I get the color code from an image?
Upload or paste the image, hover over it to zoom in, and click the pixel you want. The HEX, RGB, HSL, HSV and CMYK codes appear instantly and the HEX code is copied to your clipboard.
Is my image uploaded to a server?
No. The image is read by your browser on your own device. Nothing is uploaded or stored, so it is safe for private designs and screenshots.
How does the color palette generator work?
It samples the image, groups similar pixels with k-means clustering and shows the 5 to 10 main colors, sorted by how much of the image each one covers.
Can I pick a color from my screen, not just an image?
Yes, in Chrome, Edge and other Chromium browsers. Click Pick from screen, then click anywhere on your screen. In other browsers, take a screenshot and paste it with Ctrl + V.
What image formats are supported?
JPG, PNG, WebP, GIF, BMP, SVG and AVIF work in most modern browsers. HEIC photos may need converting to JPG first, although iPhones usually convert them automatically when you choose a photo.
Why is the picked color different from what I expected?
Neighboring pixels in photos vary naturally, and JPEG compression adds noise. Use the loupe to pick from a flat area, or use the palette to see the averaged main colors.
How accurate is the CMYK value?
CMYK here is a standard mathematical conversion from RGB. Printers use specific color profiles, so treat it as a starting point and confirm with your print provider.
What do AA and AAA mean in the contrast check?
They are WCAG accessibility levels. AA needs a contrast ratio of at least 4.5:1 for normal text and AAA needs 7:1. AA Large, at 3:1, applies to large or bold text.
Can I use this color picker on my phone?
Yes. Choose a photo from your gallery or camera, then tap the image to pick a color. The loupe briefly shows the zoomed pixels where you tapped.
Find your perfect color
Drop in an image and get exact color codes and a ready-to-use palette in seconds. Free, private and ready on any device.
Pick colors nowMore design and image tools