StyleDrop: Color Picker & Font Inspector

Color picker, font inspector, CSS extractor and design token exporter. Extract colors, fonts, gradients, contrast to DESIGN.md.

StyleDrop is a local-first color picker, font inspector, CSS extractor, and design token exporter for Chrome. Open StyleDrop in the side panel to inspect any webpage like a design system. It extracts the colors, fonts, gradients, images, SVGs, CSS backgrounds, spacing, radii, and WCAG contrast data behind the page you are viewing, then turns that visual audit into copy-ready values and a clean DESIGN.md export. Use it when you need a practical webpage color picker, a typography inspector, a CSS color palette extractor, an accessibility contrast checker, or a fast way to document a site's design language for design systems, frontend builds, redesigns, QA, and AI coding tools. Key features: - Webpage color picker with detected palettes, usage counts, HEX, RGB, HSL, CSS variables, Sass, and Less formats - Font inspector for typography stacks, font sizes, weights, line heights, letter spacing, and reusable CSS rules - Gradient extractor for linear and radial gradients with ready-to-paste CSS - Asset extractor for page images, SVG files, icons, and CSS background images with preview, copy, and open actions - Element inspector for exact size, color, font, spacing, radius, and contrast details from selected page elements - WCAG contrast checker for accessibility audits and quick AA contrast review - Design token export for colors, typography, spacing, radius, gradients, and assets - One-click DESIGN.md export for developers, designers, design engineers, and AI coding assistants - Local-first analysis with no tracking, no accounts, and no external upload Why designers use StyleDrop: - Capture a real website's visual language without manually checking DevTools for every element - Build mood boards, audits, redesign briefs, and design system references from live pages - Compare brand colors, gradients, fonts, and accessibility issues while staying on the page - Turn inspiration sites into structured notes instead of loose screenshots Why frontend developers use StyleDrop: - Copy exact CSS colors, font rules, gradients, spacing, and asset URLs from the current webpage - Recreate UI sections faster with reliable design tokens instead of guesses - Check contrast and typography details during implementation or QA - Export a DESIGN.md file that gives teammates or AI tools a precise design reference Great for searches like: - color picker for Chrome - website color palette extractor - font inspector extension - CSS extractor - design token generator - WCAG contrast checker - webpage design system extractor - export website styles to markdown StyleDrop is built for people who design and ship interfaces: UI designers, UX designers, frontend developers, web developers, design engineers, product teams, and anyone who needs to understand how a webpage is styled. Privacy first: StyleDrop analyzes the active webpage locally in your browser. It does not collect, transmit, sell, or track your browsing data. Your design inspection workflow stays on your device.