How to use the image colour picker
Step 1 — Bring in an image
Drag a file onto the drop area, click to browse, or simply paste with Ctrl+V — handy for a screenshot you have just taken. PNG, JPG, WEBP, GIF and BMP all work, and nothing is uploaded: the file is read inside your browser.
Step 2 — Aim with the magnifier
Move over the image and a loupe follows the cursor, showing the pixels around the crosshair enlarged. That is what makes it possible to hit a one-pixel highlight or the edge of a letter rather than the colour next to it.
Step 3 — Choose your sample size
One pixel gives the exact value under the crosshair. The 3 × 3 and 5 × 5 options average that many pixels instead, which is what you want on a photograph or a JPEG, where compression noise makes any single pixel unrepresentative.
Step 4 — Click to keep it
Hovering previews a colour; clicking or tapping keeps it. Kept colours collect in Your picks, and once you have picked one the arrow keys nudge the sample point a pixel at a time — the only reliable way to land on an exact pixel of a large image.
Step 5 — Take the codes you need
Every picked colour is shown as HEX, RGB, HSL, HSV and CMYK, with the nearest named CSS colour and its WCAG contrast against black and white text. Copy any single value, or take the whole set with Copy all, Copy as CSS or Download JSON.
Step 6 — Use the palette it found
Colours in this image is filled in automatically: the eight most common colours across the whole picture, each with the share of pixels it covers. Click any of them — or any harmony swatch — to make it the picked colour.
About the image colour picker
This tool reads the exact colour of any pixel in an image and gives you its code in five formats, alongside the palette of the image as a whole, the nearest named colour, contrast figures for text, and matching colours built from the one you picked. It is free, needs no account, and the image never leaves your computer.
It is the digital equivalent of an eyedropper, but with the parts a designer actually needs around it: a magnifier for aiming, an averaging mode for noisy photographs, and exports that drop straight into a stylesheet.
Who this is for
- Designers matching a brand colour out of a logo nobody kept the source file for.
- Front-end developers lifting values from a mockup into CSS.
- Marketers building a palette from a product photograph.
- Anyone rebuilding a style guide from screenshots of the old site.
Why the pixel you click is the pixel you get
This is worth understanding, because it is where most free colour pickers quietly fail. A large image has to be scaled down to fit on screen, and scaling blends neighbouring pixels together. If a tool reads the colour from the scaled copy, the value it hands you is a blend that may not exist anywhere in your original file — on a sharp edge, a logo outline or a thin line of text, it can be badly wrong.
Here the image is kept at its own resolution for sampling, up to 2,000 pixels on the long edge, and only the display is scaled. Click the red pixel and you get that red. If a file is larger than that ceiling, the picker tells you the resolution it is sampling at, so you always know what you are reading.
One pixel or an average?
Photographs and JPEGs are noisy. Two neighbouring pixels in what looks like a flat wall can differ by several values in each channel, because JPEG compression works on 8 × 8 blocks and throws away exactly the kind of detail that keeps them identical. Sample a single pixel there and you get a colour that is technically present and practically unrepresentative.
That is what the 3 × 3 and 5 × 5 options are for: they average that square of pixels and give you the colour a person would say they were looking at. Use one pixel for flat graphics, logos and screenshots, where every pixel is exact and averaging would only smear an edge.
The five colour formats
- HEX —
#3A7BD5, the six-digit form used everywhere in CSS and design software. - RGB — the red, green and blue channels from 0 to 255, which is what you want when you need the raw numbers.
- HSL — hue, saturation and lightness. The most intuitive form for editing: raise the lightness for a tint, drop the saturation to mute it.
- HSV — hue, saturation and value, the model behind the colour pickers in Photoshop, Figma and GIMP.
- CMYK — the four ink percentages for print. Treat it as a starting point rather than a specification: real print colour depends on the paper, the press and the ICC profile, and no browser-side conversion can know those.
The nearest named CSS colour is shown too. It is a description, not a substitute — “closest CSS colour: dodgerblue” is a useful way to talk about #0EA5E9, but the two are not the same colour.
Contrast, before you use it for text
Every picked colour is scored against black and white text using the WCAG 2.1 contrast formula, with the ratio and a plain verdict. The thresholds are 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA. This catches the mistake that costs the most to undo: choosing a brand colour, building the site on it, and discovering afterwards that white text on it is unreadable for a good proportion of your visitors.
If you need to test two specific colours against each other rather than against black and white, the dedicated Contrast Checker does that, and Colour Blindness Check shows how a palette reads to someone with a colour vision deficiency.
Harmonies, tints and shades
From any picked colour the tool builds its complementary colour (opposite on the colour wheel), its analogous neighbours 30 degrees either side, its triadic partners at 120 degrees, and a strip of tints and shades made by moving the lightness up and down. These are the standard starting points for a palette rather than rules — click any swatch to make it the picked colour and read its codes.
The palette it finds by itself
As soon as an image loads, the tool sorts every pixel into colour bands and counts them — then merges the bands that are too close together to tell apart. That second step is the one that matters: without it, a picture with a large blue area returns eight barely different blues and hides every other colour in it. Merging first means the eight swatches are eight visibly different colours, and the percentage next to each is the share of the whole picture that colour and its shades cover together.
On a photograph that gives you the palette the image actually reads as; on a screenshot of a website it tends to recover the brand colours exactly. If an image genuinely only contains a handful of tones, the tool loosens its idea of “too close” until it can still show you eight, so a near-monochrome photo returns a spread of its own shades rather than three swatches. Fully transparent pixels are ignored, so a logo on a transparent background does not come back as mostly “nothing”.
A note about dark mode
If you are viewing this site in dark mode, the whole page is passed through a colour filter. The picker corrects for it, so white, black and greys look right, but strongly saturated colours still appear duller on screen than they are — the filter cannot reproduce them. The values are read from the image data itself and are always exact, whichever mode you are in. Switch to light mode if you want the swatches to look exactly right as well.
Where this fits with the other tools
Once you have a colour, Colour Code Converter and HEX to RGB Converter handle any format you still need, and CSS Gradient Generator turns two of your picks into a gradient. Contrast Checker and Colour Blindness Check cover accessibility. For the image itself, Image Compressor, Image Resizer and Image to Base64 are next door.
Frequently asked questions
How do I get the colour code from an image?
Drop the image in, move over it until the magnifier shows the pixel you want, and click. HEX, RGB, HSL, HSV and CMYK appear immediately, each with its own copy button.
Is my image uploaded anywhere?
No. It is read by JavaScript inside this page and drawn to a canvas in your browser. Nothing is sent to a server, nothing is stored, and closing the tab discards it — which also means confidential mockups and unreleased artwork are safe to use here.
Is the colour accurate if my image is huge?
Yes. Sampling happens on the image at its own resolution — up to 2,000 pixels on the long edge — while only the on-screen display is scaled to fit. Many pickers read the scaled copy instead, which returns a blend of neighbouring pixels rather than the pixel you clicked.
Why does the same flat area give slightly different colours?
Because it is not flat. JPEG compression works in blocks and leaves neighbouring pixels a few values apart even where the original was uniform, and photographs carry sensor noise on top of that. Switch the sample size to 3 × 3 or 5 × 5 and the tool averages that square instead, which is the colour you actually mean.
Can I use this on a phone?
Yes. Tap to pick and drag your finger to move the sample point; the magnifier follows so your finger is not covering the spot you are aiming at.
How do I hit an exact pixel?
Pick roughly, then use the arrow keys — each press moves the sample point one pixel of the original image, with the magnifier showing where you are. That is more precise than any mouse on a scaled-down photo.
What is the nearest CSS colour name for?
Naming, not matching. It tells you the closest of the 141 distinct named CSS colours — the spec lists 148, but seven of those are only British spellings of colours already in the list — so you have a word for the colour you are looking at. Unless it says the colour is that name, the two differ — use the code.
How does it decide the image’s main colours?
Every pixel is sorted into a colour band and the bands are counted. Bands that are perceptually too close to each other are then merged, so the eight swatches you get are eight colours you could actually tell apart — a large blue area comes back as one blue carrying all its shades, not as eight blues that crowd out the rest of the picture. Each percentage is the share of the image that merged colour covers. Fully transparent pixels are skipped, and the same image always produces the same palette.
Can I export the colours I picked?
Three ways. Copy all puts the HEX values on your clipboard one per line. Copy as CSS gives you a ready-made :root block of custom properties. Download JSON saves every colour with its HEX, RGB, HSL and nearest name, which suits a script or a handover.
Is the CMYK conversion print-accurate?
It is the standard arithmetic conversion, which is a reasonable starting point and no more. True print colour depends on the ink, the paper and the ICC profile of the press, none of which a browser can know. For anything that matters commercially, confirm with your printer.
Does it work on transparent PNGs?
Yes. You can pick any pixel, and transparent areas are excluded from the automatic palette so they do not dominate the result.
Is it free?
Completely — no account, no email, no watermark, no limit on how many images or colours you pick.