Skip to content
ToolBoxGeniehome

Image Color Picker

Image Tools · Added

Drop in a photograph, a screenshot or a logo and click anywhere to read that pixel's exact colour in five notations at once. Underneath, the dominant colours are pulled out as a palette you can copy straight into a stylesheet. The file is decoded in your browser and never leaves your device.

Or drop a file onto this box.

JPG, PNG, WebP, GIF, BMP or AVIF, up to 20 MB. It is decoded in this tab and never uploaded.

How to use the image color picker

  1. 1Choose an image, or drop one onto the box. JPG, PNG, WebP, GIF, BMP and AVIF are all accepted.
  2. 2Click any point in the preview to read that pixel. The colour appears as HEX, RGB, HSL, HSV and CMYK, with the nearest CSS named colour underneath.
  3. 3Copy whichever notation you need — each has its own copy button — or click a swatch in the recently picked strip to go back to an earlier one.
  4. 4Adjust the palette size, and switch on skipping black and white when a plain background would otherwise take every slot.
  5. 5Copy the whole palette as a block of CSS custom properties.

Examples

Matching a brand colour from a logo

Input
A PNG of a logo, clicked on the solid area of the mark
Result
#0B5FFF, with rgb(11, 95, 255) and hsl(217, 100%, 52%) alongside

Click the flat centre of a shape rather than an edge, where anti-aliasing has blended two colours.

Building a palette from a photograph

Input
A landscape photo, palette size 6
Result
Six swatches with the share of the image each accounts for

A photo with a large sky reports a lot of blue — the shares describe the image, not its subject.

A product shot on white

Input
The same photo with black and white skipped
Result
The backdrop drops out and the product's own colours fill the palette

Reading a screenshot

Input
A screenshot of an interface
Result
The exact hex of a button, without opening a design tool

About the image color picker

Picking a pixel, and picking the right one

A colour picker reads one pixel, which sounds trivial until you notice how few pixels are actually the colour you think they are. Anti-aliasing blends every curved or diagonal edge with its background, JPEG compression shifts colours in blocks around detail, and any image that has been resized has had its pixels averaged at least once.

The practical consequence is to aim for flat areas. The centre of a solid shape gives the true colour; the edge of the same shape gives a blend of it and whatever it sits on. If a logo has been supplied as a JPEG, expect the flat areas to vary by a few values across their width — pick a few points and take the one that repeats.

Why a palette needs quantisation

A photograph of a red apple contains almost no repeated colours: every pixel of the apple is a slightly different red. Counting exact colour values returns thousands of near-identical entries and tells you nothing, which is why extracting a palette has to start by deciding how different two colours must be before they count as different at all.

Bucketing pixels into coarse groups does that job, and reporting each group's average rather than its nominal centre keeps the answer honest — a bucket centre is a colour that may occur nowhere in the image. Merging groups that end up close together handles the other failure, where a gradient spreads across neighbouring buckets and fills the palette with six shades of the same sky.

What the percentages do and do not tell you

Each swatch's share is the proportion of sampled pixels that landed in it, so it measures area rather than importance. A product photographed on a large white backdrop will report white as dominant, correctly and unhelpfully — which is what the option to skip black and white is for.

Read the shares as a description of the image, not as design guidance. The colour that should lead a palette is often a small, saturated accent occupying two per cent of the frame, and no frequency count will ever surface it above the background it sits on.

Frequently asked questions

Is my image uploaded anywhere?
No. The file is decoded by your browser and drawn to a canvas in the page, and the pixels are read from that canvas. Nothing is sent to a server, which is why the tool keeps working with your network disconnected — and why a screenshot containing something confidential is safe to use here.
Why is the colour I picked slightly different from the original?
Large images are scaled down to fit the preview, and scaling blends neighbouring pixels. On a flat area of colour that makes no difference; on a fine detail or a one-pixel line it can shift the reading. Two things help: click the middle of a solid region rather than near an edge, where anti-aliasing has already blended the colours, and crop tightly before uploading if you need a specific tiny detail.
How are the dominant colours chosen?
Every sampled pixel is sorted into one of 4,096 coarse colour buckets, the buckets are ranked by how many pixels landed in each, and each swatch is reported as the average of its bucket rather than the bucket's corner — so the colour shown is one that genuinely occurs. Buckets whose averages are close enough to read as the same colour are then merged, which stops a single gradient from filling the palette with six versions of itself.
Why is the average colour different from the first swatch?
They answer different questions. The first swatch is the colour that occupies the most of the image; the average is every pixel added together and divided. On a colourful photograph the average is frequently a muddy brown that appears nowhere in the picture, which is a good illustration of why averaging is the wrong way to find a dominant colour.
Can I use this on a whole web page rather than a file?
Not directly — the tool works on an image file, so take a screenshot first and drop that in. Browsers do provide a native eyedropper that samples anything on screen, available from the colour input in the developer tools, and that is the better instrument when the thing you want to sample is not an image at all.
Which colour format should I use?
Hex for CSS and design tools, because it is what everything accepts. RGB when you need the channel values as numbers, HSL when you want to adjust lightness or saturation while keeping the hue, and CMYK only as a rough indication for print — a true print conversion depends on the paper, the press and an ICC profile, none of which a browser knows about.

Related tools