PuraCSS

Inspect styles, colors, typography, spacing and assets from any page.

PuraCSS is a design inspection toolkit built for front-end developers and designers who need to move fast without leaving the browser. Dock it to your Chrome side panel and instantly inspect any element on any webpage. ────────────────────────────── FEATURES ────────────────────────────── ✦ DOM Inspector Click any element to extract its full CSS: padding, margin, fonts, colors, border-radius, box-shadow, and more. ✦ Color Palette Scans the entire page and builds a visual palette. Click any color to copy instantly. ✦ Color Picker Native eyedropper that captures any color from any pixel on your screen — inside or outside the browser. ✦ Typography & Font Scraper Detects custom and system fonts, including line-height, letter-spacing, and weight. Live preview inside the panel. ✦ Tailwind CSS Converter Converts inspected CSS values directly into Tailwind utility classes. Copy and paste — done. ✦ Asset Scraper & ZIP Exporter Collects images, SVGs, and logos from the page. Copy SVGs directly or download everything as a ZIP. ✦ Brand Snapshot Captures a website's full visual identity automatically — logo, colors, and typography in a single exportable kit. ✦ Responsive Preview Resize any webpage to mobile, tablet, and desktop viewports instantly — without leaving the panel. ✦ Full-Page Screenshot Captures a complete, high-definition screenshot of any webpage in one click. ✦ WCAG Contrast Checker Scores text and background color contrast against AA and AAA accessibility standards. ────────────────────────────── PRO ────────────────────────────── ✦ Light, Dark & Navy premium themes ✦ Unlimited access to all tools ✦ 7-day free trial — no credit card required ────────────────────────────── No copy-pasting into external tools. No tab switching. Just inspect, extract, and build. 👉 Install for free and start inspecting in seconds.