How it works
The Image Color Picker lets you click any pixel in an uploaded image to sample its exact color — returning the hex code, RGB values, HSL values, and CSS color name (if applicable). It's an eyedropper tool for images you don't have access to in Photoshop or Figma.
Color matching from photos is a constant need: a client sends a brand photo and asks you to match the exact color of the product for a background. A designer wants to extract the dominant color from a stock photo to use as a UI accent. A developer needs to hardcode the exact hex from a screenshot mockup. This tool provides the color value in every format you might need in one click.
How to use it: upload your image. The image renders in the canvas at full fidelity. Click any pixel to sample its color. The sampled hex, RGB, and HSL values appear instantly. Click "Copy Hex" to copy the value to your clipboard. Hover (without clicking) to preview the color under the cursor in real time.
Color formats returned: - Hex: #3a5f8b (6-digit web hex) - RGB: rgb(58, 95, 139) - HSL: hsl(212, 41%, 39%) - CSS named color: nearest match if within tolerance (e.g., steelblue)
Multiple samples: each click adds the color to a palette history. Export the palette as a JSON array, CSS custom properties, or a PNG swatch file.
Zoom: for detailed images where you need to pick a specific pixel precisely, use the browser's native zoom (Ctrl/Cmd + scroll) over the canvas before clicking.
Privacy: all color sampling uses Canvas API getImageData. No image is transmitted.
Frequently Asked Questions
- Click precisely on the pixel in the image canvas. For very small areas, zoom in first using Ctrl/Cmd + scroll (browser zoom). The pixel-level zoom shows a 10× magnified view of the area under your cursor to help with precise sampling.
- Yes. Each color you sample is added to the palette history. Click Export to generate a CSS :root block with custom property declarations, a SCSS variables file, or a JSON object containing all sampled colors.
- Monitor color profiles and gamma correction can cause the visual color to appear different from the raw pixel value. The tool returns the exact sRGB hex value stored in the image data. For accurate color work, calibrate your monitor and use a color-managed workflow.
- Not with this tool — you need to upload the image file. To sample colors from a webpage, use the browser's built-in developer tools (inspect the element and check its computed color values) or a browser extension eyedropper.