Coloracci: CSS Inspector, Colors & AI Specs

ee the design behind any website — and take it with you. Coloracci is a free design inspector for developers and designers. Click the icon on any page to instantly reveal its palette, gradients, typography, assets and design tokens. Click any element to inspect it, then copy it as clean CSS, Tailwind classes, or an AI-ready prompt. 🎨 Colors & gradients • Full palette sorted by usage — one click copies any HEX • Locate where a color is used on the page • Every gradient, ready to copy • Design tokens (CSS variables) extraction 🔍 Smart element inspector • Dimensions, padding, radius, shadows, fonts and colors of any element • Sees inside shadow DOM and same-origin iframes — catches what other inspectors miss • Context menu with live details while hovering ⚡ Copy as code (new) • Any element as clean, minimal CSS • Any element as Tailwind classes • Deterministic output from computed styles — no guesswork 🤖 AI design specs (new) • Copy an AI-ready spec of any element, or the whole page design system • Paste into Cursor, Claude, v0 or Lovable to rebuild the design accurately 📝 Typography & assets • Every font family, size and weight in use • Images and SVG icons, ready to download ☁️ Optional Coloracci account • Save palettes from any site to your free coloracci.ai account • Analyze websites with AI — the free plan includes 5 analyses per month; a paid Pro plan offers more • The extension itself is completely free and an account is never required 🔒 Privacy first • Runs only when you click it — no background access, no tracking • Minimal permissions Questions or ideas? support@coloracci.ai