Font & Color Inspector

About

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?".