Screen Color Picker
Press Pick color from screen and click any pixel on your monitor, in this tab, another window or another app. You get the color as HEX, RGB, HSL, HSV and CMYK, its nearest CSS name and contrast, and every pick is kept in a history you can copy or export.
Last updated:
Click the button, then click any pixel on your screen: other tabs, windows, apps or this page. Press Esc to cancel. Shortcut: P.
Picked colors (0)
No colors picked yet. Every color you pick is kept here (saved in this browser only) so you can compare and copy them later.
Pick from a screenshot or image instead
Works in every browser. Take a screenshot (PrtScn, Win+Shift+S or Cmd+Shift+4), then paste it here with Ctrl/Cmd+V, drop it, or open the file. Click any pixel to pick it.
How to use the Screen Color Picker
- Press Pick color from screen (or the P key). Your cursor turns into a magnifying eyedropper.
- Click any pixel anywhere on your screen: a website, a photo, another app. Press Esc to cancel.
- Copy the code you need: HEX, RGB, HSL, HSV or CMYK each have a Copy button. Check the contrast boxes to see if the color works for text.
- Keep picking. Each color is added to Picked colors, where you can reselect, copy or remove it.
- Export your palette as a HEX list, CSS variables, SCSS, JSON or a PNG swatch image.
- Using Firefox or Safari? Take a screenshot, paste it into the image area and click the pixel you want.
How the screen eyedropper works
Modern Chromium browsers include the EyeDropper API. When you press the button, the browser itself shows a magnifying loupe over your whole screen. When you click, it returns only the color of that one pixel as an sRGB value, for example #2F6B4F. The web page cannot move the loupe, start it without your click, or read anything else from your screen. That is why the picker can sample other apps safely and why it needs a button press every time.
If your browser has no eyedropper, use the screenshot fallback: the screenshot is drawn on a canvas inside the page and the tool reads the pixel you click with the Canvas API, entirely on your device.
Color code formats at a glance
| Format | Example | Where it is used |
|---|---|---|
| HEX | #1E90FF | CSS, HTML, design tools (Figma, Canva), most color fields |
| RGB | rgb(30, 144, 255) | CSS, image editors, programming; each channel 0 to 255 |
| HSL | hsl(210, 100%, 56%) | CSS; easy to make tints and shades by changing lightness |
| HSV / HSB | hsv(210, 88%, 100%) | Photoshop, GIMP and many color picker dialogs |
| CMYK | cmyk(88%, 44%, 0%, 0%) | Print; a simple conversion, not a calibrated print profile |
| Decimal | 2003199 | Some apps and APIs store a color as one integer (R×65536 + G×256 + B) |
Tips for picking the exact color
- Pick from flat areas. Edges of text and icons are anti-aliased, so their pixels mix the foreground with the background.
- Zoom to 100%. Browser zoom, display scaling and image resizing blend neighboring pixels. At 100% the pixel you see is the pixel in the file.
- Turn off night mode. Night light, True Tone or HDR filters can change what the eyedropper reads on some systems.
- Need the colors of a whole photo? Open it in the image fallback and pick several spots, then export the palette as CSS variables.
Frequently asked questions
How do I pick a color from my screen?
Click Pick color from screen, move the eyedropper over the pixel you want and click. The color code appears instantly. The picker can sample any visible pixel on your display, including other windows and apps, not just this web page.
Which browsers support the screen eyedropper?
Picking outside the page uses the EyeDropper API, which is available in desktop Chrome, Edge, Opera, Brave and other Chromium browsers (version 95 and later). Firefox and Safari do not support it yet, so in those browsers paste or drop a screenshot into the image area and click a pixel there.
Is it safe? Does the website see my screen?
The page never sees your screen. The browser only returns the single color you clicked, and only after you pressed the button yourself. No screenshot is taken or uploaded, and screenshots you paste for the fallback stay in your browser.
Why is the picked color slightly different from the original?
The eyedropper reads the pixel as it is displayed, after scaling, anti-aliasing, color profiles and night-light or HDR modes. Zoom in on the area and pick from the middle of a flat color region to get the exact value. JPEG compression in images can also shift colors by a few units.
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX (#1E90FF) writes the red, green and blue values from 0 to 255 in hexadecimal. RGB writes them as decimal numbers. HSL describes hue (0 to 360 degrees), saturation and lightness in percent, which is easier for making lighter or darker variants.
Is my color history saved?
Yes, up to 60 picked colors are stored in your browser's local storage on this device, so they are still there next time. Nothing is sent to a server. Use Clear to remove them, or Copy all and Download palette PNG to keep a copy.
What do the contrast numbers mean?
They are WCAG 2 contrast ratios between your color and white or black. A ratio of at least 4.5:1 passes level AA for normal text, 3:1 passes AA for large text (about 24 px, or 18.7 px bold), and 7:1 passes the stricter AAA level.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.