Colour picker from an image

Point at any part of the picture for its hex, RGB and HSL, and see the handful of colours the image is mostly made of. Each one says whether text will actually read on it. Nothing is uploaded.

How it works

Getting a colour out of a picture is the sort of thing an operating system should do and mostly does not. The colour you want is in a photo of a wall, a screenshot of a chart, a logo somebody sent as a JPEG, and what you need is six hex digits you can paste into a stylesheet.

Pointing at a pixel is the easy half. The image is drawn one-to-one with smoothing turned off before the pixel is read, which sounds pedantic and is not: with smoothing on, a browser hands back a blend of the pixel and its neighbours, so the colour you get is one that was never in the picture and does not match when you paste it.

The palette is the harder half, and the standard approach has a well-known failure. Median cut sorts the colours into boxes and the textbook then averages each box, which is how palette tools produce muddy browns that appear nowhere in the original: the average of a red flower and a green leaf is mud. Here each swatch is the real pixel nearest to its box, so every colour offered is one you could have pointed at yourself. The shares are worked out separately, by asking which swatch each pixel is closest to, because median cut deliberately gives its boxes equal populations and reading those as shares would claim every colour covers the same amount of a picture that is obviously mostly sky.

Then there is the number that decides whether any of this is usable. A colour lifted from a photograph usually ends up behind text, and whether that works is measurable: the WCAG contrast ratio against white and against black, with the threshold marked. A brand colour that reads beautifully in a logo is often 2.8:1 against white, which is a decision you want to make on purpose rather than discover later.

How to use it

1 Choose an image, or paste one straight from your clipboard.
2 Tap anywhere on the picture to pick the colour at that point.
3 Copy the hex, RGB or HSL with one tap.
4 Or take one of the palette swatches below, which are the colours the image is mostly made of.

Good to know

Every swatch is a colour that genuinely appears in the image, never an average of two that do.
The palette is ordered by how much of the image each colour accounts for, not by hue.
Contrast is the WCAG ratio: 4.5:1 is the threshold for body text and 3:1 for large text.
The colour is read with smoothing off, so it is the exact pixel and not a blend with its neighbours.
Screenshots work as well as photographs, which is the quick way to lift a colour out of a chart.

Browser support

Chrome 94 and later
Firefox 93 and later
Safari 16.4 and later
Edge 94 and later

These are the oldest versions with everything the tool uses. They are worked out from the tool itself, so they change when it does.

Version numbers checked on 2026-09-04.

Why palette extractors return colours that are not in the picture

Feed a photograph of a red flower on green leaves into most palette tools and somewhere in the results will be a brown that appears nowhere in the image. It is not a bug in the sense of a mistake in the code. It is the textbook algorithm doing exactly what it says, and the fault is in a single step that looks harmless.

The algorithm is median cut. Put every pixel in one box in colour space, find the axis the box is most spread along, split it at the median, and repeat on whichever box is now the most spread out until there are as many boxes as you want colours. It is fast, it needs no tuning, and it divides an image sensibly. Then comes the step that ruins it: take the average of each box and call that the swatch. The average of a red pixel and a green pixel is brown, and if a box straddles the flower and the leaf, brown is what you get. The palette is arithmetically correct and visually a lie.

The fix costs one pass. Instead of the average, take the real pixel nearest to it. The box still says which region of colour space matters; the pixel makes sure the answer is a colour someone could have pointed at. Everything offered is then defensible, because it is in the picture.

A second, quieter error hides in what these tools report as a percentage. Median cut splits at the median, which means every box holds roughly the same number of pixels by construction. Reporting box population as a share therefore says all six colours cover about a sixth of the image each, no matter what the image looks like, and a photograph that is three-quarters sky will be described as evenly balanced. The shares have to be measured after the fact, by asking of every pixel which swatch it is nearest to. Only then does the sky come back as three-quarters.

The last thing worth mentioning is the one-pixel read. Draw an image into a canvas and read a pixel back with smoothing left on, which is the default, and the browser hands you a blend of that pixel and its neighbours. The colour is plausible, close to right, and does not match the source when you paste it into a stylesheet and compare. Turning smoothing off for that read is a single line, and it is the difference between an eyedropper and something that approximately agrees with one.

Frequently asked questions

How do I get the hex code of a colour in an image?

Choose the image and tap the part you want. The hex, RGB and HSL appear underneath, and one tap copies any of them. The pixel is read exactly, with no smoothing, so what you paste matches what you pointed at.

How do I find the dominant colours of an image?

They are worked out as soon as the image loads and shown as swatches, each labelled with how much of the image it accounts for. Tap a swatch to make it the current colour and see its contrast figures.

Why do other palette tools give me muddy colours?

Because they average each group of colours they find, and the average of two very different colours is a colour that is in neither of them. This one picks the real pixel nearest that average instead, so a red flower and a green leaf give red and green rather than brown.

What do the contrast numbers mean?

They are WCAG contrast ratios against white and black, from 1:1 to 21:1. 4.5:1 or better passes AA for body text, 7:1 passes AAA, and 3:1 is enough for large text only. Below 3:1 the colour is not usable behind text at all.

Can I pick a colour from a screenshot?

Yes, and it is one of the most useful things here. Paste a screenshot with Ctrl+V and tap the bar of a chart or the background of an app to get its exact hex.

Is my image uploaded?

No. It is decoded and read inside this browser tab by your own device, and no copy of it is sent anywhere. You can watch your browser’s Network tab while you work.

Your files are processed on your device and are not uploaded. You can verify this in your browser’s developer tools under the Network tab.