Matching a colour by eye almost never works. A brand blue in a screenshot, the background colour behind a logo, or the exact shade in a photograph all look close enough to guess but are wrong by a few points the moment you compare them side by side in code or in a design tool. Reading the actual pixel value removes the guesswork entirely, because it reports what the file literally contains rather than an approximation.
The photo never leaves your device. It is decoded by the browser, drawn onto a canvas, and every click reads back the pixel data at that exact coordinate using the canvas API, so a private screenshot or an unreleased design mockup stays completely private while you sample colours from it.
When you need an image color picker
The most common case is matching an existing brand colour from a logo or a screenshot when the original design file is not available, which usually means you need a fast way to get hex color from image files without opening a full design application. A close second is wanting to pick color from photo content for a website background or a CSS gradient, where the goal is something that genuinely belongs in the scene rather than a colour that merely looks similar.
It is also the fastest way to check whether two elements that look like the same colour in a screenshot actually are, since even a one point difference in RGB is invisible to the eye but will show up immediately once you read both values.
- Sample a brand colour from a logo image when you do not have the original hex code.
- Pick a background colour that matches a photograph for a seamless website header.
- Check whether two areas of a design mockup are actually the same colour or only close.
- Build a small palette by sampling several points across one image, one click at a time.
- Verify a colour before shipping it in code, since a guessed hex value is rarely exact.
Using the magnified loupe for pixel accurate clicks
Clicking a single pixel accurately with a mouse is harder than it sounds, especially on a small or detailed area of an image, so this tool shows a magnified loupe that follows your pointer and previews the exact pixel that will be sampled before you click. That preview removes the guesswork of clicking one pixel too far to the left or right.
On a touch screen, dragging a finger across the image moves the loupe the same way a mouse does, and lifting your finger samples the pixel underneath it, which keeps the tool equally usable on a phone or tablet.
Reading HEX, RGB and HSL together
The same pixel colour is shown in three formats at once because different tools expect different formats. HEX, a six digit code like 3B82F6, is the format CSS and most design tools use directly. RGB, three numbers from 0 to 255 for red, green and blue, is useful when a tool or API expects numeric channels rather than a hex string. HSL, hue, saturation and lightness, is the most useful format for adjusting a colour predictably, since sliding the lightness value alone produces a lighter or darker version of the exact same hue.
Every value has its own copy button, so pasting the right format into whatever you are working on takes one click rather than retyping or converting by hand.
How this image color picker works under the hood
The image is drawn onto an HTML canvas element, and each click reads the pixel at that coordinate using the canvas getImageData method, which returns the raw red, green, blue and alpha values the browser has for that exact pixel. Those numbers are then converted to hex and HSL directly with standard colour math, with no external service involved at any point.
Because sampling happens through canvas pixel data rather than a network call, there is no upload and no limit on how many times you click. You can verify that yourself by watching your browser's network panel while you sample colours, there will be no request for any of it.
A note on JPEG compression and colour accuracy
JPEG is a lossy format, and its compression can shift individual pixel colours slightly from what was originally captured, especially near sharp edges between very different colours. If you need an exact brand colour and the source image is a JPEG screenshot, sample from a large flat area of the colour rather than right at an edge, where compression artifacts are most likely to distort the value. A PNG source does not have this problem, since PNG compression is lossless and every pixel stays exactly as it was.
How to pick a color from an image
- 1
Add your image
Drag a photo, screenshot or graphic onto the drop area, or click it to choose a file. Nothing is uploaded.
- 2
Move the loupe to the exact pixel
Hover or drag over the image and watch the magnified loupe follow your pointer to line up the click precisely.
- 3
Click to sample the colour
Click, or lift your finger on a touch screen, and the HEX, RGB and HSL values for that pixel appear instantly.
- 4
Copy the value you need
Press the copy button next to HEX, RGB or HSL to copy that exact format to your clipboard.
Related tools worth bookmarking
Sources and further reading
- MDN: CanvasRenderingContext2D.getImageDataThe canvas method this picker uses to read the raw red, green, blue and alpha values of a single pixel.developer.mozilla.org
- W3C: CSS Color Module Level 4The specification defining the HEX, RGB and HSL colour formats this tool converts a sampled pixel into.w3.org
Frequently asked questions
Common questions about the image color picker.
It reads the exact pixel value the browser has decoded from your file, so it is as accurate as the source image itself. The only source of imprecision is clicking a slightly different pixel than intended, which the magnified loupe is designed to prevent by previewing the pixel before you click.
No. The image is decoded and drawn onto a canvas in your browser, and every click reads pixel data locally using the canvas API. Nothing about the image or the colours you sample from it is ever transmitted anywhere, which you can confirm by checking your browser's network panel.
HEX and RGB describe the same colour as either a six digit code or three numeric channels, and both are equally precise. HSL describes the same colour by hue, saturation and lightness instead, which makes it easier to produce a lighter, darker or more muted version of a sampled colour by adjusting just one of the three values.
Yes. Any PNG, JPG or WebP file you drop in can be sampled from, whether it is a photograph, a screenshot, a logo or a design mockup. There is no restriction on the type of image, only on the file formats the browser itself can decode.
The most common cause is a JPEG source image, since JPEG compression can shift pixel values slightly near edges between very different colours. Sample from the middle of a large flat area of the colour rather than near an edge, or use a PNG source, where compression is lossless and every pixel stays exact.
Yes. Dragging a finger across the image moves the magnified loupe the same way a mouse pointer does, and lifting your finger samples the pixel underneath it, so the tool works the same way on a touch screen as it does with a mouse on a laptop.