PeekCSS — Lift colors, fonts and assets from any site.<br>Skip to content<br>Support<br>Get PeekCSS

Firefox-native · Chrome & Edge too · Actively maintained Lift colors, fonts and assets from any site.<br>Click any element to read its styles, pull a whole page’s palette, fonts and images in one pass, check contrast as you go, and export straight to CSS, SCSS, JSON or Tailwind. Everything DevTools makes you dig for, one panel away.<br>Add to your browser — free See pricing<br>No account needed to start. Pro unlocks exports, ZIP downloads & font pairing.

1 click<br>Whole-page palette, fonts and images

AA / AAA<br>Contrast checked on every color pair

~103 kB<br>No bloat, no trackers, no account to start

Built for front-end developers, designers, freelancers and anyone who rebuilds, audits or borrows from the web.

Why not just use DevTools? DevTools inspects one element. PeekCSS reads the whole page.<br>DevTools is built for debugging — it answers “why is this element doing that?” brilliantly. It was never built to answer “what is this design made of?” That question takes dozens of clicks across three panels, and you still end up copying hex codes by hand.

Task<br>Browser DevTools<br>PeekCSS

Get a page’s full color palette<br>DevToolsClick elements one by one, copy each hex by hand<br>PeekCSSOne scan — up to 120 colors, deduplicated and tallied by use

Download the images off a page<br>DevToolsNetwork tab, filter by type, right-click each asset<br>PeekCSSA thumbnail grid — save one, or all of them as a ZIP

Check text contrast<br>DevToolsHover the right swatch on the right rule, one pair at a time<br>PeekCSSEvery pair scored AA / AAA, with failures listed for the page

See which fonts a page actually uses<br>DevToolsComputed tab, per element, no overview<br>PeekCSSEvery family ranked by usage, with weights, sizes and roles

Get it into your codebase<br>DevToolsRetype values into your stylesheet<br>PeekCSSExport CSS variables, SCSS, JSON or a Tailwind config

PeekCSS doesn’t replace DevTools — keep it for debugging. This is the panel you open when you’re building, not fixing.

Overview Free account · Pro exports A page's colors and images, in one pass.<br>Scan once and get the whole design system: every color with how it's actually used, every image ready to save, and a contrast read on the text. Then export the palette in the format your codebase already speaks.<br>Palette extraction. Up to 120 deduplicated colors, each tallied by text / background / border usage.<br>Image grid + download. Every and CSS background image with thumbnails; grab one, or download all as a ZIP (Pro).<br>Export anywhere (Pro). CSS custom properties, SCSS variables, a JSON object, or a Tailwind colors config.<br>Contrast at a glance. Estimated share of text passing AA / AAA, plus a list of the pairs that fail.

Inspector Free · no account Hover, click, read the CSS.<br>A pixel-accurate overlay follows your cursor. Click any element to load its full computed CSS into the sidebar — grouped, readable, and copyable in one click.<br>Smart hover targeting. Empty containers resolve down to the nearest visible child, so you always land on what you meant.<br>Grouped properties. Typography, Colors, Spacing, Effects and Layout — with one-click copy for a value, a group, or everything.<br>Contrast built in. Every color pair shows its ratio with an AA / AAA pass-fail badge, right where you’re already looking.<br>Your units. HEX / RGB / HSL and px / rem / pt, applied everywhere from Settings.

Typography Free account · Pro pairing Every font on the page, sorted.<br>See each font family, how often it's used, its weights and sizes, and the roles it plays — then get pairing suggestions without sending a single byte about the page anywhere.<br>Usage-ranked font list. Families sorted by element count, with distinct weights and sizes per family.<br>Role breakdown. Headings / Body / UI / Other chips, with a sort-by-role toggle.<br>Privacy-first pairing (Pro). Uses Google Fonts’ public catalog after you grant access. Detected fonts never leave your machine.

-->

Built for speed Keyboard-first, always.<br>Q cycle tabs<br>W inspector on/off<br>E hover popup<br>N theme

Stop copying hex codes by hand.<br>Free forever for everyday use. Upgrade any time — one click, handled by Paddle.

Add to your browser Compare plans

Not after Pro, but PeekCSS saves you time? You can support development directly:<br>Buy me a coffee

Sponsor