Designer Browser Extensions

The "click the page, learn what they did" toolbox. Adjacent: Color Tools, Typography Tools, Accessibility Testing.

Color tooling

• ★ ColorZilla — free; the canonical eyedropper / page color analyzer; Chrome / Firefox.
• CSS Peeper — free; designer-flavored DevTools alternative; shows colors, fonts, and assets.
• Site Palette by Canva — free; extracts a palette from any page.
• Eye Dropper — free OSS; lightweight ColorZilla alternative.
• See Color Tools.

Typography

• ★ WhatFont — free; click any text → name, size, line-height, color.
• Fontanello — free; minimal alternative.
• Fonts Ninja — closed source, freemium; identifies fonts and lets you "try" them.
• See Typography Tools.

CSS / layout inspection (designer-friendly)

• ★ CSS Peeper — free; see above.
• ★ VisBug by Google — free OSS; live tweak any page (move, resize, restyle elements) without DevTools.
• Pesticide — free OSS; outline every element; good for spotting layout bugs.
• Web Developer (Chris Pederick) — free; long-running power-toolbar.
• Stylebot — free OSS; restyle any site with custom CSS; persists.
• WhatRuns / Wappalyzer — free; identify the stack a site is using.

Spacing / measurement

• ★ PixelParallel — free; measure pixel distances on a page.
• Dimensions by Felix Niklas — free OSS; ruler / measurement overlay.
• Page Ruler Redux — free; on-page ruler.

Accessibility (designer-leaning)

• ★ axe DevTools — free; the canonical a11y scanner. See Accessibility Testing.
• Stark — closed source, freemium; designer-favorite contrast / vision plugin; also a Chrome extension.
• WAVE by WebAIM — free; visual accessibility audit overlay.
• Lighthouse — built into Chrome DevTools; free; broad audit including a11y / perf.

Screenshots / capture

• ★ GoFullPage — free; full-page screenshots.
• Awesome Screenshot — closed source, freemium; capture + record + annotate.
• FireShot — closed source, freemium; long-running.
• See Mockups & Screenshots.

Web-archive / inspiration

• ★ Wappalyzer — free; identifies tech stack, including design tools.
• Mobbin — closed source, freemium; curated UI patterns from real apps.
• Refero — closed source, freemium; same shape.
• Page 2 Images — free; capture inspiration with screenshots.

Polypane (mention)

• Polypane — closed source, paid (free trial); not an extension but a standalone designer-focused browser. Multi-viewport, contrast / a11y / vision simulation, debugging in one place. Worth flagging here as the next step up from the extension stack.

Pick this if…

• Eyedrop a color anywhere: ColorZilla.
• Identify a font on a website: WhatFont.
• Live-edit any page like Figma: VisBug.
• Quickly measure pixel distances: PixelParallel or Dimensions.
• Audit accessibility in the browser: axe DevTools.
• Designer-focused dedicated browser: Polypane.