HoverPick is a Chrome extension built for designers, developers, and creators who need to extract exact colors from websites, images, videos, and UI elements without leaving the browser. It uses a screen-capture pixel sampling engine that reads actual rendered pixels rather than relying on DOM styles — giving true pixel-accurate results every time. Unlike CSS-based color pickers that return computed values, HoverPick captures what the screen actually renders, including composited layers, anti-aliasing, and overlays.
- Pixel-accurate color sampling — reads actual rendered pixels via screen capture, not CSS computed values
- Real-time extraction — color updates live as you move your cursor across any element
- HEX and RGB output — get both formats instantly, switch between them with one click
- Magnifier lens — zoomed-in pixel preview for precision targeting
- One-click copy — copies color to clipboard without interrupting your workflow
- Zero cloud dependency — everything runs locally inside the browser, no data sent anywhere
- Works everywhere — images, videos, rendered UI, infographics, canvas elements, anything visible on screen
- User activates the extension and hovers over any area of the visible webpage
- A screen capture of the visible tab is taken using the Chrome Screen Capture API and passed to an Offscreen Document
- The Canvas API reads the exact pixel at the cursor position from the captured frame, returning true RGBA values
- The color is converted to HEX and RGB and displayed in real time with a magnified preview of the surrounding pixel region
This approach captures what the screen actually renders — including anti-aliasing, overlays, and composited layers — which DOM-based color pickers cannot access.
| Technology | Purpose |
|---|---|
| JavaScript | Core extension logic |
| Chrome Manifest V3 | Extension platform |
| Screen Capture API | Tab pixel capture |
| Canvas API | Pixel color reading |
| Offscreen Documents | Background rendering context |
| Service Worker | Extension lifecycle management |
| Clipboard API | One-click copy |
| HTML & CSS | Popup interface |
1. Screen-capture pixel sampling Most color pickers read CSS properties from the DOM, which returns computed styles rather than actual rendered colors. HoverPick solves this by capturing the visible screen frame and sampling pixels directly from the rendered output — the same colors the user sees on screen.
2. Real-time rendering performance Continuous screen capture and pixel sampling on every cursor move creates performance pressure. The architecture uses throttled capture cycles and offscreen rendering to maintain smooth real-time updates without impacting browser performance.
3. Manifest V3 offscreen architecture MV3 removed direct DOM access from service workers. HoverPick uses the Offscreen Documents API to run Canvas operations in a hidden context, bridging the gap between the service worker and the visual capture pipeline.
4. Auto-exit workflow The extension needed to feel zero-friction — activate, pick, copy, and disappear. Designed an auto-exit flow that dismisses the picker immediately after copying so the user returns to their work without an extra click.
- Clone or download this repository
- Open Chrome and navigate to
chrome://extensions/ - Enable Developer Mode (toggle in top right)
- Click Load unpacked
- Select the downloaded repository folder
- HoverPick appears in your extensions bar
Chrome Web Store listing coming soon.
- Click the HoverPick icon in your Chrome extensions bar
- The color picker overlay activates on the current tab
- Move your cursor over any element, image, video, or UI component
- The color under your cursor appears in real time with HEX and RGB values
- Click to copy the color to your clipboard
- The extension dismisses automatically
Prince Patel — AI-Powered Product Developer
- 🌐 Portfolio: prince-patel-portfolio.vercel.app
- 🐙 GitHub: github.com/Pro-Prince
- 𝕏 X: @Pro_Prince_1
- 💼 LinkedIn: linkedin.com/in/prince-patel476
This project is licensed under the MIT License.