Image Color Picker
Upload an image, pick a pixel on the canvas, and read HEX, RGB, HSL, HSV, and CMYK values. Compare recent colors, extract a main palette, and download a PNG swatch for design notes.
Click or drag and drop
The image is read in your browser. Once it appears on the canvas, click or tap the pixel you want to sample.
Up to 10 MB · browser-supported imagesCanvas preview
Selected color
Recent colors
Palette
ready to use.
- Visible firstKeep input and result areas easy to find.
- Result firstPut the key result up front and reveal process only when useful.
- Less frictionMake the tool usable without sign-up or unnecessary details.
Pick a pixel for the exact code, then use the palette for the bigger color direction
This image color picker helps you sample a spot from a photo, screenshot, logo, or illustration and read the color as HEX, RGB, HSL, HSV, and CMYK. When you click the canvas, the code fields update together and the selected color is added to recent colors.
A single pixel and a whole-image palette answer different questions. Use the pixel picker when you need the color under the pointer, then extract a palette when you want the main colors of the image for a mood board, thumbnail, or design note.
Add an image and choose the first pixel
- Choose a browser-supported image through Add image or the upload area.
- After the image appears on the canvas, move the pointer or tap the area you want to inspect.
- Click or tap to lock the color and update the result fields.
Use the magnifier on edges and gradients
- A logo edge, shadow, or gradient can shift color within a few pixels.
- The 9×9 magnifier helps you aim inside a solid area instead of a blended edge.
- Coordinate and alpha hints are useful for icons, transparent PNG files, and cropped screenshots.
Know which color format to copy
- HEX is usually the quickest choice for CSS, design tokens, and shared notes.
- RGB is useful for canvas work, scripts, and image-processing steps.
- HSL and HSV are better when you need to describe hue, saturation, or value changes; CMYK is a rough reference, not a print proof.
Compare recent colors before deciding
- Each selected color is added to recent colors.
- Sample a few nearby points from the same area and compare the cards instead of trusting one click.
- Clear the history when you switch images or start a new design pass.
Extract a palette for the image’s main colors
- Palette extraction samples the image, groups similar colors, and shows prominent colors first.
- Use 5 colors for a quick overview, 8 for a balanced web or thumbnail palette, and 10 to 12 for images with more variation.
- Treat the palette as a starting shortlist, not as a final identity system.
Download a PNG swatch
- Download saves the extracted palette, or the last selected color if no palette exists yet.
- The PNG includes color chips and codes, so it works well in feedback notes, drafts, and reference documents.
- Extract the palette first when you need more than one color in the downloaded file.
Understand local browser processing
- The image is read by the current browser and drawn on the canvas.
- The tool reads pixel values from that canvas and does not upload the image to read its colors.
- If you close the tab, reset, or choose another image, the current canvas state changes.
Why the sampled color may look different
- Large images may be redrawn to the preview canvas size so the page stays responsive.
- Display brightness, color profiles, transparency, and browser decoding can make a value look different from what you expected.
- For print approval or original-pixel verification, check the source file with a color-managed workflow.
Check contrast before using the color in UI
- A sampled color can look good as a swatch and still be hard to read as text.
- Test foreground and background pairs in light and dark contexts.
- Use a dedicated contrast checker before using the color for body text, buttons, or accessibility-sensitive controls.
Common workflows
- Sample a background from a screenshot and paste the HEX value into a CSS variable.
- Extract an 8-color palette from a product photo for a thumbnail or landing page draft.
- Click several accent-color candidates in an illustration and keep the best option from recent colors.
Frequently asked questions
Will my image be uploaded to a server?
No. The selected image is read in your current browser and drawn on the canvas. This tool does not upload the image to a server to read its color values.
Which image files can I use?
You can use image files that your browser can decode, such as JPG, PNG, GIF, and WebP. Actual display support depends on the browser you are using.
Does the tool read the original pixels of a large image?
Not always. To keep the screen responsive, a large image may be redrawn to the preview canvas size, and the color values are read from that canvas.
Can I use the extracted palette as official brand colors?
The palette is a shortlist of colors sampled from the image. For official brand or print colors, check the source guide, original file, or a color-managed tool as well.
What is saved in the downloaded PNG?
If you extracted a palette, the PNG saves the color chips and HEX codes. If you have not extracted a palette yet, it saves only the last selected color as a small swatch.