Font & Color Inspector

Hover any element to see font, size, weight and color in hex. Click to copy. No DevTools needed.

Font & Color Inspector turns any webpage into a typography and color reference. Hover any element — see its font, size, weight, line-height, text color and background color instantly. Click any value to copy it to your clipboard. No DevTools panel to open. No CSS selectors to type. Just hover and click. ★ FREE — every visit, every site • Hover-based tooltip with the essentials: Font, Size, Weight, Line Height, Text color, Background color • Font name rendered in its own typeface — recognize a font at a glance • Click any value → copied to clipboard with confirmation flash • Activate with one click or your hotkey (Alt + Shift + F, configurable) • Tooltip uses a closed Shadow DOM — site CSS can't break the inspector • Smart background resolution: walks up the DOM tree to find the real background color when an element is transparent ★ PRO — for designers and front-end professionals Extended CSS that the free tier doesn't show: • Letter spacing • Font style (italic, oblique) • Text transform (uppercase, capitalize) • Text decoration (underline, strikethrough) • Border color (only when there is a visible border) • Box-shadow color • Opacity Pin tooltips and compare elements side-by-side: • Click 📌 to pin a tooltip in place • Drag the pinned tooltip anywhere by its header • Pin as many as you need to see the difference between two buttons, two headings, two cards Page palette in one click: • Open the History & Palette overlay • Click "Scan current page" → every unique color used on the page, ordered by usage frequency • Click any swatch to copy its hex • Pure white and pure black are skipped automatically so brand colors come to the top Inspection history: • The last 50 elements you inspected are kept locally • Re-find a font or a color you saw on a previous visit • Per-session dedup so the list stays clean Export to your design system: • CSS custom properties (:root { --fci-text-1: #1A1A1A; … }) • JSON • W3C Design Tokens (Figma Tokens compatible) ★ PRICING • 14-day free trial. No credit card required. • €3.99 per month, or €19.99 once — yours forever. ★ AVAILABLE IN 5 LANGUAGES English, Deutsch, Español, Português (Brasil), Русский. The extension picks your browser language automatically. ★ PRIVACY-FIRST • No telemetry. No analytics. No ad SDKs. • The only external request the extension ever makes is the license verification with ExtensionPay (only when the popup or options page is open, max once per 24 hours). • Inspection history is stored locally in your browser. Nothing leaves your device. • No accounts. No emails collected. • Full privacy policy: see the link below. ★ WHO IT IS FOR • Front-end developers wanting to identify a font without opening DevTools. • UI/UX designers stealing inspiration from beautiful sites for a Figma file. • Marketing and content folks who need to match a brand's exact hex. • Anyone who's ever right-clicked Inspect just to see "what font is this?".