Image Color Picker for HEX, RGB, HSL, and Palettes
Pick colors from photos, screenshots, product images, and design exports with browser-side processing. Click a pixel, review the palette, then copy HEX, RGB, HSL, or CSS variable values.
An image color picker samples pixels from a local image and returns copy-ready color values.
Use it as a color picker from image files, screenshots, product photos, brand references, CSS tokens, social assets, and palette notes.
Use the cleanest source image
Screenshots and compressed images can contain blended edge pixels, so click a solid area when possible.
Check contrast afterward
A color that looks good in a photo may still need contrast testing before use in text or UI.
Drop image here or click to upload
Use JPG, PNG, WEBP, or GIF, max 10MB.
This tool samples the image with browser canvas based on the current public implementation. Avoid entering sensitive images unless you have reviewed the implementation.
Guides and examples
Use this tool in a real workflow
Suggested workflow
Pick and prepare image colors
Use this path when a visual reference needs CSS-ready color values and accessibility checks.
How is the image processed?
The image is decoded and sampled with canvas in the browser for this tool based on the current public implementation.
Which color formats can I copy?
You can copy HEX, RGB, and HSL values for the selected pixel.
Can it extract a palette from an image?
Yes. The tool samples the image and shows a compact palette of dominant approximate colors.
Can I copy the whole palette?
Yes. You can copy the extracted palette as HEX values or CSS custom properties.
Why might a picked color differ from a design file?
Browser decoding, image compression, scaling, color profiles, and anti-aliased edges can make sampled pixels differ slightly from a source design file.