Pick a color from anything on your screen.
Your IDE. A YouTube video. Photoshop. Another monitor. A PDF. Anywhere a pixel exists, you can grab its color.
Yes — even outside the browser.
That's the magic of window.EyeDropper — most developers don't even know it exists.
Sample colors from
Pick a color — instant, picks from anywhere on screen (even outside the browser).
Screenshot — when you need to pick from another tab without losing focus.
#171717 rgb(23, 23, 23) hsl(0, 0%, 9%) oklch(22.04% 0.0000 0.0) Recent palette (0)
Click Choose what to capture below. Your browser will show its picker for screens, windows, or tabs.
How to use
Pick a color in 4 seconds.
Zero learning curve. The button does the work — here's exactly what happens.
- 01 P
Click 'Pick a color'
Tap the rainbow CTA at the top of the page, or press the keyboard shortcut P from anywhere.
- 02
Cursor becomes an eyedropper
Your browser hands control to the system. A magnified preview follows your cursor.
- 03
Click any pixel anywhere
Inside the browser. Outside the browser. Another monitor. Anywhere a pixel exists.
- 04
Copy in HEX / RGB / HSL / OKLCH
Color appears with one-click copy for every format. Auto-saved to your recent palette.
Need more detail or have a different browser? Read the full install guide →
Under the hood
What is window.EyeDropper?
The EyeDropper API is a small but powerful browser feature that turns your cursor into a precision color picker across your entire operating system, not just the browser tab. It first shipped in Chrome 95 (October 2021) and is part of the W3C WICG draft spec.
Until 2021, picking a color from outside the browser required installing a Chrome extension (with scary "read all websites" permissions), a paid desktop app, or a clunky upload-an-image workflow. The EyeDropper API made all of those obsolete in a few lines of JavaScript:
const dropper = new window.EyeDropper();
const { sRGBHex } = await dropper.open();
// → "#ff6347" — sampled from anywhere on your screenThat's it. No permissions prompt. No extension review. Just three lines and your browser becomes a Photoshop-grade color picker. ColorTrail adds the rest: HEX/RGB/HSL/OKLCH conversion, palette history, copy-to-clipboard, a Screenshot-mode fallback for Firefox/Safari, and a 10× magnifier loupe.
The browser sandbox handles security: the API only returns the single pixel's sRGB color — never the surrounding context, never a screenshot. It can't read your password manager, banking page, or private messages. That's the structural advantage over extensions like ColorZilla.
Why isn't it universal yet?
Mozilla (Firefox) publicly declined to implement, citing performance
concerns and the unusual "system-wide" surface. WebKit (Safari)
hasn't signaled support either. So until those land, ColorTrail's
Screenshot Picker — built on the older but universal
getDisplayMedia API — covers the gap.
Browser support
Works in every modern browser.
Chromium browsers get the instant magic. Firefox + Safari get the Screenshot Picker fallback. Nobody gets left out.
| Browser | Live picker | Screenshot picker | Notes |
|---|---|---|---|
| Chrome 95+ | ✓ | ✓ | Full system-wide picker, all features. |
| Edge 95+ | ✓ | ✓ | Same Chromium engine — full support. |
| Brave 1.32+ | ✓ | ✓ | Full support, EyeDropper enabled by default. |
| Opera 81+ | ✓ | ✓ | Full support. |
| Arc | ✓ | ✓ | Chromium-based, full support. |
| Vivaldi | ✓ | ✓ | Chromium-based, full support. |
| Firefox | ✗ | ✓ | Mozilla declined EyeDropper. Use Screenshot mode. |
| Safari | ✗ | ✓ | WebKit hasn't shipped it. Use Screenshot mode. |
| Mobile Chrome | ⚠️ | ✓ | Tab-only sampling. Use Screenshot mode for full reach. |
| Mobile Safari | ✗ | ⚠️ | Limited capture sources on iOS. Best on desktop. |
Real-time browser support data: caniuse.com/eyedropper-api · caniuse.com/getDisplayMedia
Two ways to pick
One product, every browser.
The live picker is instant magic. The screenshot picker is universal and lets you pick from any tab, window, or screen — without losing focus.
Mode 01
Pick a color (live)
One tap → cursor becomes an eyedropper across your entire screen. Sample from any visible app, monitor, or window without leaving this tab.
- ✓ Instant — no setup, no dialogs
- ✓ Picks from anywhere visible right now
- ✓ Zero permissions required
Mode 02
Pick from screenshot
Capture a frozen frame of any window, tab, or screen — then pick at your own pace with a 10× magnifier. The killer fix for picking from another tab or a Figma file in another window.
- ✓ Pick from any tab or window — no focus race
- ✓ Built-in magnifier for pixel-perfect sampling
- ✓ Works in every modern browser
Why ColorTrail
Stop installing extensions.
The empty intersection: free, cross-platform, zero-permission, screen-wide.
| ColorTrail | ColorZilla | Sip / ColorSnapper | Online pickers | |
|---|---|---|---|---|
| Cost | Free forever | Free + ads | $10–25 | Free + ads |
| Install required | None | Extension | App | None |
| Pick from outside browser | Yes | No | Yes | No |
| Cross-platform | Win / Mac / Linux | Browser-only | Mac-only | Yes |
| Permissions | None | All websites | Screen recording | None |
| OKLCH output | Yes | No | No | Rarely |
| Privacy | 100% local | Telemetry + ads | 100% local | Uploads file |
Coming from ColorZilla? See the full ColorZilla alternative comparison →
FAQ
Common questions.
What is the EyeDropper API?
The EyeDropper API (window.EyeDropper) is a browser-native feature shipped in Chrome 95 (Oct 2021), Edge 95+, Brave, and Opera. It turns your cursor into a system-wide color picker that can sample any pixel visible on your screen — including outside the browser, across multiple monitors. Zero permissions, fully offline.
Why doesn't the live picker work in Firefox or Safari?
Firefox publicly declined to implement EyeDropper (Mozilla position: 'negative'); WebKit (Safari) hasn't signaled support either. For those browsers, use 'Pick from screenshot' — it uses the universally-supported getDisplayMedia API (Chrome 72+, Firefox 66+, Safari 13+, Edge 79+).
The eyedropper cancels when I switch tabs. How do I pick from another tab?
Use the 'Pick from screenshot' button next to the live picker. It captures one frozen frame from any window, tab, or screen you choose — then you can leisurely pick colors from that frame with a built-in 10× magnifier. The live EyeDropper is locked to whatever's visible at click-time and cancels on focus loss; that's a browser security constraint, not a ColorTrail limitation.
Is ColorTrail really free? What's the catch?
100% free, forever. No accounts, no signup, no ads, no upsells, no Pro tier. Your colors never leave your device — everything runs in your browser via native APIs. We don't collect, store, or transmit any color data. The project is open-source on GitHub.
Is it safer than browser extensions like ColorZilla?
Yes. ColorTrail requires zero browser permissions and can't read any of your other tabs. Browser extensions like ColorZilla need 'read all data on the websites you visit' — a permission that could expose passwords, banking pages, anything. The browser-native EyeDropper API is sandboxed: it only returns the sampled pixel color, nothing else.
What is OKLCH and why do you support it?
OKLCH is a perceptually uniform color space introduced in 2020 by Björn Ottosson. CSS Color Level 4 (2023+) supports it natively. Modern design systems like Tailwind v4 use it because lightening or darkening a color by the same amount perceptually looks like the same amount of change. Most online color pickers don't expose OKLCH; we do, alongside HEX / RGB / HSL.
More questions? See the full FAQ →