Page Color Palette Extractor

WHAT IT DOES

Page Color Palette Extractor scans any webpage and extracts the most prominent colors used in its design, including background colors, text colors, border colors, and accent colors. The extension analyzes all elements on the page, calculates the frequency of each color, and presents the results as a visual palette with color swatches, hex values, and usage percentages. You can click any color swatch to copy its hex value to your clipboard. The palette is sorted by prominence, showing you the dominant colors of the page first. You can filter colors by type (background, text, border) and exclude neutral colors like grays, whites, and blacks to focus on the page's accent palette. This is an invaluable tool for designers analyzing competitor websites, developers matching color schemes, and anyone interested in the visual design of a webpage.

WHERE IT RUNS

The extension works on every website with DOM elements, including complex single-page applications, traditional websites, and any page with styled content. It runs locally in your browser, analyzing computed styles without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, a "🎨 Palette" badge appears in the bottom-right corner of the page (if enabled). Click the badge to open the Color Palette panel, or open the extension panel and click "Show Color Palette." The panel displays the top colors found on the page, each shown as a color swatch with its hex value and percentage of total color usage. Click any color swatch to copy its hex value to your clipboard—a toast notification confirms the copy. Use the "Refresh" button to rescan the page for colors. Use "Copy All" to copy all hex values as a newline-separated list. To customize the results, open the extension panel and adjust the number of colors to display (10-50). Toggle "Exclude neutral colors" to filter out grays, whites, and blacks. Toggle "Include text colors," "Include background colors," or "Include border colors" to control which color types are included in the extraction. For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — DOM COLOR SAMPLING WITH FREQUENCY AGGREGATION AND NEUTRAL FILTERING

The extension uses a comprehensive color sampling pipeline. It first queries all elements in the document using `document.querySelectorAll('*')`, excluding script, style, and noscript tags. For each element, it uses `getComputedStyle()` to retrieve the element's computed styles, then extracts `backgroundColor`, `color`, and `borderColor` (or `borderTopColor`) based on the user's settings. Each color value is parsed using a color parser that handles rgb, rgba, hex, and named colors. The parser converts each color to a normalized hex value. For each extracted color, the extension checks if it should be excluded (if `excludeNeutrals` is enabled, it checks if the color is close to grayscale with a color distance threshold). The extension aggregates colors by their hex value, counting occurrences and tracking which types (background, text, border) each color appears in. Once all elements are processed, the aggregated colors are sorted by frequency in descending order, and the top N colors (based on the user's `colorCount` setting) are selected. Percentages are calculated based on the total count of the selected colors. The resulting palette is rendered as a grid of color swatches with hex labels, percentage indicators, and type badges. The entire process runs client-side with no external dependencies.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, show/close palette buttons, extract colors button, color count selector, neutral exclusion toggle, text color toggle, background color toggle, border color toggle, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access, clipboard, and storage engine. Color extraction scans all visible elements on the page, which may be computationally intensive on very large pages—the extension uses an efficient scanning strategy but may take a few seconds on complex pages. The color parser handles standard CSS color formats but may not support all CSS color functions (e.g., `hsl()`, `lab()`, `color()`). The "neutral" filter uses a color distance threshold to identify grayscale colors; some subtle warm grays may be filtered out. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.