Pick Exact Colour Values From Any Point in a Photo
Click anywhere on an image and read back the HEX, RGB and HSL values for that precise pixel.
About the Color Picker from Image
Load a picture and it appears as a clickable preview with a crosshair cursor. Every click samples the colour at that point and adds a row showing three notations at once — the HEX code, the RGB triplet and the HSL values — each with a button that copies the HEX straight to your clipboard. Picks accumulate rather than replacing one another, so you can work across an image collecting six or eight colours and end up with a list rather than a single value you have to write down before the next click.
The sampling is more precise than it looks. The preview is scaled down to fit the page, but your click is mapped back to the corresponding pixel in the full-resolution original before the colour is read, so what you get is the true value from the source file rather than something softened by the on-screen scaling. Everything happens in your browser, which matters when the reference photograph belongs to a client rather than to a stock library.
Key Features
- Three notations at once: Each pick reports HEX, RGB and HSL together, so the value is ready for whichever tool needs it next.
- Picks build a list: Every click adds a new row instead of overwriting the last, letting you collect a whole scheme in one session.
- Sampled at full resolution: Clicks are translated back to the original image's pixels, so downscaling for display never affects the value you get.
- One-click copying: Each row has its own copy button that puts the HEX code on the clipboard.
- Crosshair targeting: The cursor changes to a crosshair over the image so you can aim at a specific detail rather than a general area.
How to Use the Color Picker from Image
- Add the image you want to sample colours from.
- Click a point on the preview — a row appears with that pixel's values.
- Keep clicking to collect as many colours as you need.
- Use the copy button on any row to take its HEX code.
How It Works
The image is decoded onto a canvas kept at full resolution while a scaled copy is shown on screen. A click is converted into source coordinates using the ratio between the displayed size and the real size, then a single pixel is read back from the canvas and converted into the three notations, with the HSL figures calculated from the RGB values. Because it reads exactly one pixel rather than averaging a small area, clicking on a noisy photograph or a JPEG with visible compression can return a value that is slightly off from the colour you perceive — sample two or three nearby points and compare if the surface looks grainy.
When You Need It
An interior designer working from photographs a client has sent of their living room needs the existing wall and upholstery colours as usable values before specifying paint and fabric. Those pictures show the inside of somebody's home, including possessions and room layout, and clients do not expect them to be handed to a colour-picking website in order to save the designer typing a hex code. Set designers matching props to reference stills and product teams sampling a competitor's packaging photo work the same way.