Image Color Picker

What is an image color picker?

An image color picker is a tool that reads the exact color of a pixel in an image and reports it as a HEX code, an RGB triplet, or both. Designers, developers, and artists use it to capture colors from photos, screenshots, mockups, or any raster image so they can reuse the same shade in code, design software, or brand guidelines. Instead of eyeballing a color in a picker dialog, you click the pixel you want and get a precise, reproducible value.

Behind the scenes, the browser decodes the image onto a canvas, and the getImageData API returns the red, green, blue, and alpha values for the exact pixel under the cursor. Those numbers are then formatted as a CSS rgb() string and converted to a #RRGGBB HEX code. Because the read happens on a canvas that lives in your browser, no pixel data ever leaves your device — the operation is completely local and private.

What does this tool do?

This Image Color Picker loads any PNG, JPG, WebP, GIF, BMP, or HEIC file in your browser, draws it to a canvas, and lets you click anywhere to sample a single pixel. For every click it reports:

• HEX code. The 6-digit #RRGGBB representation, ready to paste into HTML, CSS, or design tools.
• RGB triplet. The rgb(r, g, b) CSS form, with each channel from 0 to 255.
• Pixel position. The x and y coordinates of the sampled pixel, useful for tracing back where a color came from.
• Live preview. A large swatch shows the currently selected color, and a hover indicator follows your cursor before you click.
• History. The last 10 sampled colors are listed below, each clickable to re-select and each with its own copy buttons.

There is no download button — this tool is for sampling, not exporting. The output is the HEX or RGB string you copy to your clipboard, which you can then paste into CSS, a design file, a brand book, or a bug report.

When to use an image color picker

Color picking comes up whenever you need to match or replicate a color from an existing image rather than invent one from scratch. Common situations include:

• Brand consistency. Pull the exact brand color out of a logo, header, or marketing image so your new design matches.
• Design handoff. Read colors from a mockup screenshot to translate them into CSS variables for developers.
• Photo retouching. Sample a skin tone, sky color, or shadow color to reuse in a brush or adjustment layer.
• Accessibility audits. Read foreground and background colors from a screenshot to compute contrast ratios.
• Recreating UI. Match the exact button or link color from an existing website by sampling a screenshot.
• Art and crafts. Pick colors from a reference photo to mix paint, choose yarn, or pick fabric.

Because the picker reads the true pixel value, it is more reliable than guessing from a tiny on-screen swatch — especially on high-DPI displays where a single visual point may cover several pixels.

How to pick a color from an image

Using this tool takes only a few seconds and runs entirely in your browser. Follow these four steps:

1. Upload an image. Click the upload area above or drag and drop a PNG, JPG, WebP, GIF, BMP, or HEIC file from your computer.
2. Hover to preview. Move your cursor over the rendered image — a small indicator follows the pointer so you can aim precisely before committing.
3. Click to sample. Click the pixel you want. The HEX code, RGB triplet, and pixel position appear in the result panel, and the color is added to the history list.
4. Copy the value. Click "Copy HEX" or "Copy RGB" to place the value in your clipboard, then paste it into your CSS, design file, or notes.

Every step runs locally in your browser using the Canvas API. The image is never uploaded to a server, so the sampling is completely private and suitable for confidential or personal photos.

HEX vs RGB vs HSL

Colors can be written in several formats, and each has its own strengths. HEX (e.g. #0EA5E9) is compact and is the default in HTML, CSS, and most design tools — every two characters after the # encode one channel as a hexadecimal byte. RGB (e.g. rgb(14, 165, 233)) uses decimal numbers from 0 to 255 per channel and is easier to read aloud or compute with, which is why it is common in programming and debugging. HSL (e.g. hsl(199, 89%, 48%)) describes hue, saturation, and lightness, and is often preferred when you want to adjust a color's shade or build a palette by rotating the hue.

This picker reports HEX and RGB because they are the most universally pasteable formats. If you need HSL, a quick conversion — or one of our color tools — turns the HEX or RGB into HSL. The important thing is that all three describe the same on-screen color, so the format you copy is a matter of where you plan to paste it.