Prism

Extract colors, typography, and images from any webpage.

Prism pulls the design system out of any webpage — colors, typography, spacing, and more — so you can reference, reuse, or rebuild it in seconds. Everything runs locally in your browser. COLORS See the colors a page actually uses, ranked by how much screen space they take up. Switch between four modes depending on what you need: - Overview — the quick, safe answer to "what colors does this page use" - Full Palette — won't miss a small-but-important accent color the way a simple frequency count would - Closest Match — snaps colors to the nearest official Material Design swatch, so you can talk about them by name - Photo Colors — reads pixels from an actual screenshot, catching gradients and photos that CSS alone misses Includes a built-in contrast checker — every text/background pairing on the page, checked against WCAG AA/AAA. Copy any swatch as hex, or export the palette as CSS variables or JSON. TYPOGRAPHY Every unique text style on the page, tagged by HTML element (H1–H5, paragraph, link, button) and labeled with its likely role (Page Title, Body Text, Navigation Link, etc). Sort by how often a style is used or by where it appears on the page. Switch to the Headings & Body view for a clean type-scale table, including tablet/mobile sizes where the page defines them. Hover any sample for full font details. TOKENS The rest of the design system: brand basics (favicon, title, theme color), CSS custom properties the page declares, corner-radius values, box-shadow styles, and the spacing scale in use. IMAGES Every image and CSS background graphic on the page in one grid, with a quick audit for missing alt text. Filter out small icons, copy a URL, or download one — or all of them — in a click. LIVE EDIT Try changes right on the page: recolor anything with a click, swap in a Google Font or your own uploaded font file, scale text size. Nothing is saved — refresh the tab and it's back to normal. EXPORT Full-page screenshot to PNG or PDF (not just what's visible — the whole page, stitched together). Or generate a one-page PDF design system report covering colors, type, spacing, radii, and shadows. Light and dark mode, your choice remembered between sessions. PRIVACY Prism does not collect, store, or transmit any data anywhere. It only reads the currently active tab when you open the popup, and everything happens locally in your browser. No accounts, no analytics, no network requests other than loading fonts you explicitly choose to preview.