No upload · Runs in your browser
Image Colour Picker
Pick a colour from anywhere in an image and get its HEX, RGB, HSL and CMYK values. The main colours of the picture are pulled out for you too, and each colour is checked for whether text will actually be readable on it.
Drag & drop an image here
Nothing is uploaded — the pixels are read in your browser.
Move over the image, then click to lock a colour. Locked.
Main colours in this image
Picked
Text on this colour
WCAG contrast, for body text.
Step by step
How to pick a colour from an image in 4 steps
-
Add your image
-
Move over it
A magnifier shows the individual pixels under your cursor — picking one by eye is not really possible otherwise.
-
Click to lock the reading so you can read and copy it
-
Click any value to copy it
Or take one from the extracted palette below the image.
Good to know
Reading a colour, and writing it down
Why there is a magnifier
An image on screen is displayed at whatever size the page gives it, and the thing you are usually trying to sample — a highlight in an eye, a single strand of hair, the exact shade of a logo — is a few pixels across. At display size your cursor covers all of them, and the colour you get is whichever one happened to be underneath.
So the loupe shows a grid of the actual pixels around the pointer. It is the difference between picking the colour you meant and picking one near it.
The four notations
- HEX —
#3ba7c4. What CSS and design tools use. Three pairs of hexadecimal digits for red, green and blue. - RGB — the same three numbers in decimal, 0 to 255. Identical information, different spelling.
- HSL — hue, saturation, lightness. The useful one for adjusting a colour: to get a darker version of the same shade you change one number instead of guessing at three.
- CMYK — the four printing inks. Read the caution below before using it.
About that CMYK value
The CMYK figure here is the standard naive conversion, and it is worth knowing that is what it is. A real one depends on the printing process, the paper, the ink set and an ICC profile — the same file printed two ways needs two different sets of numbers.
Treat it as a starting point for a conversation with a printer, not as a specification. If a colour genuinely matters — a brand colour on packaging — the printer will want the Pantone or the profiled value, not four percentages from a web page.
There is also a category of colours that simply cannot be printed. Bright, saturated screen colours, particularly greens and oranges, sit outside what ink on paper can produce, and the CMYK conversion silently gives you the nearest achievable colour instead.
The colours in the picture
Below the image is a palette of its dominant colours, extracted with an algorithm called median cut. It repeatedly splits the colour space along whichever axis is most spread out, rather than counting which exact colour values are most common.
The difference matters on photographs. A sky is thousands of near-identical blues where no single value is common, so counting frequencies returns the same colour several times over, one step apart. Splitting the space returns the colours a person would actually name.
What it will not do is surface a handful of pixels among thousands — a negligible outlier is not a dominant colour, and reporting it would be reporting noise.
Quality
Contrast, and how accurate this is
Can I put text on this colour?
This is the question behind the question most of the time, so it is answered directly: every picked colour is scored for contrast against white and black text using the WCAG formula, with the pass or fail shown next to the ratio.
- 4.5:1 is the minimum for body text (WCAG AA).
- 3:1 is the minimum for large text — roughly 24px, or 19px bold.
- 7:1 is the stricter AAA level.
The formula is not a simple brightness comparison. It uses relative luminance, which weights green far above red and blue and applies a gamma curve — which is why a saturated blue that looks "medium" is much darker than it appears, and why a yellow that looks bold is nearly as light as white.
Eyeballing this reliably is not possible, which is the reason the number is worth showing.
Why the colour you get may not match the original
Two honest caveats:
- JPEG compression alters colours slightly. Colour information is stored at lower resolution than brightness, so the exact value of a small coloured detail may have shifted from what the camera recorded. Sampling a large flat area gets you closer.
- Colour profiles are not applied. An image tagged Adobe RGB or Display P3 is read as raw numbers, so a saturated colour may read differently from how a colour-managed application shows it. For sRGB images — nearly everything on the web — this makes no difference at all.
What people use this for
- Matching a brand colour from a logo when nobody can find the brand guide.
- Building a palette from a photograph — a common and genuinely good way to choose colours for a site or a deck.
- Checking a screenshot to find the exact colour a design uses.
- Getting CSS values out of a mockup that arrived as a flat image.
- Checking readability before putting text over a photograph or a coloured panel.
Nothing is uploaded
The image is decoded and read in your browser. It could not work any other way at this speed — the whole interaction is answering "what is under my cursor" as fast as you move — and it means the file never leaves your device.
That is worth stating because the images people sample are so often not theirs to share: an unreleased design, a client's brand assets, a competitor's screenshot.
Picking from a photograph, not a flat graphic
One practical warning. Photographs have no flat colours. What looks like a plain red jumper is hundreds of reds varying with light and shadow, and the pixel you happen to click is one sample of that range, not "the" colour.
For a photograph, the extracted palette is usually more useful than any single pick, because each entry is the average of a whole cluster rather than one arbitrary pixel. For a logo, a screenshot or a flat graphic, a single pick is exactly right — those genuinely do have one value.
Getting a darker or lighter version
Use HSL. Keep the hue and saturation, and change only the lightness: hsl(199, 55%,
50%) to hsl(199, 55%, 35%) is unmistakably the same colour, darker. Trying the
same thing in HEX means adjusting three values at once and guessing, which is how palettes end up
with a "dark blue" that has quietly drifted purple.
Related
If you are sampling an image to reproduce its look, the metadata viewer will tell you what camera and settings produced it. If you are building something with the colours you find, the watermark tool takes a hex value directly.
Questions & answers
Colour Picker: frequently asked questions
Why is there a magnifier?
Because the thing you are usually sampling — a highlight, a strand of hair, the exact shade of a logo — is a few pixels across, and at display size your cursor covers all of them. The loupe shows the actual pixels under the pointer, which is the difference between picking the colour you meant and one near it.
Can I trust the CMYK values for printing?
Treat them as a starting point, not a specification. This is the standard naive conversion; a real one depends on the press, the paper, the ink set and an ICC profile, so the same file printed two ways needs two different sets of numbers. If a colour genuinely matters, your printer will want a Pantone or a profiled value.
How are the main colours worked out?
By median cut, which repeatedly splits the colour space along whichever axis is most spread out. That beats counting the most common values on photographs: a sky is thousands of near-identical blues where no single one is common, so frequency counting returns the same colour several times one step apart.
Why does the colour I picked look different from the original?
Two likely reasons. JPEG stores colour at lower resolution than brightness, so small coloured details shift slightly — sampling a large flat area avoids this. And colour profiles are not applied, so an Adobe RGB or Display P3 image is read as raw numbers. For sRGB images, which is nearly everything on the web, neither makes any difference.
What contrast ratio do I need?
4.5:1 for body text, 3:1 for large text (about 24px, or 19px bold), and 7:1 for the stricter AAA level. The figure is not a brightness comparison — it weights green far above blue and applies a gamma curve, which is why a saturated blue is much darker than it looks. Judging it by eye is not reliable, which is why the number is shown.
Are my images uploaded?
No. The image is decoded and read in your browser — it could not work at this speed otherwise, since the tool answers "what is under my cursor" as fast as you move. Worth knowing given how often the images people sample are unreleased designs or someone else's brand assets.
How do I get a darker version of a colour?
Use the HSL value and change only the lightness, keeping hue and saturation. Doing the same in HEX means adjusting three numbers at once and guessing, which is how a palette ends up with a "dark blue" that has quietly drifted purple.
Keep going
Related image tools
Add a Watermark to an Image
Add a text or logo watermark to your photos. Position, angle, opacity and tiling. Free, no sign-up, on any phone or computer.
Merge Images Into One
Combine several images into one picture: side by side, stacked or in a grid. Drag to reorder. Free, no sign-up.
Image Metadata Viewer
See exactly what your photos record: camera, settings, dates and the GPS coordinates of where they were taken.
PNG to JPG Converter
Convert PNG to JPG free, with no sign-up. Choose the quality, pick a background colour for transparent areas, and download instantly.