Color Picker from Image
Hover or tap the rendered image to sample RGB and HEX. Click to copy the HEX value.
What you can do with a pixel color picker
The core job is simple: point at the rendered image and sample its color. If a client sends a logo as a flat PNG or JPG and you need a brand color for CSS, you can hover a solid area and read the displayed HEX instead of guessing in a design app.
It is also handy for sampling colors from screenshots. Say you spot a button shade or chart color you want to reuse: load the screenshot and sample the rendered value rather than estimating it by eye. Photographers and illustrators can use the same flow to pull a representative color from a reference image.
Because each click is added to a history strip, you can build a small palette by hand. Click five or six points across an image — say the highlights, midtones, and shadows of a product photo — and you end up with a short list of HEX codes you can copy one at a time into your stylesheet, design tool, or notes.
A walkthrough: pulling a brand color from a logo
Suppose a client gives you their logo as logo.png and asks you to match the blue in their website header. Open the Color Picker page and drag logo.png onto the drop area, or click Choose File and select it. The tool decodes the image, draws it to a sample canvas, and shows the source dimensions. Inputs whose longest side exceeds 4096 pixels are downsampled for browser stability.
Move your pointer over the blue part of the logo. The readout updates live, showing something like rgb(37, 99, 235) and #2563EB. Hold the pointer steady on a solid area of the color so you read a clean pixel rather than an anti-aliased edge.
Click that pixel. The HEX code #2563EB is copied to your clipboard and a chip appears in the history strip below. Sample the secondary color the same way — maybe a grey from the wordmark — and it joins the strip too. Now paste #2563EB straight into your CSS, and click the grey chip later when you need it, since each history chip copies its own HEX on click.
Supported input and output
Input is any image your browser can decode, selected through a file picker set to accept image files or by drag-and-drop. In practice that includes JPG, PNG, GIF, WebP, BMP, and usually AVIF, depending on your browser version.
Output is on-screen, not a downloaded file. You get a live RGB readout in the form rgb(r, g, b), a HEX readout like #RRGGBB, a small swatch preview of the current color, click-to-copy of the HEX value, and a recent-color history strip where each chip copies its own code when clicked.
How your file is processed
Color Picker samples a canvas-rendered copy in your browser, and the selected image is not sent to our server for color analysis. The page can still make separate requests for assets, consent, analytics, advertising, or compatibility code.
Quality and limitations
The readout reports one pixel from the browser's sample canvas. Near edges, gradients, or text, that pixel may be an anti-aliased blend rather than a flat source color. Images larger than 4096 pixels on the longest side are resampled before picking, so their readings can differ slightly from the corresponding original-file pixel. Hover a broad solid area when you need a representative color.
Image format matters. A GIF is limited to a 256-color palette, so a smooth gradient saved as GIF will show banding, and the value you pick reflects that quantized color rather than the original. JPG uses lossy compression, which can shift colors slightly and add subtle artifacts, especially around sharp color boundaries; the picker reports the compressed pixel honestly, not the pre-compression original.
The readout covers the red, green, and blue channels and the HEX code. Semi-transparent pixels (with an alpha channel) are sampled, but the copied HEX is a 6-digit RGB value and does not encode opacity. On a small image scaled up to fill the canvas, several screen pixels map to one source pixel, so moving the pointer a tiny amount may not change the reading until you cross into the next real pixel.
Common problems and fixes
Color does not change as I move the pointer: you are likely over a flat area of solid color, which is expected. If the whole image seems frozen, the picture may be very small and scaled up, so several cursor positions fall on the same source pixel — move further across the canvas.
Clicking does not copy: clipboard access can be blocked on insecure (non-HTTPS) pages or denied by the browser. The tool falls back to showing a message like 'Picked #2563EB (clipboard unavailable)', so you can still read and type the value manually.
I keep picking the wrong shade near text or edges: those pixels are often anti-aliased blends. Zoom is not built in, so target a large solid region of the color, or open a bigger version of the image where the area you want covers more pixels.
Nothing loads after I choose a file: confirm it is an image. The picker only accepts image files and will prompt 'Pick an image file' for anything else; a corrupt or unsupported file will show an error message instead of the canvas.
My history disappeared: the strip holds your most recent picks (older ones drop off as you add more), and pressing Reset or reloading the page clears it entirely, since nothing is saved between sessions.
Frequently asked questions
Does the color picker copy RGB or HEX when I click?
Clicking a pixel copies its HEX code (for example #2563EB) to your clipboard and adds it to the history strip. The RGB value, such as rgb(37, 99, 235), is shown live in the readout next to the HEX so you can copy or retype it by hand if you prefer that format.
How many colors does the history strip keep?
The strip holds your most recent picks and caps at a dozen chips; as you click more pixels, the oldest chips drop off the end. Each chip shows a swatch and its HEX code, and clicking a chip copies that code again. Pressing Reset or reloading the page clears the strip completely.
Can I pick a color from a transparent PNG?
Yes. The picker samples the pixel under your cursor including its alpha, but the copied HEX is a standard 6-digit RGB value and does not include opacity. Over a fully transparent area you will read the underlying RGB channels rather than a 'no color' result, so hover a visibly filled part of the image for a meaningful pick.
Related tools and guides
Crop an image to the region you want to sample · Resize image · Compress image · Convert PNG to JPG · Convert an image to Base64 · Best format for transparent images on websites · Choosing the best image format for websites · PNG vs WebP: which to use