Prism

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 Need one exact pixel? Use the Eyedropper to sample any color on screen and copy its hex code instantly — your picks are kept in a 30-minute history you can revisit or clear. Includes a built-in contrast checker — every text/background pairing on the page, checked against WCAG AA/AAA, with the exact element highlighted on the page when you hover a result. 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), with style, weight, color, size, and line-height all shown inline. Hover or click a result to see exactly where it lives on the page. Sort by how often a style is used or by where it appears. Switch to the Headings & Body view for a clean type-scale table with the same full detail, including tablet/mobile sizes where the page defines them. Want to check one specific element instead of hunting through the list? Use Pick Font, click anything on the page, and get a full breakdown — family, style, weight, color, size, line-height, and a live specimen — copied to your clipboard automatically, with the last one you picked always on hand in the Typography tab. 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 — downloads always grab the highest-resolution version available, not whatever smaller size the browser happened to load. Filter out small icons, copy a URL, or download one — or all of them — in a click. Want every image across an entire site, not just the current page? Scan the whole site at once using its sitemap, with your one-time permission. 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 a cover page, colors, typography specimens, spacing, corner radii, shadows, and CSS variables. Light and dark mode, your choice remembered between sessions. PRIVACY Prism does not collect, store, or transmit any data to its developer or anyone else. It only reads the currently active tab when you open the popup, and everything happens locally in your browser. Two features make outbound network requests, both only when you explicitly trigger them: loading a Google Font preview in Live Edit, and the optional "scan entire site" feature, which fetches pages and images only from the one site you explicitly grant permission for. No accounts, no analytics, no tracking. Here's the changelog in plain text: Changelog: 1.3.4 Fixed full-page capture leaving thin black gaps between slices on some pages — chrome.tabs.captureVisibleTab() doesn't always return a bitmap at exactly the expected height, and the stitching now adapts to each slice's real captured size instead of assuming a fixed one, so nothing is left undrawn between slices 1.3.3 Full-page capture now re-checks that a slice has actually finished rendering (not just waited a fixed delay) before moving on, reducing mid-repaint artifacts on pages with heavy animation 1.3.2 Fixed full-page capture duplicating content near the bottom of the page when the final slice overlapped with the one before it Fixed a sticky/fixed header or nav that only becomes pinned partway down the page (a common "shrink on scroll" pattern) getting captured repeatedly down the exported image instead of once Full-page capture now re-measures the page's height after its warm-up scroll pass, so lazy-loaded content that grows the page doesn't throw off slice positioning PNG export from Full-page capture is now also copied to the clipboard, with a status message confirming it 1.3.1 Fixed full-page capture on website-builder previews (Duda, WordPress Customizer, etc.) that render the real site inside a nested iframe — it now finds and scrolls the actual content frame instead of capturing a single frame of the outer editor shell Fixed Live Edit color recoloring only working once per swatch — a second edit to the same color now applies correctly Live Edit color swatches are now labeled Background/Text/Accent based on how each color is actually used on the page 1.3.0 Colors: new eyedropper tool — pick any pixel on screen and copy its hex code, with an Eyedropper History section (last 30 minutes, dedup'd, one-click clear) Typography: new "Pick from page" tool — click any element on the live page to get a persistent on-page card with its full family/style/weight/color/size/line-height and a live specimen, until you close it Typography: a "Last picked" CSS card in the Typography tab keeps the most recently picked font's full details and CSS on hand, even after reopening Prism Typography list rows now show style/weight/color/size/line-height inline, not just size and weight 1.2.1 Contrast and …