Color Picker / Eyedropper
Pick any pixel from anywhere on your screen with the browser EyeDropper API. Returns HEX, RGB, CMYK, HSL, HSV, Lab, and the closest Pantone — all in one shot.
- Uses the native EyeDropper API — works across browser windows
- Returns HEX + RGB + CMYK + HSL + HSV + Lab in one shot
- Surfaces the closest Pantone match for the sampled color
- Falls back to HEX input if the API is unsupported
Direct answer
EyeDropper API gives any web page permission to sample a pixel anywhere on your screen — even outside the browser. We use it to pick a color, then run our full conversion pipeline against the sampled HEX.Color Picker / Eyedropper
Nearest Pantone (Coated)
Pantone 186 C · ΔE 0.00
HEX
#C8102E
RGB
rgb(200, 16, 46)
CMYK
cmyk(0%, 92%, 77%, 22%)
HSL
hsl(350, 85%, 42%)
HSV
hsv(350, 92%, 78%)
LAB
lab(42.5, 65.9, 35.7)
When this saves you time
Real workflows where color picker / eyedropper replaces tedious manual work or an in-app subscription tool.
Sample a competitor's brand color
Grab a color from a stakeholder's screenshot
Verify a rendered color in DevTools
Pull a color from a Figma frame or video
Match a printed sample on your monitor
How it works
The methodology — every transformation documented so the output is reproducible.
Request EyeDropper permission
On click, we open `new EyeDropper()` — the browser asks the user to pick a pixel. Cursor turns into a magnifier.
Receive sRGB hex
On selection, the API returns the sampled sRGB hex. Cancel returns AbortError; we surface a quiet status instead of crashing.
Run full conversion grid
Sampled HEX → RGB → CMYK, HSL, HSV, Lab. Each is rendered with its own click-to-copy button.
Find the nearest Pantone
Lab → CIEDE2000 distance against the Pantone reference set. Top match displayed with ΔE score.
Worked examples
| Input | Result | Notes |
|---|---|---|
| Pick from coca-cola.com logo | ≈ #F40009 · Pantone 485 C, ΔE ~2.5 | Brand red sampled live — verify against official Coca-Cola brand guide for production. |
| Pick from a sunset photo | #FF8A4D · Pantone 165 C, ΔE ~3.1 | Typical warm-orange sunset. Useful for moodboard color extraction. |
| Pick from VSCode dark theme | #1E1E1E · Pantone Black 6 C, ΔE ~1.8 | VSCode default background — useful when designing IDE-themed marketing assets. |
Common mistakes to avoid
Browser support is uneven
Sampled color is not gamma-corrected by the OS
Anti-aliased edges sample subpixel mixes
Picking from HDR content
Frequently Asked Questions
How the EyeDropper API actually works
The W3C EyeDropper API ( https://wicg.github.io/eyedropper-api/) gives any web page opt-in access to a pixel sampler. It does not let you read pixels programmatically — every sample requires an explicit user click. Once the user clicks Pick, the browser takes over: cursor becomes a magnifier, screen dims slightly. The user clicks once; the browser returns the sampled sRGB byte to the page.
What's returned
The API returns an object with one property: sRGBHex — a 7-character HEX string. From there our converter pipeline takes over:
- sRGB → linear → CIE XYZ → CIE Lab
- sRGB → CMYK (uncalibrated)
- sRGB → HSL (CSS-standard)
- sRGB → HSV (Smith 1978)
- Lab → ΔE2000 against the Pantone reference set
Privacy model
Every pick is a discrete user gesture. The page cannot poll colors or sample programmatically — the browser explicitly prevents drive-by pixel extraction. This makes EyeDropper safe for embedding in untrusted contexts.
When EyeDropper isn't enough
For color-managed sampling (Adobe RGB / P3 monitors with calibrated profiles), use a spectrophotometer (X-Rite i1, Calibrite Display) — those return XYZ tristimulus values independent of the screen. EyeDropper returns the rendered sRGB byte, which is the "as seen" value.