Image Color Picker

This free image color picker reads the exact color of any spot in a photo or screenshot, with a magnifier and a small-area average so JPEG noise does not fool you. It also extracts the palette with the share of each color, checks contrast between two picks, and exports ASE, GPL, CSS and Tailwind, with no upload.

What does this image color picker do?

It tells you the color of any spot in an image, and then answers the question a plain picker ignores: is that really the color you see, or one unlucky pixel?

A magnifier that follows the cursor, 11 × 11 pixels enlarged, so you land on the exact spot and not on an edge.
An average of 1, 3 × 3, 5 × 5 or 11 × 11 pixels. Photos and compressed screenshots are noisy; the average is the color your eye perceives.
A warning when the spot is irregular, with a one-click switch to a 5 × 5 average.
Every format: HEX, RGB, HSL, OKLCH and CMYK, plus the nearest Tailwind CSS class and the nearest CSS color name.
The whole palette of the image, 3 to 10 colors, each with the share of the image it covers. Small vivid accents, like an orange logo on a white page, stay in the palette.
Contrast between your last two picks, with a link that opens them in the Color Contrast Checker.
Exports as Adobe .ase, GIMP .gpl, a PNG swatch strip, CSS variables, a Tailwind theme block, JSON or a plain HEX list.
Pick from screen in Chrome and Edge, anywhere on your display.

How do you pick a color from an image?

Drop an image, click to choose one, or paste a screenshot with Ctrl V (Cmd V on a Mac). No image at hand? Try a sample image.
Pick a Sample size: 3 × 3 or 5 × 5 for photos, 1 px for flat graphics and interface screenshots.
Move over the image with the magnifier and click. On a phone, touch and slide: the magnifier sits above your finger.
Copy the format you need. Every pick is kept under Picked colors, so you can compare them.
Scroll to Colors in this image to copy or download the palette.

The keyboard works too: focus the image, move with the arrow keys (Shift for 10 pixels) and press Enter to pick.

Why does the picked color look different?

Three things change a pixel between the original design and your screen.

Cause	What happens	What helps
JPEG compression	Neighbouring pixels drift apart in small blocks	A 3 × 3 or 5 × 5 average
Anti-aliased edges	Pixels on the edge of a shape mix two colors	Click inside the shape, not on its border
Wide color (Display P3)	iPhone and Mac photos can hold colors sRGB can't show	Nothing: the web reads sRGB, so those colors are clipped to the nearest one

This tool reads the image the way a web page shows it, in sRGB, which is also what CSS HEX codes mean.

How is the palette extracted?

The image is sampled at up to 30,000 points and grouped by k-means in OKLab, a color space built so that equal distances look like equal differences. It first finds more groups than you asked for, then keeps the largest color and, at each step, the group that best combines area with difference from what is already chosen. That is why an accent covering 1% of the image can make the list while five shades of beige don't. Percentages are recounted at the end, so they add up to 100.

What this color picker does not do

It does not read a website by its address. Browsers block one site from reading another's images. Take a screenshot and paste it.
It does not give Pantone matches. Pantone is a licensed system, and a guess from a screen color would mislead print work. The CMYK shown is a plain conversion without a print profile.
It does not open HEIC. Most browsers outside Safari can't decode the iPhone format; a screenshot works, or the HEIC to JPG converter.
It works on still images. An animated GIF shows its first frame.
Images over 16.7 megapixels are scaled down, because phones refuse to draw larger canvases. The page says so when it happens.

Is my image private?

Yes. Your browser opens the image, reads the pixels and calculates the palette in a background thread on your own device. Nothing is uploaded, logged or stored, and closing the tab clears everything.

Frequently asked questions

How do I get the HEX code of a color in an image?

Drop the image on the page or paste a screenshot, then click the spot you want. A magnifier follows the cursor so you can land on the right pixel. The color appears as HEX, RGB, HSL, OKLCH and CMYK, each with a copy button, plus the nearest Tailwind and CSS color name.

Why is the picked color different from the one I expected?

Usually one of three things. JPEG compression makes neighbouring pixels slightly different, anti-aliased edges blend two colors, and wide-gamut photos are shown in sRGB on the web. The picker warns you when a spot varies a lot and offers a 5 by 5 average, which is the color your eye actually sees.

What sample size should I use?

Use 3 by 3 or 5 by 5 for photos and compressed screenshots, because an average ignores single noisy pixels. Use 1 pixel for flat graphics, logos exported as PNG and interface screenshots, where every pixel of a shape is exactly the same. Use 11 by 11 to read the general tone of a textured area.

How do I extract a color palette from an image?

Open the image and the palette appears below it, with 3 to 10 colors sorted by how much of the image each one covers. Colors are grouped by how the eye sees them, in the OKLab color space, and a small but vivid accent such as an orange logo is kept instead of being averaged into the background.

Can I pick a color from a website or another app?

Yes, in Chrome and Edge the Pick from screen button reads any pixel on your display, inside or outside the browser. In other browsers, take a screenshot and paste it with Ctrl V or Cmd V. The tool cannot open a web address directly, because browsers block one site from reading the images of another.

Can I use the palette in Photoshop, Illustrator or GIMP?

Yes. Download the palette as an Adobe Swatch Exchange file, which Photoshop, Illustrator, InDesign and Affinity import, or as a GPL file for GIMP and Inkscape. You can also copy it as a HEX list, CSS custom properties, a Tailwind theme block or JSON. Coolors reserves its image palette picker for paid plans.

How does the nearest Tailwind color work?

The picked color is compared with all 286 colors of the Tailwind CSS 4.3 default palette, taken from the official package, by perceptual distance in OKLab. You get the closest class name, such as blue-600, and a note saying whether it is an exact match or only the nearest one. Tailwind 4 colors are defined in OKLCH.

How do I check if the text in my image is readable?

Pick the text color, then the background color. The panel shows the WCAG contrast ratio between your last two picks and whether it passes AA or AAA. One click opens the pair in the Color Contrast Checker, which suggests the closest color that passes when it does not.

Does it give Pantone colors?

No. Pantone colors are a licensed system, and a guessed nearest Pantone from a screen color would mislead anyone preparing print. The CMYK value shown here is a simple conversion without a print profile. For print, send your printer the HEX or RGB values and ask for a proof.

Is my image uploaded anywhere?

No. The image is opened and read by your own browser, and the palette is calculated in a background thread on your device. Nothing is sent to a server, logged or stored, and closing the tab clears it. That makes it safe for unreleased designs and screenshots of private work.

Rate Image Color Picker & help shape it

This tool is free and still growing. Tell us what works, what you would change, and what is missing. Your feedback is what decides what we build next.

Built and tested by the ÆON Toolhub team. Last updated: September 29, 2026. How we test our tools