Image Color Picker
ImagePick colors from any image with an eyedropper tool, get HEX, RGB and HSL values and maintain a running history of all your previously sampled colour values.
Related Tools
About Image Color Picker
Picking a color from an image is a daily task for designers and front-end developers: matching a brand color from a mockup, sampling gradient stops from a photo, or choosing accent colors for a UI. This tool turns image color picking into an in-browser eyedropper: after uploading or dropping an image, move your cursor to preview the HEX, RGB and HSL of the pixel under it in real time, use the 5x5 magnifier grid to pinpoint a single pixel, then click to lock the color and add it to history (up to 12 entries).Pair it with the Color Converter and Palette Generator to convert formats or derive a scheme right after sampling. For example, picking #2DD4BF syncs rgb(45, 212, 191) and hsl(167, 65%, 50%), copyable in any format.
How to Use
- Open the Image Color Picker tool
- Upload the image file
- Adjust the output options as needed
- Click the Process button; results appear in real time
- Copy or export the result
Use Cases
- Mockup color pickup — Upload a visual mockup screenshot, use the eyedropper to grab brand, accent and text colors, and copy HEX straight into CSS variables.
- Photo palette sampling — Sample dominant hues from photos or illustrations to pick harmonious colors for posters, banners and data visualizations.
- UI fidelity check — Compare the same pixel in your build vs. the design to catch color drift and fix CSS, improving visual fidelity.
- Gradient stops — Sample multiple points along a gradient to record each stop color and reproduce the same transition in a CSS gradient.
- Accessibility contrast — Extract foreground and background colors, then compute contrast to ensure text readability meets WCAG standards.
FAQ
Is the color accurate?
Yes. The tool reads RGB values from the image's original pixels with no compression or resampling, so it matches the source pixel-for-pixel.
Which image formats are supported?
PNG, JPEG, WebP, GIF, BMP and SVG. SVG is rasterized at its intrinsic size before sampling.
Is the image uploaded?
No. All images are parsed and read locally via Canvas with no network requests, so sensitive screenshots are safe.
What are the squares in the magnifier?
The 5x5 grid shows 25 pixels around the cursor at high zoom; the center cell is the current pick pixel for precise aiming in dense areas.
How many history entries?
Up to 12. New picks are deduped and moved to the top; click any history swatch to copy its HEX value.