Media
5 items
Description
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 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.