Every color tool you need, in one place.

Pick the exact color from any image

Sampling reads the image at its own resolution rather than from the picture scaled to fit your screen. That matters more than it sounds: reading a resized canvas returns a blend of neighbouring pixels, which is why colour pickers often report a value that does not match the pixel you clicked. Here, sampling reads the source data by index and the magnifier shows you the individual pixels so you can confirm the target before locking it.

A single pixel is exact, but on a photograph it is also noisy — a stray pixel in a gradient can be a shade away from what the region actually looks like. The aperture control switches between the exact pixel and a 3×3 or 5×5 average, and the nearby-pixels strip shows the immediate neighbourhood so you can see whether you are on a clean area or an anti-aliased edge.

Extract a color palette from the same image

Palette extraction happens automatically and runs in a background thread, so the tool stays responsive on large images. Colours are clustered in OKLab, a perceptually uniform space, which means two colours grouped together are ones you would also see as similar. Each final swatch is then snapped to an actual pixel in your image, so nothing in the palette is an averaged colour that never existed in the picture.

Flat artwork is handled differently on purpose. When an image contains few distinct colours — a logo, an illustration, a screenshot of an interface — the palette counts the exact colours instead of clustering them, so you get the real colours rather than blends between them. And if an image simply does not contain as many clearly distinct colours as you asked for, the tool says so instead of filling the row with near-identical swatches.

The colours you keep go into a working palette, and that palette is audited rather than merely listed: every pairing of two colours in it — a five-colour palette has ten — is measured against WCAG 2.2 contrast, and the verdicts are shown as a grid so the failures are visible at a glance. Where a pairing fails, the contrast audit offers the nearest colour that passes with its hue kept and its lightness moved, states what that change costs in perceptual distance, and changes nothing until you press the button. Where it cannot help, it says so and reports the closest ratio it could reach instead of showing you a colour that would miss the threshold it was offered as meeting. Contrast is only part of accessibility, and the audit says as much on the page; it is the part that can be measured from two hex values. To see how small a difference you can actually separate, the color challenge turns that same measurement into a game with difficulty levels defined in OKLab distance.

HEX, RGB, HSL, OKLCH and CMYK

The panel shows the formats most work needs at a glance — hex, RGB and HSL — with HSV, OKLCH and CMYK one click away under “More formats”. OKLCH is included because modern design systems use it for even perceptual steps between shades. CMYK is deliberately described as an approximation: converting screen colour to ink without an ICC profile is a rough guess, and presenting it as a print-ready separation would be misleading.

Your image stays on your device

Your browser reads the file you choose, decodes it and samples it. There is no upload step because there is no server involved in the tool at all — the page is static files. No account, no cookie and no third-party script is involved, and recently picked colours live in memory only until you close the tab.

Four records are written to your device, and only four. The first is the working palette you build yourself: press “Add to working palette” and those hex values are stored in your browser's own storage, so they are still there next time, and one button clears them. The second is your light, dark or system appearance choice, which the header's control keeps. The third and fourth are the best scores from the color memory game and the color reflex game — one whole number each, with no timestamp, no identifier and no run history beside them. No image, no file name, no coordinate and nothing else about your file is ever saved — only the colours you chose.

Read exactly how images are handled

How to pick a color from an image

1. 1 Drop your image onto this page, paste it from the clipboard, or choose a file. You can also open the sample image to try the tool first.
2. 2 Move the pointer over the image. The magnifier follows it and the hex value updates live.
3. 3 Click or tap to lock the colour. On a phone, pinch to zoom in and drag to position the magnifier first.
4. 4 Adjust the sampling aperture if you want the average of the surrounding pixels rather than one exact pixel.
5. 5 Copy the value you need, or use the palette below to grab the image’s main colours.
6. 6 Export the whole palette as CSS variables, JSON, a Tailwind theme, an SVG swatch sheet or a PNG.

Keyboard users can do all of this without a pointer: Tab to the image, use the arrow keys to move the sampling point one pixel at a time (hold Shift for ten), press Enter to lock the colour and Escape to unlock it. The current coordinate and hex value are announced as you move.

Frequently asked questions

How do I get the hex code from an image?

Open this page, drop your image anywhere on it, then click the pixel you want. The hex value appears in the Selected colour panel, with a copy button next to it. Hold the pointer still to see the magnifier and confirm you are on the right pixel before you click.

Can I pick a color from a screenshot on my phone?

Yes. Take the screenshot, then open this page and choose the image from your photo library, or share it to your browser. Pinch to zoom into the area you need, drag to position the magnifier, then tap to lock the colour. The selected colour stays pinned on screen while you move around the image.

Why does the hex code not match what Photoshop or Figma shows?

Usually because the image carries a wide-gamut profile such as Display P3, which most phones shoot by default. PaletteViva detects that and tells you when a pixel sits outside the sRGB gamut, so you know that the hex value is a clipped approximation and you can copy the Display P3 value instead. Screen calibration, colour-management settings and any compression the image has been through can also shift values by a step or two.

Is the color picker free?

Yes, with no account and no sign-up. There are no ads inside the tool, no cookies and no third-party scripts on this page.

Do you upload my image?

No. Your browser opens the file, decodes it, reads the pixels and extracts the palette, all locally. Nothing is sent to PaletteViva or to anyone else, and the image itself is never stored — nor is its name, its size, its coordinates or any colour sampled from it. Formats and exports are generated the same way, in your browser.

Can I save the colours I pick?

Yes, with “Add to working palette”. Those hex values are kept in your own browser storage on your device, so they are still there next time, and the Clear button in the same panel deletes them immediately. Four records are written, and they are the only four: the list of hex codes, your light/dark appearance choice, and one best score each from the color memory game and the reflex game. No image data is involved in any of them.

Can I extract a color palette from a logo?

Yes, and logos work especially well. When an image contains few distinct colours, PaletteViva counts the exact colours rather than clustering them, so the palette contains the real brand colours instead of blends between them. It will also tell you when an image has fewer clearly distinct colours than you asked for, rather than repeating one colour to fill the row.

What image formats are supported?

Anything your browser can decode: JPEG, PNG, WebP, AVIF, GIF and BMP. HEIC photos from iPhones only decode in Safari. Files up to 40 MB are accepted, and very large images are sampled from a slightly reduced-resolution copy, which the tool tells you about.