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 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 Typography rows now highlight their location on the live page on hover (and on click, for Typography) — helpful on long or complex pages Image downloads (single and "Download all") now resolve the highest-resolution srcset/picture candidate instead of whatever smaller variant the browser had loaded Full-page screenshot (PNG/PDF) retries automatically on Chrome's capture rate limit, gives clearer error messages, and fails honestly instead of silently on pages that scroll an inner container Fixed a false-positive "this page scrolls a nested container" failure on sites using smooth-scroll CSS Full-page capture now walks the page once first (top to bottom, then back to the top) before capturing slices, so one-time scroll-triggered entrance animations have already played and don't get caught mid-fade in the final image Images → All Pages can now scan a whole site at once: discovers the sitemap, crawls every page, and pulls every image (with a progress/timer display and a Rescan button if it's interrupted). Requires a one-time, per-site permission prompt since it needs to read pages beyond the one you're on; browsing-based accumulation still works with no extra permission 1.2.0 Fixed full-page export hiding the navbar/header entirely instead of showing it once Tokens → CSS Variables now auto-groups by category (Colors/Typography/Spacing/etc.) with a filter box Spacing scale split into separate Margin/Padding groups, each value labeled Tight/Cozy/Comfortable/Spacious Images tab gained "This Page" vs "All Pages" sub-tabs, accumulating images per-hostname as you browse Images "Download all" now zips locally via JSZip instead of firing individual downloads Design system report PDF got more visual: real typography specimens, rendered corner-radius previews, simulated shadow previews 1.1.0 Initial Chrome Web Store release Colors (4 extraction modes), Typography (tag + inferred role labels, Most Used/Page Order sort), Images Tokens tab: CSS custom properties, corner radius, shadows, spacing scale, brand/meta info Live Edit: recolor and retype directly on the live page (resets on refresh) Export: full-page screenshot to PNG/PDF, plus a vector PDF design system report Light/dark theme with Apple-design-informed polish