Image Color Picker

About this tool

Image Color Picker finds the exact color of any spot in a picture. Upload a photo, drop it on the page or paste a screenshot with Ctrl+V or ⌘V, then click or tap anywhere on it. You get the pixel's color as a HEX code, an RGB value and an HSL value, each with a copy button. On a computer, a round zoom loupe follows the pointer and magnifies the 11×11 pixels around it, so you can land on a thin line or a single letter. Every pick goes into a history row of up to 16 swatches that you can click to copy again or export as CSS custom properties. Below the image, the tool also lists the eight main colors in the picture with the share of the image each covers; click one to add it to your picks. Large images are scaled to at most 2,000 pixels on the longest side. Everything runs in your browser with the Canvas API, and the image is never uploaded.

Why use it

• Exact pixel colors: click the spot you want instead of guessing from a palette.

• A zoom loupe for precision on thin lines, text and small icons.

• HEX, RGB and HSL side by side, each one click to copy.

• Pick history and CSS variable export for building a palette from a photo.

• Private: the picture stays in your browser and is never uploaded.

How to use

1. Upload an image, drag it onto the box, paste one with Ctrl+V or ⌘V, or press Try a sample image.
2. Move the pointer over the picture; the zoom loupe and color codes follow it.
3. Click or tap the spot you want. The HEX, RGB and HSL codes appear with copy buttons, and the color joins your picks.
4. Use the arrow keys (Shift for steps of 10) and Enter to pick precisely with the keyboard.
5. Click a main color under the image to add it, then use Copy as CSS variables to export all your picks.

When it helps

• Matching a brand color from a logo or a product photo.
• Grabbing the exact color of a button or background from a website screenshot.
• Building a CSS palette from an inspiration photo.
• Checking the color of a pixel in a design mockup before handing off to development.

Examples

Tips

• Zoom in with the loupe on edges: anti-aliasing blends two colors along a border, so pick a few pixels inside the shape.
• Screenshots of web pages give exact colors; photos vary pixel to pixel, so sample a few spots.
• Use the main colors list to find the background color quickly, then pick accents by hand.

Frequently Asked Questions

Glossary

HEX / RGB / HSL

Three ways to write the same color. HEX (#3b82f6) is common in CSS and design tools, RGB lists red, green and blue from 0 to 255, and HSL gives hue, saturation and lightness.

Eyedropper

A tool that reads the color of a single pixel under the pointer, as in design apps.

Anti-aliasing

Blending of pixels along edges to smooth them, which creates in-between colors at borders.