Color Code Preview on Hover

WHAT IT DOES This script scans the page for color codes in various formats—hex (#ff6633), RGB/RGBA, HSL/HSLA, and named colors—and displays a preview swatch when you hover over them. A tooltip appears showing the color swatch, the exact color value, and the format type. Click the swatch or the color value to copy it to your clipboard instantly. The script also highlights color codes on the page, making them easy to spot. Perfect for designers, developers, and anyone working with CSS colors, allowing you to quickly preview and copy colors without switching tools. WHERE IT RUNS The script works on any page with color codes—CSS files, HTML documents, design systems, documentation, code editors, and any page containing color values. It scans text nodes across the entire page, detecting colors in code blocks, paragraphs, and any visible content. HOW TO USE After installation, the script automatically scans the page and highlights color codes. Hover over any detected color code to see a preview swatch with the color value and format. Click the swatch or the value text to copy the color to your clipboard. A toast notification confirms the copy. Open the panel to customize: enable or disable hover preview, toggle copy-on-click, show or hide the color format label, choose which color formats to detect (hex, RGB, HSL, named), select dark or light theme, adjust preview size, set tooltip position (top, bottom, left, right), and configure hover delay. Click "Scan & Apply" to re-scan the page after dynamic content changes. TECHNICAL MECHANISM The script uses a multi-stage color detection and preview pipeline. First, it walks the DOM using a TreeWalker to find all text nodes, excluding script and style elements. Second, it applies a regex pattern built from enabled formats to match color codes in the text. Third, it validates each match using a parsing function that checks hex (3-8 digits), RGB/RGBA (0-255 values with optional alpha), HSL/HSLA (0-360 hue, 0-100% saturation/lightness, optional alpha), and named colors (mapped from a dictionary). Fourth, it wraps matched colors in `` elements with hover event listeners. Fifth, on hover with a configurable delay, it creates a floating tooltip positioned near the element with a color swatch, the color value, and format label. Sixth, click handlers copy the color value using GM_setClipboard and show a toast notification. THE PANEL The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions. PLEASE NOTE This script requires the free BotGentz extension to run. Color detection relies on regex patterns and may not detect all color variations or non-standard formats. The script does not access, store, or transmit any personal data or browsing history. All processing happens locally in your browser and never leaves your device.