Colour Picker Eyedropper

WHAT IT DOES

Colour Picker Eyedropper lets you capture the exact color of any pixel on any webpage with pinpoint precision. Activate the eyedropper tool, move your mouse over the page, and watch a magnified view show every pixel in detail. When you click, the color is instantly captured and displayed in HEX, RGB, and HSL formats simultaneously. The color value is automatically copied to your clipboard, ready to paste into your design tools, CSS files, or development environment. The tool also maintains a history of your last 10 picked colors for quick reference and reuse.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All color sampling, pixel capture, and display operations occur on your machine without any network requests. No page content, color data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the eyedropper panel. Click the "Start Eyedropper" button to activate the tool. Move your mouse over any element on the page; a magnified circle follows your cursor showing an enlarged view of the pixels beneath it. The color under the crosshair center updates live in the panel. Click the mouse to capture that exact color. The color value is automatically copied to your clipboard and added to your history. Use the format dropdown to switch between HEX, RGB, and HSL output. Adjust the zoom level (2x, 4x, or 8x) for fine-grained selection. Click the color swatches in the history area to recall previously picked colors and copy them again.

THE PIXEL-ACCURATE CAPTURE ENGINE — WHY IT WORKS

Most browser-based color pickers approximate color by sampling rendered DOM elements at low resolution, often missing sub-pixel details and anti-aliasing artifacts. This tool uses a different approach: it captures a high-resolution snapshot of the entire viewport by drawing the documentElement directly onto a canvas using the drawImage API. The magnifier then reads individual pixels from this snapshot at the specified zoom level using getImageData, which provides exact RGBA values for every pixel position. This method bypasses CSS compositing approximations and reads the actual rasterized output of the browser's rendering engine. The crosshair position is calculated at the center of the magnified area, ensuring that the color sampled matches exactly what the user sees on screen. The captured value is then processed through a precise RGB-to-HEX and RGB-to-HSL conversion engine that handles edge cases like floating-point rounding and color space boundaries, producing values that match standard CSS color specifications.

THE PANEL

The eyedropper panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the color display, value fields, and history area adjust proportionally. Press the Escape key to close the panel instantly and deactivate the eyedropper tool. The panel maintains independent state for each browser tab, allowing you to pick colors in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their rendering techniques; while the capture engine works across most modern sites, complex CSS effects like filters, transforms, or WebGL content may affect color accuracy. All sampled color data is stored locally in your browser's storage and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.