Picking a colour from a photo or logo
The tool reads the single pixel you click, so where you click matters. Pick from a flat, evenly coloured patch rather than a gradient, a shadow or the soft edge of a shape, where colours blend into their surroundings.
Why the colour you sampled looks slightly off
- JPEG compression adds tiny variations, so neighbouring pixels in a “flat” area can differ by a few values. Click two or three spots and use the one that looks most typical.
- Photos of real objects include lighting. A red car in sunshine is many reds. There is no single “true” value; pick the one that reads best at the size you will use it.
- Brand colours often have an official value in a style guide. If the client has one, prefer it over anything sampled from a screenshot.
Picking a colour from your screen
Browsers don’t let web pages read the rest of your screen. To grab a colour from another app or website, take a screenshot first (Win + Shift + S on Windows, Cmd + Shift + 4 on a Mac), save it, and upload it in Image mode. On a Mac, the built-in Digital Color Meter app can also show values under the pointer.
Which value to copy
| Format | Looks like | Use it in |
|---|---|---|
| HEX | #1D4ED8 | Canva, Figma, PowerPoint, Google Slides, most CSS |
| RGB | rgb(29, 78, 216) | Office colour dialogs, Photoshop, CSS with transparency |
| HSL | hsl(224, 76%, 48%) | CSS when you want lighter or darker shades of the same hue |
The Copy values panel also has a ready-made CSS line, background: #1D4ED8;, for pasting straight into a stylesheet. Print values such as CMYK or Pantone depend on the printer and paper, so ask your print shop to match the HEX rather than relying on an on-screen conversion. To translate between HEX, RGB and HSL by hand, use the colour converter.
Questions
Is my image uploaded anywhere?
No. It is drawn onto a canvas in your browser and sampled there. Close the tab and it’s gone.
Will text in this colour be readable?
Check it with the contrast checker against the background you plan to use. Mid-tone colours often need dark text rather than white.