Colour Picker

2. How to Pick a Colour From an Image (Step-by-Step)

No account, no email, no install. To get a hex code from an image with the tool at the top of this page:

One detail that matters more than it sounds: the value is read from your image at its full original resolution, not from the shrunk-down preview you are looking at. A 4000-pixel-wide photo displayed at 700 pixels still gives you the true colour of the precise point you clicked. If you want to work on a tighter area first, the image cropper will trim the photo down before you sample it.

Every colour you pick is also dropped into a Recent Colours strip that holds your last ten distinct shades. Click any swatch to bring it back as the active colour — handy when you are comparing two greys and need to flip between them.

3. HEX, RGB or HSL: Which Code Do You Actually Need?

People search rgb to hex and hex to rgb constantly, usually because a tool gave them one format and their software wanted another. Picking a colour here sidesteps that entirely — you get the conversion for free, because all three are produced together. Still, it helps to know which one to grab.

HSL is the underrated one. Because the hue stays put while you move lightness, a single picked colour gives you an entire ramp: take hsl(25, 95%, 53%), drop the last value to 30% and you have a hover state that is unmistakably the same colour. That is far more reliable than eyeballing a darker orange and hoping.

What this image colour picker does not output

Worth stating plainly so you do not go hunting: there is no CMYK conversion and no Pantone matching here. Those are print colour systems, they depend on ink, paper and a colour profile, and any web tool that claims to hand you a trustworthy CMYK value from a screenshot is guessing. The picker also reads the red, green and blue channels only — it does not report an alpha or transparency value.

4. Picking a Colour From Anywhere on Screen

Sometimes the colour you want is not in a file at all. It is in a window sitting next to you: a live website, a video frame, a PDF, an app’s toolbar. Screenshotting it and loading the screenshot works fine, but there is a shortcut.

The Pick Any Screen Colour button opens a full-screen eyedropper tool. Your cursor becomes a magnifier, you click any pixel anywhere on your display, and the value lands in the panel with its HEX, RGB and HSL codes exactly as if you had picked it from an image. It is the fastest answer to “what colour is that on my screen”.

The honest caveat: this screen-wide eyedropper is available in Chrome and Edge. In Safari and Firefox the button will tell you so rather than failing silently, and the fix is a five-second one — take a screenshot, drop it in, and click the pixel. You end up in the same place. If your source is a document rather than a screen, our PDF to JPG converter turns pages into images you can sample, and the extract images from PDF tool pulls out the original embedded artwork at its native quality, which is always the better thing to sample from.

5. Why the Colour Looks Right but Reads Wrong

This is the section people arrive at after picking a brand colour twice and getting two different codes. The picker is reporting the pixel faithfully every time. The pixel itself is the problem, and there are three usual culprits.

JPEG compression smears colours together

JPEG throws away detail to save space, and it does it by blending neighbouring pixels. On a flat block of brand orange you will barely notice, but within a few pixels of an edge — text, a logo outline, a border — the values shift noticeably. Always sample from the middle of a large flat area, never next to an edge. If you have a PNG of the same asset, use that; a compressed PNG keeps its exact colour values in a way a JPEG never does.

Resized and enlarged images invent pixels

Any image that has been scaled has had pixels interpolated — averaged from their neighbours. On gradients and thin details that average is not a colour that ever existed in the original. When you need a true brand colour from a logo, go and find the largest version of that file you can, rather than sampling a thumbnail. The image resizer and image enlarger are for changing dimensions after you have your colour, not before.

Transparent areas read as black

Click the see-through region of a transparent PNG and you will very often get #000000. Nothing has gone wrong — there is simply no colour stored at that point, so the underlying values are zero. If you get an unexpected pure black, you almost certainly clicked empty space rather than artwork. Move your click onto the visible part of the graphic.

Two more things worth knowing. Photographs of physical objects — a wall, a fabric swatch, a product — carry the colour of whatever light was falling on them, so the code you pick describes that photo, not the object. And a display that is not colour-calibrated will show you something slightly different from what the numbers say; the numbers are still correct.

6. Building a Colour Palette From a Photo, by Hand

A lot of people searching for a colour palette generator from image want a machine to look at a photograph and announce its five defining colours. It is worth being straight about what this tool is: a precision instrument, not an automatic extractor. It reads the single pixel you point at and reports it exactly. It does not rank colours, cluster them or decide which ones matter.

That turns out to be a feature rather than a shortcoming, because automatic extraction is famously bad at the thing you actually want. It returns the most common colours, which on a product photo is usually the background and three shades of shadow. The colours you cared about — the accent on the packaging, the exact blue of the sky at the horizon — are outnumbered and get dropped.

Picking by hand takes about ninety seconds and gives you a better result:

1. Click your dominant colour — the largest flat area, usually a background or a main surface.
2. Click two or three supporting tones from different regions, sampling the middle of each area rather than its edge.
3. Click one accent: the brightest, most saturated thing in the frame, however small it is.
4. Your five choices are now sitting in the Recent Colours strip. Copy each HEX code out in turn — and copy the HSL of your main colour too, because that is what lets you generate matching lighter and darker variants later.

One practical note: the recent-colours strip is a working scratchpad for the session, not a saved library. Paste the codes somewhere durable before you close the tab. If colour theory is the part you want to get better at rather than the tooling, our free graphic design course covers palette construction properly.

7. Why Cortexis Is the Best Free Image Colour Picker

Plenty of sites will give you a hex colour picker. Most of them wrap it in three ad units and a newsletter popup. Here is what is different, stated plainly enough that you can check every line yourself.

It sits inside a wider set of free online tools built on the same terms, so once you have your colour you can carry on without paying for any of it — convert an image format with the PNG, WebP and TIFF converter, or wrap a brand colour around a custom QR code.

8. Frequently Asked Questions (FAQ)