Image Color Picker: Find the Hex Code and Palette of Any Image

How to find the hex code of any colour in an image

The fastest way to get the hex code from an image is to use a browser-based eye-dropper tool that reads the colour directly off the pixel you click. The hex code (also called the HTML color code) is the 6-character format like #3B82F6 that designers paste into Figma, developers paste into CSS, and brands use in their style guides.

1. Drop the image into the tool above. JPG, PNG, WebP, GIF, and most other browser-supported formats work. The image is decoded by your browser, never uploaded.
2. Hover the image. A tooltip follows the cursor with a live preview of the colour and its hex code, so you can scan a photo before committing.
3. Click the pixel you want. The picked colour locks in the side panel with its hex, RGB, HSL, and OKLCH values plus a one-click copy.

Every hex code from this tool is the exact pixel value, not an averaged approximation. If you need a colour finder from image with pixel precision (a brand logo, an icon background, a button colour from a screenshot), clicking directly on that pixel gives you the canonical hex without rounding.

Color palette generator from image, in detail

The auto-extracted palette is generated by median-cut quantization over a downscaled copy of your image. Click the palette size selector to choose 4, 5, 6, 8, 10, or 12 colours. Each card shows the hex code and the approximate share of the image that colour represents, so you can tell at a glance which tones are dominant and which are accent or background.

As a color palette generator from photo, the tool works best with images that have a clear visual identity: brand mockups, product shots, posters, moodboard images, gradients, illustrations, paintings, and travel photos. A photo of a single object on a neutral background produces a clean 3 to 5 colour palette. A complex scene like a city skyline at sunset will yield a more granular 8 to 12 colour palette that captures the gradient transitions.

Transparent pixels in PNG or WebP images are ignored during palette extraction, so a logo on a transparent background returns just the logo's colours rather than mixing them with a checkered or white canvas.

Every colour format, from one click

Whether you need an RGB color picker from image, a hex picker from image, or the modern OKLCH value for a 2026 design system, this tool outputs all four formats simultaneously for every pixel you click:

The tool also shows the closest Tailwind 500-shade name (e.g. blue-500) and the best WCAG contrast ratio against pure white or pure black, so you can tell immediately whether your picked colour is accessible for body text.

An eye dropper tool that works on any image

The eye dropper (sometimes spelled eyedropper or colour dropper) is the small magnifier-style picker built into image editors like Photoshop and operating systems like macOS. It samples the colour of a single pixel and reads it back in your chosen format. The image color picker on this page is a free, browser-based eye dropper tool that works on any image you can open in a tab, without installing Photoshop or signing into Adobe.

If you have used the native eye dropper in Photoshop, Affinity, GIMP, or Procreate, this tool will feel familiar: hover for a live preview, click to lock the colour, and copy any of the four output formats. The difference is that this one runs in your browser, on any device, with no install, and without uploading the image anywhere.

Color scheme generator: derive harmonies from your image

Once you have a dominant colour from your image, you can use it as the starting point for a full colour scheme. Each card in the auto-extracted palette is a candidate base colour. Click any swatch to set it as the picked colour, then pair it with our companion Color Picker, which generates complementary, analogous, and triadic harmonies from any hex.

A typical workflow:

1. Drop the image into this tool. Note the dominant colour from the palette.
2. Open the Color Picker in a new tab.
3. Paste the dominant hex; the harmonies panel produces complementary, analogous, and triadic swatches.
4. Pick one as your accent colour. You now have a 2-colour brand scheme rooted in the photo.

For Canva users: getting the palette into your design

Canva has a built-in palette generator, but it caps you at 5 colours, picks them automatically, and does not let you adjust palette size. The image color picker on this page extracts up to 12 colours, sorted by share of the image, and lets you click individual pixels for full pixel-level control.

To use the palette in Canva: extract the palette here, copy each hex code, then in Canva click any element with a colour, choose the colour picker, and paste the hex into the input field. Repeat for each colour. The same workflow works for Figma, Sketch, Affinity, and any tool that accepts a hex input.

Image color picker vs Photoshop, Canva, Coolors, and Adobe Color

The honest summary: if you want a fast, free, no-signup, browser-based image color picker with both pixel-exact picking and a flexible 4 to 12 colour palette, this tool covers it. If you need advanced editing, gradient manipulation, or harmony exploration after extraction, pair this with our companion Color Picker or open a dedicated editor.

Pixel picking

When you click anywhere on the displayed image, the tool maps the click position to the canvas's pixel coordinate system, reads a single 1 by 1 pixel ImageData, and converts the RGBA value into hex, RGB, HSL, and OKLCH strings. Every browser performs this client-side using the standard HTML canvas API. There is no JavaScript color library involved, and no data leaves the page.

Palette extraction by median-cut quantization

For the palette we use a classic algorithm called median-cut quantization, originally introduced for 24-bit to 8-bit color reduction in computer graphics. The steps are:

1. Downscale the image to a small sampling canvas (200 pixels on the long side) for speed.
2. Sample up to 50,000 pixels and ignore any with low alpha so transparent backgrounds do not pollute the palette.
3. Put all sampled pixels in one box, find the channel (R, G, or B) with the greatest range, sort by that channel, and split at the median.
4. Repeat recursively on each resulting box until you have N boxes (where N is your chosen palette size).
5. Average the pixels in each box to get one representative color.
6. Sort the palette by share of pixels and render it as cards.

Median cut works well in practice. Photographs, product shots, and posters all produce palettes that closely match what a designer would pick by eye. For images where one tiny but very bright object dominates visually but only covers a small percentage of pixels, click that area directly for a pixel-exact pick.

Why we include OKLCH

OKLCH is the modern perceptual color space recommended by the CSS Color Level 4 specification. Unlike HSL, two colors with the same OKLCH lightness actually look equally bright to humans, which makes building accessible color scales much easier. If you are building a design system in 2026, OKLCH is the preferred format. Older tools rarely show it; we always do.