Skip to content
ImgWrench

Color Picker from Image

Click any pixel to get its HEX, RGB and HSL code, and pull the main colors out of the image as a palette.

Everything happens on your device. Nothing is uploaded.

Specs

ValuesHEX, RGB and HSL, each with a copy button
PrecisionThe exact pixel under the cursor, with an 11 × 11 pixel magnifier; arrow keys move one pixel at a time
PaletteThe 5, 8 or 12 main colors, sorted by how much of the image each covers
ExportCSS custom properties, JSON or a plain HEX list; copy or download
InputPNG, JPG, WebP, GIF, AVIF and BMP, one image at a time

Specs last verified: 2026-10-24

ImgWrench's color picker reads the exact color of any pixel in an image and gives you its HEX, RGB and HSL codes. It also finds the image's main colors and exports them as a palette for CSS, design tools or code.

How to pick a color from an image

  1. Drop an image into the tool above.
  2. Move over the image; the magnifier shows the pixel you're on.
  3. Click to pick. The HEX code is copied and the color is added to your list.
  4. Export your picked colors, or the automatic palette, as CSS, JSON or HEX.

HEX, RGB and HSL

  • HEX (#ff5a1f) is what most design tools and CSS use.
  • RGB (rgb(255, 90, 31)) gives the red, green and blue amounts from 0 to 255.
  • HSL (hsl(16, 100%, 56%)) gives hue, saturation and lightness, handy for making lighter or darker shades.

How the palette is made

The tool groups similar pixels together and picks one color to stand for each group, then sorts them by how much of the image they cover. Transparent areas are left out, so a logo on a clear background gives just the logo's colors.

Why ImgWrench

  • Exact pixels. A magnifier and one-pixel keyboard steps.
  • Ready to paste. CSS custom properties, JSON or a HEX list.
  • Private by design. Your images never leave your device.

Frequently asked questions

How do I pick a color from an image?

Drop the image into the tool above and move the pointer over it. A magnifier shows the exact pixel, and its HEX, RGB and HSL values update as you move. Click to pick the color: its HEX code is copied straight away and it's added to your picked colors. On a phone, drag your finger over the image and tap to pick.

How do I get the HEX code of a color in an image?

Click the color in the image. The HEX code, such as #ff5a1f, is copied to your clipboard right away, and it also appears with the RGB and HSL versions under Color under the cursor, each with its own Copy button. Every color you pick stays in the list, so you can click any swatch later to copy it again.

How do I extract a color palette from an image?

The palette appears below the image as soon as you drop it in. Choose 5, 8 or 12 colors; each swatch shows how much of the image it covers, with the most common first. Export the palette as CSS custom properties, JSON or a plain HEX list, then copy it or download it as a file.

Why is the picked color a little different from what I expected?

Photos are rarely one flat color: JPG compression and lighting make neighbouring pixels differ slightly, so one pixel can be a shade off the color you see overall. Use the magnifier to aim at the middle of an area, or use the palette, which groups similar pixels into one representative color.

Can I pick colors with the keyboard?

Yes. Select the image with Tab, move the crosshair with the arrow keys, one pixel at a time or ten with Shift held, and press Enter or Space to pick. The magnifier and the HEX, RGB and HSL values follow the crosshair, so you can pick exact pixels without a mouse.

How do I use a logo's color for my website icon?

Pick the logo's main color here and copy its HEX code. Then open the favicon generator, choose Colour under Background and paste the code: it fills the Apple touch icon behind your logo and becomes the theme color in your web app manifest.

Are my images uploaded anywhere?

No. The color picker runs entirely in your browser, so your images never leave your device and are never sent to a server. Reading pixels and building the palette both happen locally. You can check this yourself: open your browser's network tab while you pick colors, and you'll see that no image data is sent anywhere.