--teal:#14b8a6; --blue:#3b82f6; --indigo:#6366f1; --amber:#f59e0b;

WHAT IT DOES

This userscript adds a floating CSS Color Inspector panel to any webpage that detects and lists all color values used in the page's styles. It scans every element on the page to extract colors from properties including color, background-color, border-color, outline-color, box-shadow, and text-shadow. For each unique color, it displays the hex, RGB, and HSL values along with a usage count showing how many times that color appears. Colors are grouped by usage type (background, text, border, etc.) to help you understand how colors are being applied. A search filter allows you to find specific colors by hex, RGB values, or color name. You can copy any color value to the clipboard in hex, RGB, or HSL format. Clicking a color highlights all elements on the page that use that color, with the first matching element scrolled into view. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with color analysis and debugging.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Colors" section displays all unique colors found on the page, sorted by frequency (most used first). Each color entry shows a color swatch, the color value, and a usage count. Click on any color entry to highlight all elements on the page that use that color—the first matching element will scroll into view with a blue outline. Use the search input to filter colors by hex, RGB, or color name. Select your preferred color format (Hex, RGB, or HSL) from the format dropdown—your preference is saved globally. Click the "Copy" button on any color to copy its value in your selected format. Click "Refresh" to rescan the page for colors after dynamic changes. Click "Clear Highlight" to remove all element highlights.

COMPUTED STYLE SCANNING WITH COLOR NORMALIZATION AND AGGREGATION

The script iterates through every element on the page using document.querySelectorAll('*'), retrieving computed styles via window.getComputedStyle(). It checks a comprehensive set of color-related CSS properties including color, background-color, border-color, outline-color, box-shadow, and text-shadow. For each property value, the script attempts to normalize and parse the color using a custom color parser that handles hex (3, 6, and 8 digit), rgb, and rgba formats. The parser extracts RGB components and computes the hex representation, normalizing all color inputs to a consistent format. Colors are then aggregated by their hex value, with usage counts incremented for each occurrence. The script also tracks which CSS property types each color appears in, allowing grouping by usage type (background, text, border, shadow, outline, other). This approach provides accurate color detection regardless of whether colors are defined in stylesheets, inline styles, or computed from CSS variables. Cross-origin stylesheets do not affect this method since computed styles are accessed directly from the rendered DOM.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The color list has a maximum height of 300px with internal scrolling. Clicking a color entry triggers a smooth scroll to the first matching element with a blue outline highlight.

PLEASE NOTE

Requires the free BotGentz extension to run. The script scans all elements on the page using getComputedStyle, which may have performance implications on very large pages—the scan is typically fast for most websites. Colors that are transparent, inherit, or initial are excluded from the list. The search filter matches hex codes, RGB values, and color names. Color format preference (hex, RGB, HSL) is saved globally using GM_setValue. The script does not collect, store, or transmit any personal data. All color data is read from the page and displayed locally. The highlight feature uses a blue outline overlay that may interact with existing element outlines.