Guide · 4 min read
How to find a colour from a screenshot
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
- 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.
- Night shift, blue light filters and auto-brightness. Turn them off before capturing anything you intend to match.
- Any screenshot tool that saves as JPG. Use PNG.
- Zooming before capturing, which introduces interpolated pixels along every edge.
- 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 outKeep reading
How to pull a colour palette from an image
The whole process, start to finish: choosing the image, picking a palette size, fixing a result that came back muddy, and getting the colours into your design file.
How designers choose colours from photography
Why photographs make good palettes and bad ones, what to do about light and white balance, and how to turn an image's colours into a working hierarchy.
HEX vs RGB vs HSL
Three ways of writing the same colour, what each is good for, and why HSL is the one to reach for when you are adjusting a colour rather than recording it.