ioamghgbfkachnkafmlfjgddjljidcbi
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.
Web Color Palette Extractor
Extract and manage web color palettes from web pages Web Color Palette Extractor allows you to quickly capture and extract color information from any website you're viewing. With just a click, this extension scans the active tab of your browser and identifies all the colors used on the page. It displays these colors along with their color codes, so you can easily see the exact shades used. Features: • Extract color styles from any website with one click. • View all extracted colors along with their HEX, RGB, or HSL color codes. • Save your favourite color palettes to local storage. • Export your color palette as a PDF to easily share or reference later. Whether you're a web designer, developer, or simply someone who loves discovering unique color schemes, Web Color Palette Extractor makes capturing and saving colors easy and convenient. Unlock creativity by exploring colors from any webpage you love!
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.
Design Analyzer - Extract Design Elements
**🎨 Professional Design Element Extraction Tool for Designers** Design Analyzer is the ultimate Chrome extension for designers, developers, and design enthusiasts. Extract comprehensive design elements from any website with a single click and export them in multiple professional formats. ### **Complete Design Analysis** • **Colors**: Extract color palettes with usage context • **Typography**: Font families, sizes, weights, and line heights • **Spacing**: Margin, padding, and layout spacing patterns • **Visual Effects**: Box shadows, text shadows, gradients, filters • **Transforms**: CSS transforms, opacity, and visual effects • **Smart Categorization**: Automatically organize elements by type and usage ### **Professional Export Options** • **CSS Variables**: Ready-to-use custom properties • **Design Tokens**: W3C-compliant tokens for design systems • **Figma Integration**: Import-ready color palettes and tokens • **Sketch Palettes**: Direct Sketch app integration • **JSON Data**: Complete structured analysis data ### **Beautiful Interface** • **Popup View**: Quick 800x600px analysis window • **Fullscreen Mode**: Detailed card-based analysis view • **Dark Mode**: Eye-friendly dark theme with toggle • **Responsive Design**: Works beautifully on all screen sizes • **One-Click Analysis**: Instant extraction with auto-scan ### **Smart Features** • **Auto-Analysis**: Automatically scans when extension opens • **Legal Disclaimers**: Built-in IP protection notices • **Website Attribution**: Tracks source URLs in exports • **Usage Statistics**: Shows frequency and element context • **Copy-to-Clipboard**: Quick CSS copying for individual elements ## 🚀 Perfect For • **UI/UX Designers**: Research color schemes and typography • **Web Developers**: Extract CSS for implementation • **Design Students**: Learn from professional websites • **Brand Analysts**: Study competitor design systems • **Design System Creators**: Build comprehensive style guides ### **Colors** - Hex values with transparency - Usage context (background, text, border) - Frequency statistics - Smart color grouping ### **Typography** - Font family names - Font sizes and weights - Line heights and spacing - Text samples and usage ### **Visual Effects** - Box shadows (drop shadows, insets, glows) - Text shadows and effects - CSS gradients (linear, radial, conic) - Filters (blur, brightness, contrast) - Transforms and animations ### **Layout & Spacing** - Margin and padding values - Element spacing patterns - Layout grid information - Responsive breakpoint hints 1. **Navigate** to any website you want to analyze 2. **Click** the Design Analyzer extension icon 3. **Analyze** automatically scans and extracts design elements 4. **Review** elements in popup or open fullscreen view 5. **Export** in your preferred format (CSS, JSON, Figma, Sketch) 6. **Copy** individual elements with one click • **Design Research**: Analyze trending design patterns • **Style Guide Creation**: Build comprehensive design systems • **Developer Handoff**: Extract exact CSS values for implementation • **Competitive Analysis**: Study competitor design choices • **Learning Tool**: Understand how professional sites are built • **Design Inspiration**: Discover new color combinations and effects • **Manifest V3**: Latest Chrome extension standards • **Fast Processing**: Optimized for performance • **Memory Efficient**: Minimal resource usage • **Cross-Platform**: Works on all Chrome-supported platforms • **Auto-Updates**: Always get the latest features ### **Figma Integration** Import directly into Figma using color palette plugins and design token tools. • Chrome browser version 88 or higher • Active internet connection for website analysis • No special permissions beyond activeTab access
Export to Figma
Capture any webpage or element and paste it into Figma as editable layers, instantly. Capture real UI from any webpage and convert it into clean, structured Figma layers. Skip screenshots and manual rebuilding. ✨ Features • Capture full pages or specific elements • Clean, editable layer structure • Preserves layout, styles, and text • Fast and lightweight • Works on most websites, including AI-generated apps Install the extension, open any website, click “Export to Figma,” and start designing instantly. Updates: Bug fix: resolved an issue where the user subscription was not updating.
