Color Picker From Image
Pick the exact colour from any image — hex, RGB, HSL and OKLCH — and get a palette extracted from the same pixels. Nothing is uploaded; your browser does all of the work.
Drop an image here
Screenshots, photos, logos and design exports. Drag it anywhere on this page, paste it from your clipboard, or choose a file.
Private by design. Your image is opened and processed by your browser and is never uploaded to PaletteViva or anyone else. How this works
JPEG, PNG, WebP, AVIF, GIF and BMP — anything your browser can open. Up to 40 MB.
Pick the exact pixel
Sampling reads the image at full resolution, so the value you copy is the value in the file — with a loupe to prove it.
A palette you can trust
Colours are clustered perceptually in OKLab and snapped to real pixels, so no swatch is an averaged mush.
Export in one click
CSS variables, JSON, a Tailwind theme, SVG swatches or a palette PNG. Copy or download.
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.
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.
The one thing that is written to your device is the palette you build yourself: when you press “Add to my palette”, those hex values are stored in your browser's own storage so they are still there next time, and you can clear them with one button. No image, no file name, no coordinate and nothing else about your file is ever saved — only the colours you chose.
How to pick a color from an image
- 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 Move the pointer over the image. The magnifier follows it and the hex value updates live.
- 3 Click or tap to lock the colour. On a phone, pinch to zoom in and drag to position the magnifier first.
- 4 Adjust the sampling aperture if you want the average of the surrounding pixels rather than one exact pixel.
- 5 Copy the value you need, or use the palette below to grab the image’s main colours.
- 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 my 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. That list of hex codes is the only thing this site ever writes to your device; no image data is involved.
- 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.
Related reading
- Why the hex code you picked does not match Photoshop — sRGB, Display P3 and wide-gamut images explained.
- How to get the hex code from a screenshot on an iPhone — screenshots are saved in a wide-gamut colour space, which is why their values can disagree with other tools.
- Extract a color palette from an image — the palette-first workflow.
- How image palette extraction works — quantisation, colour spaces and why so many tools return six shades of grey.
- HEX, RGB, HSL and OKLCH explained — which format to use, and why the same colour can read as two values.