Skip to content

Guide · 4 min read

How to find a colour from a screenshot

Screenshots are the most accurate source of colour you can get, if you take them properly. How to capture, what breaks the accuracy, and when to use dev tools instead.

When you cannot download an image but you can see it, a screenshot is the answer. It is also the most accurate source of colour available to you — more accurate than a photograph, and often more accurate than the original file after it has been through a compressor.

Taking it

  • macOS: Shift-Command-4 for a region, or add Control to copy it straight to the clipboard.
  • Windows: Shift-Windows-S opens the snipping tool, and it copies automatically.
  • Linux: depends on your desktop, but Print Screen almost always does something useful.
  • iOS and Android: the usual button combination, then share it to a browser tab.

Then paste directly onto this page. There is no need to save the file first — Palettae reads images off the clipboard.

What breaks the accuracy

  1. Screen colour profiles. A wide-gamut display can capture values shifted from what the page specified. It is usually a point or two per channel; occasionally it matters.
  2. Night shift, blue light filters and auto-brightness. Turn them off before capturing anything you intend to match.
  3. Any screenshot tool that saves as JPG. Use PNG.
  4. Zooming before capturing, which introduces interpolated pixels along every edge.
  5. Video. Playback applies its own colour handling on top of compression — treat anything from a video as approximate.

If you need the value a page specified, read the CSS. If you need the value a person saw, read the screenshot. They are different questions.

When to use dev tools instead

For a live web page, your browser's inspector gives you the exact declared value, which beats any amount of sampling. Use a screenshot when the inspector cannot help: an app, a PDF, a video still, a design someone sent you as an image, or when you want a whole palette and its proportions rather than one declared value.

Semi-transparent things

A screenshot flattens everything. If a colour you sample is a translucent overlay, what you get is the blend of the overlay and whatever was underneath it — which is the colour a person actually saw, and not the colour anyone declared. That is usually what you want. When it is not, the inspector is the tool.

Drop an image in. Get the palette.

Pull the colors out

Keep reading