Snap Color Picker
A free, offline-first eyedropper & color picker for Chrome with a pixel-level magnifier, native screen picking, real-time page color scanning, and instant conversion across 6 formats (HEX, RGB, HSL, HSV, CMYK, OKLCH).
#Overview
A 5.0-star rated advanced color picker extension built with WXT, React, and TypeScript that goes far beyond a basic eyedropper. It samples pixels from any webpage or the native OS screen, auto-converts between color spaces, scans full pages for design palettes, and keeps a pin-able history — all processed locally with zero tracking or network calls.
#Key Features
- ▹Live pixel magnifier (17×17 zoom grid) for pinpoint color sampling
- ▹Dual picking modes: DOM-level page picking + native OS screen picking via EyeDropper (works on restricted pages)
- ▹6 color formats with instant conversion — HEX, RGB, HSL, HSV, CMYK, OKLCH
- ▹One-click copy with per-format toggles and optional auto-copy
- ▹Real-time page color scanner — surfaces top & brand colors grouped by backgrounds, text, borders, and links
- ▹Color history (up to 200 entries) with pin/unpin, delete, and live cross-view syncing
- ▹Custom color picker with manual HEX input and visual palette editor
- ▹Right-click context menu access with smart fallback to screen mode on restricted pages
- ▹Smart WCAG-based contrast guidance plus dark & light themes
- ▹Palette export, fully offline, lightweight, and 100% local-first (privacy by design)
#Challenges & Solutions
Challenge
Accurately sampling pixels from arbitrary web pages without jank was the core problem — it required a screenshot-driven capture pipeline (grabbing the visible tab before the popup closes), a 60fps live magnifier overlay, and graceful handling of restricted pages (chrome://, Web Store) where DOM injection is blocked. Coordinating live updates between the content script, background worker, and popup via a typed message architecture added further complexity.
Solution
Used captureVisibleTab + canvas-based sampling with a lazy content-script injection & retry strategy, and fell back to the native EyeDropper API for screen picking on restricted pages. Implemented a fully local chrome.storage.local architecture with a typed message bus (content ↔ background ↔ popup) so history and scan results update in real time — with zero analytics, zero network calls, and instant rendering.
Project Info
Open Source
Creator & Maintainer
Ongoing
Browser Extension
Want to Learn More?
Check out the complete documentation to understand the project architecture, setup instructions, and detailed API references.