Hover any element to see font, size, weight and color in hex. Click to copy. No DevTools needed.
Users
18
+2 in 30 days
Rating
0.0 / 5
unchanged in 30 days
Ratings
0
0 in 30 days
Store rank
#157K
#131K among extensions
Version
1.0.0
updated 24 May 2026
Users
monthly, 5 months
Latest, 16 Oct 2026:18 usersMove the mouse over the chart for any month
Ratings count
monthly, 5 months
Latest, 16 Oct 2026:0 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About Font & Color Inspector
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?".