How to Pick a Colour From an Image
You need the exact colour of something — a logo you have no brand guide for, a shade in a photograph you want to build a palette around, a button in a screenshot you are trying to match. Guessing from memory is hopeless; the eye is remarkably bad at judging colour in isolation. This tool reads the actual pixel value, hands you HEX, RGB and HSL, and extracts the image's dominant palette automatically — all inside your browser.
Upload your image
Drop a photo, screenshot or logo. It loads instantly and is processed entirely on your own device.
Click any pixel
Hover to preview the colour under your cursor, then click to lock it. You get HEX, RGB and HSL for that exact pixel.
Copy or take the palette
One click copies any value. The auto-generated palette below gives you the image's eight dominant colours.
HEX, RGB or HSL — Which Should You Use?
All three describe the same colour; they just differ in what they make easy. HEX is the compact web standard — six characters, universally understood, and what you will paste into CSS ninety percent of the time. It is not human-readable, but it does not need to be.
RGB spells out the red, green and blue channels explicitly, which matters when you need to add transparency: rgba() takes a fourth alpha value that HEX handles far less legibly. It is also the format most design software and canvas APIs speak natively.
HSL — hue, saturation, lightness — is the one worth learning. It is the only format where the numbers correspond to something a human actually perceives. Want a darker version of a colour? Lower the lightness. A muted version? Lower the saturation. A complementary colour? Add 180 to the hue. Building a coherent palette from a single starting colour is enormously easier in HSL than in HEX, where the relationship between the numbers and the visual result is essentially arbitrary.
Common Situations This Tool Solves
Matching a brand colour with no style guide
You have the logo as an image and nothing else. Click the pixel, get the HEX, and your buttons and headings now match exactly rather than approximately.
Building a palette from a photograph
The dominant colour extraction gives you a coherent set of shades that already work together, because they came from an image where they already coexist.
Recreating a design from a screenshot
Rebuilding a UI you only have a picture of means matching dozens of colours. Sampling each one directly is the only way to get them right.
Checking what colour something actually is
The eye is easily fooled by surrounding colours - the same grey looks different against black and white. The pixel value does not lie.
Frequently Asked Questions
How do I get the HEX code of a colour in an image?
Upload the image and click the pixel you want. The HEX code appears immediately, alongside the RGB and HSL values, and one click copies any of them.
How does the automatic palette work?
The image is scanned and its colours grouped into buckets, with the eight most frequently occurring groups shown as swatches. These are the colours that genuinely dominate the image, not a random sample.
What is the difference between HEX, RGB and HSL?
They describe the same colour differently. HEX is the compact web standard. RGB spells out the channels and supports transparency easily. HSL matches human perception and is far better for building palettes.
Is my image uploaded to pick colours?
No. The image is drawn to a canvas inside your browser and the pixels are read locally. It is never uploaded to any server, never stored, and never seen by anyone.
Can I pick a colour from a screenshot?
Yes, and it is one of the most common uses. Screenshots are just images - drop one in and sample any pixel to get the exact value used in the original design.
Why does the same colour look different in different places?
Because human colour perception is contextual - a grey against black looks lighter than the same grey against white. Sampling the actual pixel value removes the guesswork entirely.
How do I build a colour palette from a photo?
Upload the photo and use the extracted dominant palette. Those colours already coexist harmoniously in the image, which is why palettes taken from photographs tend to work.
Can I download the palette?
Yes. The Download palette button saves a text file containing every swatch in HEX, RGB and HSL format, ready to paste into your project.
Does it work on transparent PNGs?
Yes. Fully transparent pixels are excluded from the palette extraction, so you get the actual colours of the graphic rather than a meaningless average with the empty background.
Can I pick colours on my phone?
Yes, though a mouse is more precise for individual pixels. On a phone, the automatically extracted palette is usually the more practical way to work.
How accurate is the picked colour?
It is the exact value of that pixel as your browser decoded it. Note that a JPEG's compression artifacts mean neighbouring pixels in a flat area can differ slightly - sample the centre of a region, not an edge.
Is this colour picker really free?
Completely free, with no limits, no signup and no premium wall. Everything runs in your browser, so there are no server costs to pass on.
Last updated: July 11, 2026 · FlipMyFormat Colour Picker
Written and maintained by the FlipMyFormat team