Bookmarklets

Color Palette Extractor

bookmarklets Web Dev Design

The Color Palette Extractor bookmarklet is a powerful tool for analyzing and extracting the color palette from any webpage.

Complete Color Analysis

This bookmarklet scans the page for colors used in text and backgrounds, creating a comprehensive color palette with RGB and HEX values.

javascript:!function(){const n=function(n){const t=new Map;return Array.from(n).forEach((n=>{const r=window.getComputedStyle(n),e=r.color,o=r.backgroundColor;e&&"transparent"!==e&&"rgba(0, 0, 0, 0)"!==e&&t.set(e,(t.get(e)||0)+1),o&&"transparent"!==o&&"rgba(0, 0, 0, 0)"!==o&&t.set(o,(t.get(o)||0)+1)})),t}(document.getElementsByTagName("*")),t=Array.from(n.entries()).sort(((n,t)=>t[1]-n[1])).slice(0,20),r=document.createElement("div");r.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        width: 300px;\n        max-height: 80vh;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        overflow-y: auto;\n    ",r.innerHTML=`\n        <div style="margin-bottom: 15px;">\n            <strong>Color Palette Extractor</strong>\n            <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 20px;">\n            <strong>Top Colors Found:</strong>\n        </div>\n        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">\n            ${t.map((([n,t])=>`\n                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px;">\n                        <div style="width: 100%; height: 40px; background: ${n}; margin-bottom: 5px; border-radius: 4px;"></div>\n                        <div style="font-size: 12px;">\n                            <strong>RGB:</strong> ${n}<br>\n                            <strong>HEX:</strong> ${function(n){const t=n.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);return t?"#"+((1<<24)+(parseInt(t[1])<<16)+(parseInt(t[2])<<8)+parseInt(t[3])).toString(16).slice(1):null}(n)}<br>\n                            <strong>Frequency:</strong> ${t}\n                        </div>\n                    </div>\n                `)).join("")}\n        </div>\n    `,document.body.appendChild(r)}();
Drag me to bookmark bar: 👉🏻 Color Palette Extractor

Why Use Color Palette Extractor?

The Color Palette Extractor bookmarklet is essential for web developers and designers who need to understand the color scheme of a webpage. It helps identify the most used colors, maintain consistent branding, and analyze color patterns across the site.