Image colour picker
Click anywhere on a picture for its HEX, RGB and HSL, and see the palette it is built from. Nothing is uploaded.
No image yet.
Sampled from the real pixels
The picture on screen is usually a scaled-down copy, and scaling invents pixels that were never in the file. A picker that reads the preview therefore hands you a colour that is close to, but not, the one you pointed at.
This reads from the image at its original resolution and maps your click back onto it, so the value you get is a pixel that genuinely exists in the file.
The palette, and why it is binned
Underneath the picture are the colours it is mostly made of. Getting that right is less obvious than it looks: taking the six commonest exact values from a photograph returns six imperceptibly different shades of whatever dominates, which is useless.
So every pixel is first sorted into a coarse bin, a few thousand of them across the whole colour space. The fullest bins win, and each one then reports the true average of what actually landed in it. Binning is what makes the six colours distinguishable; averaging afterwards is what stops the answer being the corner of a bin rather than a colour that is really in the picture.
HEX, RGB and HSL
HEX is what CSS and design tools want, and what you will paste nine times out of ten. It is nothing more than the red, green and blue values written in base sixteen.
RGB is the same three numbers in decimal, which is what office software and some editors ask for.
HSL is hue, saturation and lightness, and it is the one worth knowing about. It describes a colour the way a person would: which colour it is, how vivid, how light. Making a shade 10% lighter is one obvious edit in HSL and pure guesswork in HEX, which is why it is the right format when you intend to build a set of related colours rather than copy a single one.
Sample from a PNG when it matters
JPG compression alters pixel values slightly, most visibly near edges and across large flat areas. A brand colour read off a JPG can therefore be a shade or two away from the real one, which is close enough for inspiration and not close enough for a brand guide.
If the exact value matters, sample from a PNG, an SVG export or the original artwork. The image converter will turn a WebP into a PNG first if that is what you have.
Common questions
- Is my image uploaded?
- No. It is read from your own disk and sampled in your browser. Nothing is sent to us or to anyone else, and nothing is stored.
- How do I get the colour of one exact spot?
- Click anywhere on the picture. The colour under the pointer is read from the image at full resolution, not from the scaled preview, so what you get is the real pixel value rather than something the browser invented while shrinking it for display.
- What is the palette underneath?
- The colours the picture is mostly made of. Every pixel is sorted into a coarse bin, the fullest bins win, and each one then reports the true average of what landed in it. That is why you get six distinguishable colours rather than six nearly identical browns, which is what picking the six commonest exact values would give you.
- Which format should I copy, HEX or RGB?
- HEX for CSS and design tools, which is what almost everyone wants. RGB when something asks for three separate numbers, which is common in office software and some editors. HSL when you want to adjust a colour rather than just use it, because changing lightness or saturation by hand is straightforward in HSL and guesswork in HEX.
- Why is the colour slightly different from the original design?
- Almost always because the image is a JPG. JPG compression alters pixel values slightly, especially near edges and in flat areas of colour, so a brand colour sampled from a JPG can be a shade or two out. Sample from a PNG or the original file when the exact value matters.