What is Color Eyedropper?

Color Eyedropper picks a color from any point in an image and shows it as a HEX, RGB, HSL, or OKLCH value. Use it to match a button color or a shadow gray from a screenshot, mockup, or photo.

Images are processed in your browser and are not uploaded.

How to Use

1. Choose an image file. You can also drag and drop it.
2. Move the pointer over the image. The loupe shows the surrounding pixels and the color to pick.
3. Click or tap to pick the color. Click a value row to copy it.

With the image focused, the arrow keys move the cursor one pixel at a time, and Enter or Space picks the color.

Sample Area

• 1 px: the color of the pixel under the cursor.
• 3 × 3 and 5 × 5: the average of the area around the cursor. Red, green, blue, and alpha are averaged independently. This smooths out compression noise and soft edges.

Near the edge of the image, the area shifts to stay inside the image. If the image is smaller than the area, the area shrinks to fit.

Picked Colors

Colors are shown as HEX, RGB, HSL, and OKLCH. Colors with transparency use an 8-digit HEX, and the alpha is included in the RGB, HSL, and OKLCH values.

Picked colors are kept in the history, newest first. The same color is not added twice. Select a row to see its values. You can remove a row, clear the history, or copy all. Copy all writes one HEX value per line. The history is cleared when you reload the page or change the image.

Supported Formats

PNG, JPEG, WebP, GIF, BMP, and AVIF are supported. Export SVG as PNG or another raster format before loading it.

Use Cases

• Matching button or heading colors from a design mockup or screenshot
• Pulling accent colors out of a photo
• Checking UI colors on an existing site before recreating them
• Collecting a few candidate colors before building a palette

To get the overall palette of an image at once, Color Code Extractor pulls out its main colors.