Color Picker from Your Screen
Grab the exact color of any pixel on your screen — an image, a video, a PDF, another app — with the browser's native picker: no uploads, no installs. Instant HEX, RGB, HSL and HSV, WCAG contrast for accessibility, and a palette exportable to CSS, Tailwind or JSON.
WCAG contrast
≥4.5 normal text AA · ≥3 large text AA · ≥7 AAA
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
99% of «online color pickers» ask you to upload a screenshot: you send the image to their server to learn a color. This one works the other way — and better: it uses the browser's native EyeDropper API to read the exact pixel you choose — from a video, a PDF, Photoshop, a game, anything — with nothing leaving your device. Every captured color lands in a session palette with simultaneous HEX, RGB, HSL and HSV, WCAG contrast against white and black with AA/AAA thresholds, and export to CSS variables, Tailwind classes or JSON. The color math is implemented from scratch and verified with a 1639-test bank: round-trips of every RGB channel, HSL↔RGB with controlled quantization error, and the classic vectors (red = hsl(0,100%,50%), white/black contrast = 21:1).
Features
- ✓Browser-native picker: grabs any screen pixel, even from other apps
- ✓Simultaneous HEX, RGB, HSL and HSV with one-click copy
- ✓WCAG contrast against white and black: AA and AAA at a glance
- ✓Session palette exportable to CSS variables, Tailwind classes or JSON
- ✓Color conversions verified with a 1639-test bank against reference values
How to pick a color from the screen?
- 1
Click «Pick color from screen»
The browser activates its native loupe: nothing gets installed or uploaded.
- 2
Choose the exact pixel
You can capture from any app: a YouTube video, a PDF, a design tool or the desktop.
- 3
Copy the format you need
HEX, RGB, HSL and HSV appear at once, each with its copy button.
- 4
Save to the palette
Accumulate colors and export them as CSS variables, Tailwind classes or JSON with one click.
Frequently asked questions
Why does it work in Chrome and Edge but not Firefox?
The EyeDropper API is a recent spec implemented by Chromium and Safari 18+, still missing in Firefox. It reads screen pixels without full capture permissions. On Firefox the tool still works via the HEX field, and for screen-wide picking you'd use Firefox's screenshot + this suite's palette extractor.
Is my screen sent to any server?
No. The EyeDropper API returns only the chosen pixel's value, locally. No screenshots, no uploads and no network requests: check the dev tools network tab — no traffic appears at all.
What's the WCAG contrast display for?
For accessibility: it tells you how the color contrasts with white and black (1-21 ratio). At ≥4.5:1 normal text passes AA, ≥3:1 works for large text, ≥7:1 reaches AAA. It's the quick check that stops you picking yellow for white text.
Related tools
Embed Screen Color Picker on your site
Add Screen Color Picker to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/color-picker-screen"
width="100%"
height="700"
frameborder="0"
title="Screen Color Picker — miguelacm.es"
></iframe>