How to use a color picker from an image
Upload the image, zoom in with your eyes on the area you care about, and click. The tool reads that single pixel and shows its color as a hex code (like #1A7F8E) and as RGB (26, 127, 142). Click again anywhere to sample a new spot.
Photos are full of tiny variations: a 'blue' sky can span dozens of shades, and JPG compression adds speckles at edges. For a reliable brand color, click in the middle of a flat area rather than near an edge or a shadow. If you want a whole set of matching colors instead of one exact pixel, use the AI Color Palette tool, which picks 5–6 dominant colors for you.
HEX vs RGB: which color code do you need?
They describe the same color in two notations. Pick by where you're pasting it.
| Format | Looks like | Use it in |
|---|---|---|
| HEX | #1A7F8E | Figma, Canva, CSS, HTML, most design apps |
| RGB | rgb(26, 127, 142) | CSS, code, Photoshop, Excel or slide themes |
How to get a hex code from an image on Mac, Windows and phone
On a Mac, the built-in Digital Color Meter app shows the RGB value under the cursor anywhere on screen. On Windows, PowerToys has a Color Picker (Win+Shift+C) that copies a hex code. Phones don't have a built-in picker, which is where a browser tool helps: upload the photo and tap.
Screen pickers sample what your display shows, which can shift with color profiles and night mode. Sampling the image file itself, as this tool does, gives you the color stored in the file.
One more caveat: the same hex code can look different on screen and in print. Screens mix red, green and blue light; printers mix cyan, magenta, yellow and black ink, and some bright screen colors can't be printed at all. If a brand color is going on paper, ask your printer for a proof or a Pantone match rather than relying on the hex value alone.
For web use, the hex code is all you need: paste it into CSS as color: #1A7F8E, or into the color field of almost any design app.
