Woblo

Copy any website's colors, fonts, icons and CSS in one click. Export a full design system to Tailwind, shadcn or your AI tool.

Woblo extracts any website's design system colors, fonts, spacing and CSS in one click.

Open it on any page and instantly get the full color palette, every font family with its weights, all images, SVGs, icons, videos and Lottie animations, and the exact CSS behind any element. Copy anything as CSS, Tailwind, SCSS, JSX or HTML. Export a complete design system to Tailwind v4, shadcn/ui, or Design Tokens for Figma and Style Dictionary or paste it straight into Claude Code, Cursor, or any AI coding agent so it builds with the real values instead of guessing them.

No DevTools. No hunting for hex codes. No saving images one at a time.

WHAT YOU GET:

• 🎨 Colors: every color on the page, auto-detected and grouped by how it's used. Click any swatch to copy it as HEX, CSS, or a Tailwind class. Built-in eyedropper with HEX/RGB/HSL and recent history.
• 🖋 Fonts: every font family with its weights and sizes. Copy the CSS or the Tailwind class, or download the actual font file.
• 🖼 Assets: images, SVGs, icons, videos and Lottie animations, sorted automatically. Copy an SVG as code or as an image. Pick what you need, or take everything as a ZIP.
• 🔍 Inspect: click any element for spacing, typography, colors, shadows, transitions, and its real :hover, :focus and :active states. Live WCAG contrast checking. Copy the styles as CSS, Tailwind, SCSS, JSX or HTML.
• 🧩 Design system: generate 11-step color ramps, a type scale, spacing and shadow tokens from any site. Export to Tailwind v4, shadcn/ui, or DTCG design tokens.
• 📐 Ruler: measure anything on the page. Drag guides, snap to element edges.
• 📱 Device simulator: preview any page across 30 device sizes.
• 📦 Page export: download a full page with its CSS, images and animations included.
• 🔖 Library: save sites, colors, fonts and components into folders you can search.

WHO IT'S FOR:

Frontend developers rebuilding a reference site. Designers auditing color and typography. Anyone handing a design to an AI coding agent and tired of it inventing values.

Works as a side panel or a floating window. Press Ctrl+Shift+C to start inspecting.

Created and maintained by the Woblo Team (Ravi Kumar Chopra & Atishay Tuli).