↑ ↓ to moveEnter to openEsc to close

Screen color picker (eyedropper)

Press the eyedropper button, move over anything on your display and click to capture its exact HEX value. Browsers without the EyeDropper API get a screenshot-paste fallback.

Pick any color on your screen

Press the button, then click anywhere: another tab, an app, your desktop. Press Esc to cancel.

Shortcut: Alt + P

Or pick from a screenshot

Take a screenshot (PrtSc, ⌘+Shift+4 on a Mac, or Win+Shift+S), then paste it here with Ctrl/⌘+V, or .

History

    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.

    BrowserScreen eyedropper
    Chrome, Edge, Opera, Brave (desktop)Yes
    FirefoxNo
    Safari (macOS and iOS)No
    Mobile browsersNo

    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:

    1. 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).
    2. Come back to this page and paste with Ctrl/⌘ + V, or choose the saved file.
    3. 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.

    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.