table{width:100%;border-collapse:collapse;margin-top:6px}

WHAT IT DOES

This userscript adds a floating Color Function Inspector panel to any webpage that detects and lists all CSS color functions used across the page's stylesheets. It identifies color functions including rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), color(), oklab(), oklch(), and color-mix(). For each color function, the panel displays the function name, its parameters, the CSS property it's used in (color, background-color, border-color, etc.), and the selector it applies to. A color swatch preview shows the actual rendered color for each function. A search filter allows you to find specific color functions by name, parameter values, selector, or property. You can copy the full color function CSS to the clipboard with a single click. The "View" button opens a modal showing the complete rule with the color function. An inspector mode lets you click any element on the page to see all color functions that apply to it, with their parameters and properties. 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 function debugging and analysis.

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 "Function List" section displays all color functions found on the page, showing a color swatch preview, the function name, the selector, the property, and the parameter values. Use the search input to filter functions by name, parameter values, selector, or property. Click the "Copy" button on any function to copy the complete CSS property with the color function to your clipboard. Click the "View" button to open a modal with the full rule in a readable format. Click "Inspect Element" to enter inspector mode—then click any element on the page to see all color functions that apply to it. Click "Refresh" to rescan the page's stylesheets for color functions after dynamic changes.

COLOR FUNCTION EXTRACTION WITH PARAMETER PARSING AND SWATCH PREVIEW

The script iterates through all stylesheets on the page using document.styleSheets, reading each CSSRule of type 1 (style rules). For each rule, it scans every CSS property value for color function patterns using a regular expression that matches rgb, rgba, hsl, hsla, hwb, lab, lch, color, oklab, oklch, and color-mix. When a color function is found, the script extracts the function name and its parameters by balancing parentheses, handling nested functions like color-mix(). A color swatch is rendered by applying the exact color function value as a background to a preview element, showing the actual rendered color. The inspector mode analyzes elements by retrieving computed styles and scanning them for color functions, providing a practical way to see which functions affect a given element. The copy function generates the complete CSS property with the color function, and the view modal displays the full rule with proper formatting.

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 function list has a maximum height of 280px with internal scrolling. Inspector mode overlays a blue border on hovered elements and displays color function information in a modal overlay.

PLEASE NOTE

Requires the free BotGentz extension to run. The script detects color functions from stylesheets only—dynamically injected styles may not be detected until the "Refresh" button is clicked. Cross-origin stylesheets may not be accessible due to browser security restrictions. The script does not collect, store, or transmit any personal data. All color function data is read from the page and displayed locally. The swatch preview is rendered using the exact color function value and may vary based on browser support for modern color functions like lab, lch, and oklch. The copy function copies the full CSS property with the color function as it appears in the stylesheet.