oehfnmbpljdoomaleehhljjapfcpfkcd
Extract colors, fonts, images, SVGs, and CSS from any website. Build design systems in seconds. DesignAssets is the ultimate tool for developers and designers to analyze and extract design elements from any website. Instantly generate a comprehensive design system breakdown, including colors, typography, assets, and more. 🎨 Extract Complete Color Palettes Automatically detects brand, background, and text colors. Group colors by hue or usage. Export palettes to CSS, Tailwind, or JSON. View hex, RGB, and HSL values. 🔤 Typography Analysis Identify all font families, weights, and sizes used on a page. Preview fonts and copy CSS font-family stacks. 🖼️ Asset Downloader Extract all images (JPG, PNG, WebP) and SVGs in one click. Bulk download assets as a ZIP file. Detect and download Lottie animations. 🔍 Interactive Inspector Hover over any element to inspect its computed styles (margin, padding, font, color). One-click copy for CSS or Tailwind classes. Visualize box models and layout structure.
Web Paint Tool - draw online
Draw rectangle, circle, lines and others shapes or add text on any web pages, then make screenshot the result. Web Paint Tool is absolutely free lightweight digital program to created various drawing that comes loaded with brushes, fonts, shapes, and other resources. Our Paint Tool extension has a simple and easy to use design. It is not confusing and easily recognisable tool icons (pencil, paint bucket, eraser and others tool) are used in the app which makes it easy for everyone to use. Paint online or add information on a webpage to highlight moments, then take a screenshot of a full webpage or just a selected area with an option to download or share it. Fully customized screenshot that could be printed, saved or sent instantly. It contains the tools you need: - Pencil tool - draw custom lines - Text tool - add annotation - Emoji - add fine emoji on any web pages - Bucket fill tool - fill shapes and drawn with any color from palette - Line tool - put start and end point to paint straight line - Quadratic curve - draw a quadratic curve with the selected line width - Bezier curve - paint a bezier curve with the selected line width - Polygon tool - paint a polygon with the selected line width - Ellipse tool - draw an ellipse or a circle with the selected line width - Eyedropper tool - pick a color from the web page or your drawings - Screenshot tool - screenshot maker allows saving result in PN or JPG All tools as in MS Paint but only in your browser. You can mark shapes with the magic marker, write with the text tool and more. After you are done. Take screenshot of your work so that your friends can see your creativity as well. You can share your images on Pinterest board. Want to share your screen for cases like reporting technical issues, making product demos or how-to tutorials? Here are reasons to choose Paint and Screenshot Tool: - Hot-keys to each tool - Current drawings are automatically saved - Save drawing with a Screenshot option ( take a screenshot of a full page or capture selected area.) Screen capture. - Download image to your PC or Print - Crop the necessary area of an image and save it Annotate on any webpage and save it as a screenshot! Annotate the Web was created to allow users to annotate any webpage and save it as an image. Page Marker for Chrome Important After installation / update Paint Tool, please reload the active tabs in your browser for the extension to work. Paint on web and Screenshot Tool in simple manner and without any difficulties. Draw online with our new and absolutely free extension for chrome browser. Known as a web paint or paint online tool extension is a useful have for students, teammates and everyone who works with websites content, as you could easily learn or save information, create custom tutorials or paper notes, if you’d decided to print it. Please rate our Paint Tool extension if you like it. Happy painting everyone.
Peek - Design & Asset Toolkit
Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit. 🎨 Instantly Extract Design Tokens, Styles, and Assets from Any Website Peek is the ultimate all-in-one inspector tool for UI/UX designers and frontend developers. With a single click, you can extract a complete design system—including colors, gradients, typography, and assets—from any website. Say goodbye to manual inspection and hello to a streamlined workflow. Export production-ready code in CSS, SCSS, Tailwind CSS, JSON, SVG, and more. 🖼️ NEW: Complete Asset Extraction - Instantly find and analyze all images, SVGs, and other assets on a page. - Filter, scale, copy, and download assets with one click. 🎨 Smart Color & Gradient Detection - Automatically extracts the entire color palette, including solid colors and gradients. - Supports HEX, RGB, HSL, and modern formats like OKLCH. - Copies or downloads in developer-ready formats: CSS, SCSS, Tailwind CSS, JSON, and SVG. 📝 Advanced Typography Analysis - Instantly identify font families, sizes, weights, and line heights. - Visualize the site's type scale and typographic hierarchy. - Live Font Previews: See fonts rendered exactly as they appear on the site. - Intelligent Script Detection: Peek automatically detects the language (e.g., Arabic, Japanese, Cyrillic) and shows font previews in the appropriate script. 🚀 Lightning-Fast & Developer Friendly - Get instant style and asset data with no page reloads or performance impact. - Copy styles directly to your clipboard or download files. - Export clean, production-ready code. 🎯 Perfect For - UI/UX Designers creating design systems - Frontend Developers building component libraries - Design Teams maintaining brand consistency - Students learning web design principles 🔒 Privacy First - All processing happens locally on your device - No data sent to external servers - Respects your privacy and website content 🚀 Get Started in Seconds 1. Install the Peek extension 2. Navigate to any website 3. Click the Peek icon 4. Extract styles instantly 💡 Use Cases - Reverse-engineer a website's design system. - Build a palette from an inspiring site. - Analyze competitor typography and branding. - Create consistent brand guidelines. - Prototype faster with real-world design tokens. 🎨 Supported Formats - CSS, SCSS, JSON, SVG, and more - Compatible with all major design tools - Ready for production use Install Peek today and unlock the power of intelligent style and asset extraction! 1️⃣ SVG Superpowers: Change SVG colors and Copy/Download the customized SVG (Gradient SVG color customization is coming soon!) 1️⃣ Overview tab – Single-page summary of colors, typography, and typescale from the current site. Color analysis – Dominant, secondary, and accent colors with role breakdown (background, text, button). 2️⃣ Typography summary – Heading/body fonts, unique styles count, and typescale preview. Typescale preview – Font sizes shown with semantic labels (Display, Title, Body, etc.) and script-aware labels for non-Latin scripts. 3️⃣ Quick actions – Jump to Copy or Download for a chosen color group (Background / Text / Button) from Overview. 1️⃣ Copy Typescale As… – From Overview, copy the full typescale (all sizes) in your chosen format (CSS, SCSS, Tailwind, etc.). 2️⃣ Typescale-only flow – Opens the Copy page with typography output pre-selected so you can copy or tweak and copy. 1️⃣ Cleaner generated code – More consistent formatting, spacing, and comments in CSS/SCSS/Tailwind output. 2️⃣ Better structure – Logical grouping and ordering of variables and rules in copy/download output. 3️⃣ Fewer quirks – Edge cases in color/gradient and typography output reduced for more reliable paste-in use. • Delete Picked Colors: You can now delete individual picked colors by hovering over them. An undo option is available if you change your mind. • Conic Gradients to SVG: Conic gradients are now automatically converted to linear gradients in SVG exports. Simply change the gradient type from Linear to Angular in Figma (or equivalent in your design tool) to match the original conic gradient. • Enhanced Video Player: Improved video playback experience in the Assets Modal with Picture-in-Picture support. Pop videos out into a resizable window for better viewing. • Improved Color Conversion: Fixed OKLCH gradient colors to properly convert to your selected format (HEX, RGB, HSL, etc.) across all views. • UI Refinements: Subtle improvements throughout the interface for a smoother, more polished experience. • Fixed OKLCH gradient colors not converting to user-selected color formats in Copy and Download pages.
svg-grabber - Grab all the SVGs from any website
Preview, download, or copy the code for any SVG icon or illustration, ready to use in Sketch, Figma, or Framer. Instantly access all SVG assets on any website. With svg-grabber, you can preview, download, or copy the code for every SVG icon and illustration—ready to use in design tools like Sketch, Figma, or Framer. ----------------------------- Please note that some logos and artwork available for download are the intellectual property of their respective copyright and/or trademark holders. These assets are provided for your convenience, but you must obtain proper permission from the copyright and/or trademark holders before using them.
CSS Pully – Font & Color & Style Inspector
Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers. 🚀 Instantly inspect fonts, extract colors, analyze CSS styles, and download all images from any website with CSS Pully – your all-in-one web design extension for Chrome. Perfect for frontend developers, UI/UX designers, marketers, and content creators looking for fast, accurate, and powerful tools to reverse-engineer websites and speed up their workflow. 🔥 CSS Pully is a complete solution for inspecting website fonts, grabbing colors, copying CSS styles, downloading website images, and auditing layout properties – all in one click. 🎨 Features include: 🔤 Detect all fonts used on a web page, detect Google Fonts 🎯 Extract color palettes 📐 View detailed typography information – font size, line-height, font weight, and spacing 🌈 Get all CSS shadows, borders, border radius, margins, paddings, and layout sizes 👁 Instantly highlight and inspect styled elements directly on the page 📋 Copy full CSS styles of selected elements in one click 🖼 Collect all images from a website instantly 🧩 Filter downloaded images by file type – PNG, JPG, SVG, WebP, and GIF 📦 Download all images in a single ZIP file ⚙️ No coding skills needed – user-friendly interface for designers and non-tech users 💡 Lightweight and fast – does not slow down browser performance 🌍 Works on all types of websites including SPAs and dynamic web apps 🧪 Perfect for design audits, reverse engineering, debugging CSS, creating style guides, or collecting brand assets ✅ Benefits of using CSS Pully: – All-in-one Chrome extension for font detection, color extraction, and CSS inspection – Super easy to use, even for beginners – Pixel-perfect accuracy for copied CSS values – Saves time by removing the need to manually inspect code – Supports inspection of responsive layouts, font sizes, and visual spacing – Enables one-click image downloader with file-type filters and ZIP export – Ideal tool for website analysis, frontend debugging, and UI style copy – Compatible with Chrome, Edge, Brave, and other Chromium-based browsers 🔧 Use cases: – Copy font styles and colors from competitor websites – Collect assets to build style guides and UI kits – Extract CSS to recreate design elements in your project – Download all site images for marketing or content reuse – Debug and fix inconsistent spacing, font sizes, and design issues – Learn and practice design systems from real websites – Speed up handoff between designers and developers 🔹 Can I download images from websites? 🖼 Yes! You can collect all images on a page and download them in a single ZIP file. 🔹 Can I filter image downloads by file type? 📁 Yes, filter by PNG, JPG, SVG, WebP, and more. 🔹 Does it work with all websites? 🌐 Yes, it works on static pages, SPAs, and all modern websites. 🔹 Can I use it offline? 📴 Basic features like CSS inspection work offline, but font and color analysis may require internet access. 🔹 Will it slow down my browser? ⚡ No, CSS Pully is lightweight and optimized for performance. 🔹 Can I copy CSS styles? 📋 Yes, one-click style copy is supported for any inspected element. Download CSS Pully now and unlock the ultimate toolkit for web design inspection. Instantly detect fonts, extract color palettes, analyze CSS properties, collect and download images, and improve your productivity across all design and development tasks. CSS Pully is the must-have Chrome extension for any designer, developer, or creative professional working on the web.
