Color Picker from Image - Get the HEX Code of Any Pixel

Upload an image, point at any pixel, and read its exact HEX, RGB and HSL values. A pixel-grid magnifier shows what is under the crosshair, arrow keys nudge the sample one pixel at a time, and nothing leaves your browser.

Drop images here or click to upload

Supports JPG, PNG, GIF, WEBP, SVG

Why Pick a Single Color from an Image

Most color questions are about one specific spot, not about an image as a whole. Someone hands you a screenshot of a signed-off design and you need the exact button fill to reproduce it in CSS. A client sends a JPG of their logo and you need the brand red before you can build anything around it. You are matching a chart series to the header color in a slide deck. You are checking whether two swatches that look identical in a photo really are the same value, or whether one is two steps darker. In all of those, an automatic palette is the wrong answer - it would return the six colors that cover the most area, and the color you actually need might be a 40-pixel accent that no clustering algorithm would ever surface. Being able to point at the pixel is the whole job. It is also the fastest route when the source file is gone. Design systems drift, source files get lost, and a flattened PNG export is often the only surviving record of what a color was. Reading it back takes a second and needs no design software installed. The same applies to work that never involved a designer: a photographer sampling a skin tone before grading, a developer copying a background color out of a bug report screenshot, a teacher pulling colors out of a painting for a worksheet. Because everything runs locally, unreleased mockups and internal screenshots never leave your machine.

Recover the exact fill of one button, badge or logo mark from a flattened screenshot when the source file is gone

Point at the pixel you care about instead of accepting whichever colors an automatic palette decides are dominant

Land on a one-pixel border or a thin antialiased edge using arrow-key nudging and a 13 by 13 pixel magnifier

Copy the same pixel as HEX, RGB or HSL, plus HEXA and RGBA when it carries transparency

How to Get a Color from an Image

Four steps, and no account or install. Files are read directly by the page - nothing is uploaded to a server.

Drop an image on the upload area, choose a file, or paste one straight from the clipboard. JPG, PNG, WebP, GIF and SVG all work.

Move the pointer over the image. The magnifier shows the pixel grid around the crosshair and the panel updates live. On a touch screen, press and drag - the magnifier sits above your finger so it is never hidden.

Fine-tune with the arrow keys or the on-screen arrows: one press moves the sample exactly one source pixel. Switch to actual size if the image is being scaled down to fit the column.

Click, tap or press Enter to keep the color, then copy its HEX, RGB or HSL value. Kept colors stay in the recent list so you can copy any of them again.

Frequently Asked Questions

Three things can pull the value apart. First, most browsers ignore an image's embedded ICC profile when it is drawn to a canvas, so a photo tagged Display P3 or Adobe RGB is read as if its numbers were sRGB - a color-managed editor like Photoshop applies the profile and reports something else. Second, your monitor renders sRGB through its own gamut and calibration, so the same value looks different on two screens. Third, a JPG's lossy compression genuinely changes pixel values near edges, so what looks like one flat area can hold several slightly different colors. The number here is the byte that is actually stored, which is what CSS and code will reproduce.

Canvas returns un-premultiplied color, meaning the RGB and the alpha are stored separately. A pixel authored as 50 percent white over nothing comes back as rgb(255, 255, 255) with alpha 128 - a value that never appears anywhere on screen. Whenever alpha is below 255 the tool shows the raw values, the 8-digit HEXA and RGBA forms, and additionally what that pixel resolves to over a white background, which is usually the number you actually wanted.

This page samples the pixel you point at. The palette page analyses the whole image, quantises it into clusters and returns the four to ten colors that dominate it, ranked by how much of the picture they cover. Use this one when you know which spot you care about - a logo mark, a button, one leaf. Use the palette page when you want a scheme derived from the image as a whole and do not have a specific pixel in mind.

No. The file is read by the page itself, decoded into a canvas in your tab, and sampled there. No copy is sent to a server, nothing is stored, and the recent-picks list lives only in the open tab and disappears when you close it. That matters for unreleased mockups, internal dashboards and anything else you would not paste into a random web form.

Press and drag rather than tapping. The magnifier is drawn above the contact point instead of under it, so you can see the pixel grid while your finger is still on the screen, and the sample follows the drag. For the last pixel or two, use the on-screen arrow pad: each press moves the sample exactly one source pixel, which no fingertip can do. Lift your finger or press the check button to keep the color.

Yes. Browsers limit total canvas area to roughly 16.7 million pixels - about 4096 by 4096 - so a 24 or 50 megapixel file cannot be displayed as one full-resolution canvas, and the preview is drawn smaller with a note saying so. Sampling does not go through that preview. Each reading redraws only a small window around the pointer, taken from the decoded file at 1 to 1, so the pixel you get is the pixel in the file. There is no need to crop the image first, and a single-pixel detail in a 50 megapixel photo reads exactly as authored rather than blurring into its neighbours.

Yes, with one caveat each. An animated GIF is drawn as its first frame only, so colors that appear later in the animation are not reachable - export the frame you need first. An SVG is rasterised before sampling, so you get the color of the rendered result including any opacity, filter or gradient applied to the shape, not the raw fill written in the markup. If the SVG declares no intrinsic size it is rasterised at 1024 pixels wide.

They all describe the same pixel, so it is about what you are pasting into. HEX is the compact form most design tools and stylesheets expect. RGB is easier to read when you need to nudge one channel or compare two colors numerically. HSL is the one to copy when you want a variation rather than the exact color: keep the hue and saturation, change the lightness, and you get a matching tint or shade. An 8-digit HEXA or an RGBA value appears as well whenever the pixel carries transparency.

More Image Tools

Explore other powerful tools for your image editing needs

Why Pick a Single Color from an Image

How to Get a Color from an Image

Frequently Asked Questions

More Image Tools

Compress Image

Resize Image

Crop Image

Convert Format

Photo Editor

Rotate Image

Flip Image

Add Watermark

Add Border

Rounded Corners

Filters

Blur Face

Mosaic

Remove Background

Enhance Image

Add Text

Collage

HTML to Image

GIF to Image

Trim Image

Batch Rename Images

Circle Crop

Black & White

Split Image

Merge Images

Change DPI

Image to Base64

Image to PDF

HEIC to JPG

EXIF Remover

Favicon Generator

Color Palette

Base64 to Image

HEIC to PNG

Text Behind Image

Signature Maker

Signature Background Remover

Transparent Background Maker

Meme Generator

Image Upscaler

PDF to JPG

PDF to PNG

Passport Photo Maker