Page Inspector
Analyze any live web page — its fonts, colors, images, and SVGs. Runs as a bookmarklet on any site.
Live demo — this analyzed this page. Install the bookmarklet below to inspect any website.
Analyzing this page…
Use on any page (bookmarklet)
Want Page Inspector without leaving the page you're on? Drag the button below to your bookmarks bar, then click it on any website to open Page Inspector right there — it runs entirely in your browser.
Use responsibly: a bookmarklet runs on whatever page you click it on. Avoid sensitive sites such as online banking, payment, or healthcare pages — you run it at your own risk. Everything is processed locally and no data is sent anywhere. See our Terms.
- Show your bookmarks bar if it's hidden — Ctrl+Shift+B (⌘+Shift+B on Mac).
- Drag the button above onto the bookmarks bar.
- Open any website and click the bookmark — the Page Inspector panel appears in the top-right corner. Use ✛ to move it between corners, or ›/‹ to tuck it against the edge and pull it back out.
- Click the bookmark again (or the ✕) to close it.
Note: a few sites with strict security policies may block bookmarklets.
Examples
Identify a website's fonts
Input
Click the bookmarklet on any page → Fonts tab
Output
Inter — 400/600/700 · 142× Roboto Mono — 400 · 18×
Extract the color palette
Input
Colors tab
Output
#111827 · 308 #2563EB · 47 #F9FAFB · 22 (click to copy hex)
List images with format & size
Input
Images tab
Output
logo.svg — SVG hero.webp — WEBP · 1600×900
About this tool
Page Inspector is a free web page analyzer that reveals how any live site is built: the fonts it renders, its color palette, every image and inline SVG, its links, and a quick technical overview. It runs entirely in your browser with no upload, so it's a fast, private way to find fonts on a website, extract colors from a website, audit images, or grab an SVG icon — whether you're a designer reverse-engineering a layout, a developer debugging, or just curious.
How to use
- Try the live demo above — it analyzes this very page across the Overview, Fonts, Colors, Images, SVGs, and Links tabs.
- To inspect any other site, drag the Page Inspector button below to your bookmarks bar.
- Open any website and click the bookmark — a panel opens on top of it.
- Switch tabs to read its fonts, copy hex colors, open images, or copy inline SVG markup.
What it inspects
- Fonts — the font families actually rendered, with weights and italics, ranked by usage.
- Colors — text, background, and border colors as hex, ranked by frequency so brand colors surface first.
- Images — every <img> plus CSS background images, with format and natural dimensions.
- SVGs — inline SVG icons with a preview and one-click copy of the markup.
- Links — all links split into internal and external.
- Overview — title, meta description, canonical, DOM node count, script/stylesheet counts, and approximate HTML size.
Because it reads the rendered page, it reports the fonts and colors users actually see, not just what's declared in a stylesheet. For building the SEO tags it surfaces, pair it with the Meta Tag Generator.
Responsible use
Page Inspector is a developer and learning tool for analyzing a page's structure, styles, and media — the same information your browser's built-in developer tools already expose. It does not copy, store, or redistribute content: images and videos open in a new tab, and SVG code is shown for inspection only. All images, videos, and SVGs you view remain the property of their original owners (the website and its authors). You are solely responsible for how you use what it surfaces; do not reuse copyrighted assets without permission. See our Terms of Use.
Frequently asked questions
What does the Page Inspector show?
It analyzes a live web page and lists its fonts (with weights), the colors used for text, backgrounds, and borders, every image (with format and dimensions), the inline SVGs, the links (internal vs external), and a quick overview — title, description, DOM node count, HTML size, and more.
How do I inspect another website, not just this one?
Drag the Page Inspector button to your bookmarks bar, open any website, then click the bookmark. A panel opens on top of that page showing its fonts, colors, images, SVGs, and links. The demo on this page runs the exact same analysis on the page you're reading now.
Do I need to install an extension?
No. It's a bookmarklet — a normal bookmark whose address is a small piece of JavaScript. There's nothing to install and no permissions to grant; it only runs when you click it, and only on the tab you're viewing.
Does it find the fonts a website uses?
Yes. It reads the computed font-family of every text element, so it reports the fonts actually rendered on screen (not just what's declared in CSS), along with the weights and whether italics are used. It's a fast way to identify the typography of any site.
Can it extract the color palette of a page?
Yes. It collects the text, background, and border colors of every element, converts them to hex, and ranks them by how often they appear, so the dominant brand colors rise to the top. Click any swatch to copy its hex code.
Is my data uploaded anywhere?
No. Everything runs locally in your browser — the inspector only reads the page you're on and never sends anything to a server. There's no sign-up and it's completely free.
Why are some images or colors missing?
The inspector reads the rendered DOM, so images loaded lazily below the fold, content inside cross-origin iframes, or styles applied after you click may not appear until they're on the page. Re-scan after scrolling or interacting to pick them up.