Short answer: open the image in a
color picker, click the
color, and copy the hex code. To pick from anything on screen, use
PowerToys Color Picker on Windows
(Win + Shift + C), Digital Color Meter on a
Mac, or the eyedropper built into Chrome and Edge. Then the harder part:
the hex you get is often not quite the color you meant, for
reasons that have nothing to do with the tool. Here is why, and how to
get the right one.
Three ways to pick a color from an image
1. Load the image into a color picker
Best for photos, screenshots, and logos saved as files. Drop the image into the color picker from image, move over it to see a magnified loupe, and click to get HEX, RGB, and HSL. The image is read in your browser, so client mockups or unreleased designs are never uploaded.
2. Pick from anywhere on screen
- Windows: install Microsoft PowerToys, enable Color Picker, and press
Win + Shift + C. Click any pixel and the code is copied. - Mac: open Digital Color Meter (Applications → Utilities). Set the dropdown to Display in sRGB, not the native display values (more on why below), and use Color → Copy Color as Text.
- Chrome and Edge: the color picker above has a "Pick from screen" button that uses the browser's eyedropper, and any color swatch in DevTools opens the same eyedropper.
3. Get the whole palette instead
If you want "the colors of this photo" rather than one exact pixel, a single click is the wrong tool. A palette extractor groups similar pixels and averages each group, which describes an image far better than whichever pixel your cursor happens to land on.
Why the color you picked looks wrong
You click a logo you know is #1E90FF and get
#2A8CF4. Click two pixels away and you get
#1F91FD. Nothing is broken. The image really does contain
those colors, for four reasons.
JPEG noise and chroma subsampling
JPEG compression works on 8 × 8 pixel blocks and, in most files, stores color at half the resolution of brightness, a trick called chroma subsampling (usually 4:2:0). Color bleeds a pixel or two across edges, and flat areas pick up faint blotches. A pixel in a "flat" blue area of a JPEG logo can be several values off the true color, and its neighbour off in a different direction.
Fix: sample an average rather than a single pixel. The color picker defaults to a 3 × 3 average for this reason, and 5 × 5 smooths out grainier photos. Pick from the middle of a large flat area, never near an edge. Better still, find a PNG or SVG of the logo, where no compression has touched the colors.
Anti-aliased edges
The pixels along the edge of text or a shape are deliberately blended with the background so curves look smooth. A pixel on the edge of a blue letter on white is partly blue and partly white, so it reads as a lighter blue. Click on thin text and you are almost certainly picking a blend. The picker's loupe outlines exactly which pixels you are sampling, which makes this easy to see.
Wide-gamut photos (Display P3)
Recent iPhones, many Android phones, and modern Macs capture and display color in Display P3, a wider gamut than the sRGB that hex codes on the web assume. A vivid red in a P3 photo may have no exact sRGB equivalent, so it has to be converted to the nearest sRGB color. That is why the Digital Color Meter setting matters: its native values are in your monitor's color space, not the sRGB your CSS uses. Browsers convert images to sRGB when a page reads their pixels, so a browser-based picker gives you web-ready values.
Screenshots of screens
A screenshot of a website captures what your display rendered after scaling, any Night Shift or True Tone tint, and the screenshot app's own compression. If you have access to the source, such as the CSS, the design file, or the brand guidelines, take the hex from there. Picking is for when you don't.
Hex vs RGB: the same color, written two ways
A hex code is just RGB written in base 16. #1E90FF is three pairs:
| Pair | Working | Decimal | Channel |
|---|---|---|---|
| 1E | 1 × 16 + 14 | 30 | Red |
| 90 | 9 × 16 + 0 | 144 | Green |
| FF | 15 × 16 + 15 | 255 | Blue |
So #1E90FF is rgb(30, 144, 255). Each channel
runs from 0 (00) to 255 (FF). A few more facts
that trip people up:
- Three-digit hex doubles each digit:
#F80is#FF8800. - Eight-digit hex adds alpha (transparency):
#1E90FF80is about 50% opaque, the same asrgb(30 144 255 / 50%). - Case doesn't matter:
#1e90ffand#1E90FFare identical.
To convert in either direction without the arithmetic, use the HEX to RGB converter, which also shows this working for any color you enter.
Getting a color you can actually use
- Use the cleanest source you can find: SVG, then PNG, then a large JPEG, and a screenshot only as a last resort.
- Pick from the middle of a large flat area, with a sample size of 3 × 3 or more.
- Make sure the tool reports sRGB values.
- Put the result next to the original. If it is visibly off, re-sample, or accept that the image never contained the exact brand color.
Once you have your colors, put them to work: try them in a CSS gradient, or pull a full scheme from the same image with the palette extractor.