Image Color Picker
Read the exact colour of any pixel in an image. Click the picture to sample a point, or choose from the palette of colours the image is actually built from, and copy the value as HEX, RGB, or HSL. Everything is read from the decoded pixels in your browser — the image is never uploaded.
Image Tools
Private by default
This tool runs entirely in your browser. Your data is never uploaded to a server.
How it works
Reading a pixel
The image is drawn to a canvas at its natural size, so a click maps to one real pixel rather than to whatever the browser resampled for the layout. That pixel's red, green, and blue values are read directly and converted into the other notations.
- HEX, RGB, and HSL are three ways of writing the same colour — no precision is lost between them.
- Fully transparent pixels are skipped when building the palette, since their colour is not visible.
- The palette is sampled from a downscaled copy: averaging is what the downscale already does, and reading every pixel of a large photo costs far more than the answer is worth.
- Colours are read after the browser's colour management, so an image with an unusual embedded profile may sample differently than in a design tool.
For reference
The same colour, three ways
| HEX | RGB | HSL | Name |
|---|---|---|---|
| #ffffff | rgb(255 255 255) | hsl(0 0% 100%) | White |
| #000000 | rgb(0 0 0) | hsl(0 0% 0%) | Black |
| #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | Red |
| #00ff00 | rgb(0 255 0) | hsl(120 100% 50%) | Lime |
| #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | Blue |
| #808080 | rgb(128 128 128) | hsl(0 0% 50%) | Grey |
HSL is the one worth reading: hue says which colour it is, saturation how vivid, and lightness how close to white or black — which makes building a variation of a sampled colour straightforward.
How to use
4 clear steps.
Drop in the image you want to sample.
Click anywhere on it to pick that pixel's colour.
Or choose one of the colours found in the image.
Copy the value as HEX, RGB, or HSL.
Good to know
Frequently asked questions
- Why does the colour differ from the original design?
- A JPEG returns what its compression produced, not what the designer chose — colours shift slightly near edges and in smooth gradients. Sample a flat area away from an edge for the closest match.
- How is the palette chosen?
- By counting how often each colour appears, with near-identical shades grouped together so the palette does not fill up with eight versions of the same blue. It is the most common colours, not an artistic selection.
- Can I pick a colour without a mouse?
- Yes. The palette and the recently-picked swatches are ordinary buttons, so they are reachable by keyboard. Only sampling an arbitrary point needs a pointer.
- Does this work on a screenshot?
- Yes, and it is a common use. Be aware that a screenshot of a colour-managed display may record slightly different values than the source file contained.