Creator Tools

Image Color Picker

Upload or paste an image and click anywhere to get the exact color as HEX, RGB, HSL and CMYK. A zoom loupe helps you hit the right pixel, and the main colors of the image are pulled out as a palette.

AdvertisementAd slot: leaderboard-top

Drop an image here or

You can also paste a screenshot with Ctrl+V or ⌘V.

Pick a color
Under cursor: –

Embed this tool

Put this free Image Color Picker on your own website — copy the code below and paste it into your page's HTML.

AdvertisementAd slot: in-content

How to pick a color from an image

  1. Drop in an image, choose one from your device, or paste a screenshot.
  2. Move over the image to see a magnified view, then click (or tap) the spot you want. The color appears with its HEX, RGB, HSL and CMYK codes, each with a copy button.
  3. Every color you pick is kept in the “Picked colors” row. Below that, the palette shows the image’s main colors, sized by how much of the picture they cover.

Getting the exact color

Photos are made of pixels that vary slightly even in areas that look flat, especially in JPGs. If neighbouring pixels differ, switch the sample size to a 3 × 3 or 5 × 5 average to get the typical color of that area rather than one stray pixel. For logos, screenshots and flat graphics, keep it on 1 pixel for an exact match.

In Chrome and Edge, “Pick from anywhere on screen” uses your browser’s built-in eyedropper to grab a color from any window or app, not just the uploaded image.

Color code formats

FormatExampleUsed for
HEX#4F46E5Websites, CSS, design apps
RGBrgb(79, 70, 229)Screens, CSS, image editors
HSLhsl(243, 75%, 59%)Making lighter or darker shades
CMYKcmyk(66%, 69%, 0%, 10%)Print (approximate)

CMYK values here are a simple conversion. For professional printing, ask your printer for their color profile, since inks and paper change how colors come out.

Need a different tool? Suggest it here — we read every message.

Frequently asked questions

How is the palette chosen?

The image is shrunk and its pixels are grouped into clusters of similar color (k-means clustering). Each swatch is the average of one cluster, and its width shows how much of the image it covers.

Why does my picked color look different from the original design?

JPG compression and color profiles can shift colors slightly. If you have the original file in PNG format, use that for exact brand colors.

Can I pick colors from a website?

Take a screenshot and paste it here, or use “Pick from anywhere on screen” in Chrome or Edge.

Does it work with transparent PNGs?

Yes. Transparent pixels are ignored when building the palette.

Are my files uploaded anywhere?

No. Everything happens inside your browser tab, so your files never leave your device and nothing is stored on a server.

Related tools & templates

AdvertisementAd slot: footer-leaderboard