StyleDrop: Pick Colors, Inspect Fonts & Export Design Tokens

About

Extract colors, fonts, gradients, and assets from any webpage, and export a ready-to-use DESIGN.md.

StyleDrop: Pick Colors, Inspect Fonts & Export Design Tokens is a browser extension for designers, frontend developers, and design engineers who want to read any website like a design system. Open the side panel to capture a page's colors, typography, gradients, assets, spacing, and contrast, without leaving the site you are studying.

Whether you are building a design system, recreating a layout, auditing accessibility, or feeding context to an AI coding assistant, StyleDrop removes the guesswork and gives you direct, copy-ready values. You choose what to inspect and what to export.

Key features:
- Auto-detected color palette with usage counts (HEX, RGB, HSL, CSS variables, Sass, Less)
- Reusable typography signatures with one-click CSS rules
- Linear and radial gradient capture with ready-to-paste CSS
- Asset finder for images, SVGs, and CSS backgrounds (preview, copy, open)
- Element inspector with size, fonts, colors, and live WCAG contrast
- Design tokens for radius and spacing scales
- Automatic WCAG AA contrast checks
- One-click DESIGN.md export, ready for AI tools
- Local-first analysis with no tracking

Why users choose StyleDrop:
- Fast, practical design extraction from any page
- Copy-ready values in the formats you already use
- Better accessibility with built-in contrast flags
- Clean side-panel controls that stay in sync with the active tab
- Private by design, nothing leaves your browser

Great for:
- Designers recreating or auditing a page's visual language
- Frontend developers who need exact colors, fonts, and spacing
- Design engineers building or maintaining a design system
- Anyone feeding page styles into an AI coding assistant