Woblo: Color Picker, Font Finder & Design Inspector.

Project description

A Chrome extension that's actually useful for developers and designers 🔥 If you've ever caught yourself: -> Screenshotting a site just to remember its colors -> Asking "what font is that?" -> Digging through DevTools for one hex code -> Right-click → Save image as… forty times Then you need Woblo. Point it at any website and it hands you: 🎨 Colors: the full palette, auto-detected. Click a swatch to copy it as HEX, CSS, or a Tailwind class, it even knows whether that color was used as text, background, or border. Built-in eyedropper for anything it missed. 🖋️ Fonts: every family on the page with its weights, ready-to-copy CSS and Tailwind, and a one-click download of the actual font file. 🖼️ Assets: images, SVGs, icons, videos and Lottie animations, sorted automatically. Copy an SVG as code or as an image. Select what you want, or take everything as a ZIP. 🔍 Inspect: click any element and see spacing, typography, colors, shadows, transitions, and its real :hover / :focus / :active states. Live contrast ratio with WCAG pass/fail. Copy it out as CSS, Tailwind, SCSS, JSX or HTML. 🧩 Design system: generate full 11-step color ramps, a type scale and spacing tokens from any site. Export straight to Tailwind v4, shadcn/ui, or Design Tokens for Figma and Style Dictionary. 📐 Ruler: measure anything on the page. Drag guides, snap to element edges. 📱 Device simulator: preview any site across 30 real device sizes. 📦 Clone the page: export a whole page with its CSS, images and animations inlined. 🔖 Library: save sites, colors, fonts and components into folders so you can actually find them later. Download it, save your time. 👇 Link below https://chromewebstore.google.com/detail/gpamgcimpfifhcbelkmhlnienpppklcn?utm_source=item-share-cb