What is Image Color Picker?

Extract exact colour values from any image by clicking on it. The palette starts pre-filled with the image's dominant colours, a magnifying loupe helps you pick the right pixel, and every colour comes with HEX, RGB, HSL, HSV, CMYK, and its closest named colour. Save picks to the palette and export.

When an image loads, the tool pulls its six most common colours and drops them straight into the palette, so you have a starting set before you click anything. A magnifying loupe shows the individual pixels under your cursor, which makes it easy to land on the exact tone instead of an anti-aliased neighbour. Every colour you click reports its HEX, RGB, HSL, HSV, and CMYK values plus the closest named CSS colour, and joins a palette you can copy as a hex list or export as JSON or CSS variables. There's also a vision preview that runs the image through common colour-blindness filters, so you can check accessibility while you work.

How to use

1. Step 1 — Upload any image (PNG, JPEG, WebP, GIF). The image loads onto an interactive canvas with a zoom loupe.
2. Step 2 — Click anywhere on the image to pick a color. The loupe magnifies the area under your cursor for precise selection.
3. Step 3 — Copy any value in HEX, RGB, HSL, HSV, or CMYK, or note the closest named colour shown below the swatch. The palette keeps every pick — plus the six auto-detected starting colours — for one-click export.

When to use

• Matching a brand colour from a screenshot or rendered mockup.
• Building a colour palette from a reference photo for a design project.
• Identifying the exact shade used in a competitor's logo or website hero.

Result

A designer uploads a nature photograph to extract the exact teal of a mountain lake. They click on the water, get #2E8B8C, and add it to their palette alongside three other colors from the same photo.

FAQ

Why does the picked colour differ slightly from what I see in Photoshop?

Most browsers convert images to sRGB on load. If your source was tagged Adobe RGB or Display P3, the picked value will be the sRGB equivalent. For perfect parity, export the original image as sRGB before picking.

Does the loupe show the exact pixel or an averaged area?

The loupe samples one pixel — the one directly under the crosshair — and renders neighbouring pixels around it for context. Click anywhere in the loupe view to lock that pixel's value, so anti-aliased edges don't trick you.

Can I pick colours from a PNG with transparent areas?

Yes. Transparent pixels return their underlying RGB values with alpha shown separately. If you click a fully transparent pixel, the canvas background colour (white by default) appears instead, so click a non-transparent area for an accurate read.

What's the difference between HEX, RGB, HSL, HSV, and CMYK — which should I use?

HEX (#2E8B8C) is the shortest form for CSS and design tools. RGB shows three 0–255 channel values for code that needs raw numbers. HSL describes hue, saturation, and lightness — easier when you want to nudge a colour brighter or more saturated. HSV is similar but uses value (perceived brightness) instead of lightness, which most design apps prefer for pickers. CMYK gives the four print-channel percentages, the format your printer or print designer needs.

Can I pick more than one colour at a time?

Each upload pre-fills the palette with the image's six dominant colours, and every click after that adds another pick to the set. The palette panel shows everything sampled and lets you copy any swatch, copy all hex codes at once, remove individual entries, or export the whole set as a JSON file or as ready-to-paste CSS custom properties.

Related Tools