Colour Picker From Image
Click anywhere on an uploaded image to read the exact hex and RGB value of that pixel.
Upload a photo, screenshot, or design mock-up, then click any point on it to instantly see that pixel's colour as both a hex code and RGB values, with a swatch preview. Useful for matching a brand colour from a logo, picking a colour from a photo for a design, or checking exact pixel values without opening an image editor.
Why 'eyeballing' a colour from a screen is unreliable
The same colour can look noticeably different depending on your monitor's brightness, calibration, and viewing angle, which makes visually guessing a hex code from a photo surprisingly unreliable. Reading the actual stored pixel value directly, rather than estimating by eye, gives you the exact number that was actually saved in the image file — the same number regardless of which screen it's viewed on.
How canvas pixel reading actually works
Once an image is drawn onto an HTML canvas, the browser exposes a getImageData method that returns the raw red, green, blue and alpha values for any pixel coordinate you specify. This tool listens for a click on the displayed image, converts that click position into the corresponding coordinate on the canvas, and reads back the exact stored colour value at that single pixel — the same low-level approach professional image editing software uses internally.
A common real-world workflow this enables
Designers often need to match a colour used somewhere in an existing asset — a logo, a competitor's website screenshot, a photo of a physical product — without access to the original design files. Uploading that image here and clicking directly on the colour of interest gets an exact, reusable hex code in seconds, closing the gap between 'I see a colour I need' and having the precise code for it.
How to use it
- Upload an image using the box above.
- Click anywhere on the image.
- The hex and RGB value of that exact pixel appears below.
- Copy the hex or RGB code you need.
Common ways people use this tool
Matching a brand colour from a logo
Upload a company logo and click on its main colour to get the exact hex code for use in a design.
Picking a colour from a photo for a design project
Sample a colour directly from a photograph — like a sky or a fabric texture — to use as a design accent colour.
Checking a pixel's exact value while debugging a UI
Confirm the precise colour rendered in a screenshot when troubleshooting a visual bug or inconsistency.
Tips for getting the best results
- Zoom into your image beforehand if you need to pick a colour from a very small or fine detail.
- Click multiple nearby points and compare if a texture has visual noise, to get a representative colour rather than a single unusual pixel.
- Remember JPEG compression can slightly shift colours from the original scene, so results from heavily compressed photos may not be perfectly exact.
- Use the swatch preview to double check the picked colour visually matches what you expected before copying the code.
Frequently asked questions
How accurate is the colour reading?
It reads the exact pixel value from the canvas, so it's as accurate as the image file itself — though heavily compressed JPEGs can have slight colour shifts from the original scene.
Can I zoom in for more precise picking on small details?
Not yet in this version — for very fine detail, try cropping the image first with the Image Cropper tool, then upload the cropped result here.
Does it work on screenshots?
Yes, any standard image file (PNG, JPG, WebP) works, including screenshots.
Why did clicking near an edge give an unexpected colour?
Edges between two colours are often blended or anti-aliased by the image format, so a pixel right on a boundary may show a mixed colour rather than either pure shade.
Can I pick a colour that includes transparency information?
This tool reads the RGB colour value; alpha/transparency at that pixel isn't currently displayed separately.
Does the tool work with very large, high-resolution images?
Yes, though the image preview is scaled down for practical display — the colour reading still reflects the correct value from the original full-resolution file.
Is there a way to save multiple picked colours as a palette?
This version shows one picked colour at a time; for building a full palette, note down each hex code as you click through different points.
Why might the same visible colour give slightly different readings on different photos?
Photographic lighting, white balance, and compression artefacts can all subtly shift how a colour is actually stored in the image file, even when it looks like the same shade to the eye across different photos.
Can I pick a colour from a screenshot that includes a shadow or gradient?
Yes, though clicking on a shadowed or gradient area will read that specific blended shade rather than the 'base' colour underneath — click on a flat, evenly-lit part of the area for the most representative reading.
Does this tool work on SVG images?
It works on SVG files once they're rendered as a raster image on canvas, though very simple flat-colour SVGs tend to give the cleanest, most predictable colour readings.