Get HEX colour from image
Click any pixel to read its exact code, and get an automatic palette of the six colours that dominate the image.
Runs entirely in your browser. Your image is never uploaded.
Drop an image here, or choose a file
JPG · PNG · WEBP
Click anywhere on the image to read that pixel. Use Tab then the arrow keys to move the sampler with a keyboard.
Click any swatch to copy its HEX code.
How to use the colour picker
- Load an image. It is drawn onto a canvas in the page, which is what makes reading individual pixel values possible without any upload.
- Click anywhere on the image. The large swatch, the HEX field and the RGB field all update to that exact pixel.
- Use Tab to focus the image and the arrow keys to move the sampler one pixel at a time if you need precision, which is far easier than trying to hit a specific pixel with a mouse.
- Read the dominant colours row underneath for an automatic six-colour palette taken from across the whole image. Click any swatch to copy it.
What you can use it for
Matching a site to a photograph is the classic use. Pull the dominant colours out of your hero image, use one for buttons and another for section backgrounds, and the page reads as designed rather than assembled — because the colours genuinely belong together.
Recovering brand colours when nobody can find the brand guidelines happens more often than it should. A logo PNG, a screenshot of an old site, or a photograph of printed material will all give you the exact codes in a few clicks.
YouTube creators use it to match thumbnail text and graphics to their channel art, and to check that a title colour actually stands out against the background rather than sitting at the same brightness and disappearing at thumbnail size.
It is also useful for auditing. Sample the text colour and the background colour from a screenshot of your own site, then run both through the colour converter's contrast checker to find out whether your live pages actually pass the accessibility thresholds you assumed they did.
Things to know
You are reading the pixel as it exists in the file, after any compression. JPEG compression subtly shifts colours, especially near sharp edges, so a logo saved as JPEG will give slightly different readings across an area that was originally one flat colour. Sample from a PNG or the original vector file when precision matters.
The image is drawn onto a canvas and read back with getImageData. This is a same-origin operation, which is why the tool only works with files you load from your own device — a canvas that has drawn an image from another domain becomes tainted and refuses to give up its pixel data.
The dominant colour palette is produced by sampling pixels across the image on a grid, grouping them into colour buckets, and returning the most populated ones. It is a fast approximation rather than a true clustering algorithm, so it favours the colours that cover the most area rather than the ones that stand out most.
Screenshots of screens have a subtlety worth knowing: your display profile affects what you see but not what is stored. The pixel value read here is the true value in the file, which may look different on another monitor. That is a feature, not a bug — the file is the source of truth.
Frequently asked questions
Not directly, but take a screenshot and load that. The pixel values in a screenshot are exactly what the browser rendered, so the codes you read are the real ones. For live pages, your browser's developer tools also have a built-in eyedropper.
Almost always JPEG compression. It works by discarding colour detail the eye is least sensitive to, which shifts values slightly across a flat area. Test it by sampling two points in what should be one solid colour — if they differ by a few units, compression is the reason.
No. The file is read from your device into a canvas element in the page, and all pixel reading happens there. Nothing is transmitted, which matters if you are sampling from an unreleased design or a client's confidential material.
It samples pixels on a grid across the whole image, groups similar colours together, and returns the six largest groups. Very small but visually striking elements may not appear, because the method measures how much area a colour covers rather than how much attention it draws.
Tapping works, but hitting one specific pixel with a fingertip is awkward. Zoom into the image in your gallery app first and screenshot the area you need, then load that — the enlarged pixels are much easier to target.