Picking a color anywhere on your screen
Press Pick from screen (or Alt + P). Your pointer turns into a magnifier that works across the whole display, not just this page: another browser tab, a design app, a video, your desktop wallpaper. Click to capture the pixel under the center of the magnifier, or press Esc to cancel.
The picked color appears with its HEX, RGB, HSL and OKLCH values and its nearest color name. Every pick is added to the history below, newest first, where each card has copy and remove buttons. History is kept in your browser, so it is still there next time.
Which browsers support it
The screen-wide picker relies on the EyeDropper API, a browser feature that lets a page ask you to pick one pixel from the screen. Only you can trigger it, with a click or key press, and the page learns nothing except the single color you chose.
| Browser | Screen eyedropper |
|---|---|
| Chrome, Edge, Opera, Brave (desktop) | Yes |
| Firefox | No |
| Safari (macOS and iOS) | No |
| Mobile browsers | No |
When the API is missing, the button is disabled and the page offers the screenshot method instead.
The screenshot fallback
Every system can take a screenshot, and a screenshot holds the exact pixels you saw:
- Capture the screen or a region: PrtSc or Win + Shift + S on Windows, ⌘ + Shift + 4 on a Mac (hold Ctrl as well to copy it instead of saving a file).
- Come back to this page and paste with Ctrl/⌘ + V, or choose the saved file.
- Move over the screenshot to preview colors, then click to save one. With the image focused, the arrow keys move one pixel at a time (add Shift for ten) and Enter saves.
The screenshot is read by your browser only. It is never uploaded.
Why the picked value can differ from the design file
Usually the HEX you pick matches the source exactly, but a few things can change pixels on the way to the screen:
- Color management. On wide-gamut displays, browsers and apps convert colors for the screen. The EyeDropper returns an sRGB value, which can differ slightly from the value stored in a design file that uses a different color profile.
- Scaling. Text and thin lines are anti-aliased, so their edge pixels blend into the background. Pick from the middle of a solid area.
- Video and images. Compression shifts colors, and video players may apply their own adjustments.
- Night modes. Night Light, Night Shift and f.lux tint the whole screen. Screenshots are usually taken before that tint is applied, but what you see is not.
If a value looks wrong, pick from a larger flat area or compare with the source file's own picker.
Common uses
- Grab a brand color from a live website or PDF without opening developer tools.
- Match a UI color from a screenshot a colleague sent you.
- Check whether two elements that look the same really share one HEX value.
- Collect colors from a film still or game for a palette.
Related tools
Once you have a color, the contrast checker tells you whether text on it is readable, and the color converter shows it in every format. To pick from a photo with a zoom loupe, use the color picker from image. To fine-tune a picked color by hand, open the hex color picker.
FAQ
Is it safe to let a website pick colors from my screen?
Yes. The browser shows the magnifier itself, the page cannot see your screen, and it receives only the one pixel you click. Pressing Esc gives it nothing at all.
Why is the button grey in Firefox or Safari?
Those browsers have not shipped the EyeDropper API. Use the screenshot method on the same page; it gives the same exact pixel values.
Can I pick a color from a phone screen?
Mobile browsers do not support the screen eyedropper. Take a screenshot on the phone and open it with the screenshot method, or use the color picker from image.