Pick colors from an image
Image Color Picker
Image Color Picker returns the exact color code of any pixel you click in an image. A magnifier shows the pixels under the pointer, and every picked color comes with HEX, RGB, HSL, HSB, OKLCH, Lab and CMYK values.
- Free, no signup
- Images never leave your device
- Exact pixel colors
Drop an image to pick colors
or paste with Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. Up to 20 images.
How do you pick a color from an image?
You pick a color from an image by opening the image in the picker and clicking the pixel you want.
Open an image
Drop, paste or choose a JPG, PNG, WebP, GIF, AVIF or SVG file. The image stays on your device.
Aim with the magnifier
Move the pointer over the image. The magnifier enlarges the 11 by 11 pixels around it and outlines the pixel under the pointer.
Click to pick
Click or tap to add the pixel's color to your picked colors. Drag a pin to move it, or nudge it with the arrow keys.
Copy the code
Copy any code with one click, or export all picked colors to CSS, Tailwind, Adobe, Procreate and more.
How exact is the picked color?
Each pick returns the value of a real pixel. The picker reads the image at up to 2,048 pixels on its longest side without smoothing, so no averaging alters the value.
Neighboring pixels in a photo often differ, because lighting, texture and JPEG compression add small variations. For the color of a whole area, use the Color Palette Extractor with the Average setting.
Which color codes does the picker show?
The picker shows seven codes for every picked color, each with a copy button.
- HEX
- Six-digit code for CSS and design apps
- RGB
- Red, green and blue channels from 0 to 255
- HSL
- Hue, saturation and lightness for CSS
- HSB
- Hue, saturation and brightness for app color pickers
- OKLCH
- Perceptual lightness, chroma and hue for modern CSS
- CIE Lab
- Lightness and two color axes, as CSS
lab() - CMYK
- Print estimate without a printer profile
- Contrast
- WCAG 2 ratio against white and black
When should you use the picker instead of the palette extractor?
| Task | Tool |
|---|---|
| Find the code of one specific spot, such as a button or a detail | Image Color Picker |
| Get the main colors of a whole image | Color Palette Extractor |
| Get exact logo colors without edge blends | Logo Color Extractor |
| Get a website's colors from its code | Website Color Extractor |
What do people use an image color picker for?
Color matching
Match a paint, fabric or product color from a photo for a print or web layout.
Web design
Copy the exact color of a button or background from a design screenshot.
Brand work
Take one brand color from a photo of packaging or signage as a starting point.
Accessibility checks
Read the contrast of a picked text color against white and black in the Color codes tab.
Image color picker FAQ
How do I get the HEX code of a color in a picture?
Open the picture in the Image Color Picker and click the color. The HEX code appears at once, with a copy button next to it.
Can I pick colors on a phone?
Yes. Tap the image to pick a pixel, then drag its pin to fine-tune the position.
Why does the same object show different HEX codes?
Lighting, shadows and compression give neighboring pixels different values. Pick from the flattest area of the object, or average the area with the palette extractor.
Can I pick colors from a screenshot?
Yes. Take a screenshot and paste it into the page with Ctrl+V or Command+V.
Is there a limit on picks?
No. Pick as many colors as you need. Procreate exports hold the first 30 colors, and the code formats hold all of them.