Color Picker & Font Inspector — StyleDrop
cupcakedev.com · Developer Tools
Media
4 items
Description
Color picker & font inspector for any webpage. Copy CSS, gradients, design tokens and WCAG contrast, then export to DESIGN.md. Color picker, font inspector, CSS extractor, and design token exporter — all in one Chrome side panel, running fully local. Pick any color on a webpage, find out what font a site uses, copy its exact CSS, extract the full color palette, check WCAG contrast, and export everything as a clean DESIGN.md file. Open the side panel next to the page you are studying and read it like a design system: colors, fonts, gradients, images, SVGs, CSS backgrounds, spacing, radii, and contrast — all turned into copy-ready values instead of a DevTools scavenger hunt. Use it when you need a webpage color picker, a font finder, a CSS color palette extractor, an accessibility contrast checker, or a fast way to document a website's design language for design systems, frontend implementation, redesigns, QA, and AI coding tools. Key features: - Webpage color picker and palette extractor with usage counts, HEX, RGB, HSL, CSS variables, Sass, and Less formats - Font inspector that identifies font family stacks, 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 icons, and CSS background images with preview, copy, and open actions - Element inspector for exact size, color, font, spacing, radius, and contrast details of any element you click - WCAG contrast checker for accessibility audits and quick AA 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 it: - Capture a real website's visual language without checking every element in DevTools by hand - 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 it: - 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 coding tools a precise design reference Whether you need to pick a color from a webpage, extract a site's color palette, identify fonts, copy CSS, generate design tokens, check WCAG contrast, or export a page's styles to Markdown, it is built for people who design and ship interfaces: UI designers, UX designers, frontend developers, web developers, design engineers, and product teams. Privacy first: The active webpage is analyzed locally in your browser. No browsing data is collected, transmitted, sold, or tracked, and your design inspection workflow stays on your device. StyleDrop turns the page in front of you into a reusable design reference.