A free Chrome extension, no account needed

See any website
the way a designer does.

Hover over anything on a page to read its styles. Select it to see every colour inside. Copy it into Figma as editable layers, or pull out the whole design system. It all happens in your browser.

Download the extension How to install

it's free, and there's nothing to sign up for

Version 1.1.1 · 96 KB · works in Chrome, Edge, Brave and Arc

Free foreverNo accountNothing leaves your browserMade for designers, handy for developers

Inspect

Point at anything and see how it's built.

Click the PixelPeek icon, then hover. A small card follows your mouse and shows the size, font, colours, contrast, padding and corner radius of whatever is under it. No DevTools, no digging through CSS.

  • Contrast with AA and AAA, including text on gradients
  • Press F to copy it to Figma, S to save it
  • Hold Alt to measure the space between two elements
PixelPeek's hover card showing size, font, colours and contrast on a button Contrast 5.2:1 Fill #0C66E4 Padding 12 20
The Colors card listing every colour on the selected card and inside it

Colours

Select a section. Get every colour inside it.

Most tools only show the colours of the one thing you clicked. PixelPeek also reads everything inside it, so a whole card, hero or footer gives you its full palette.

  • Fill, text, border, icon and gradient colours, with how often each is used
  • Hover a swatch, click to copy the hex
  • Gradients you can copy as CSS in one click

Copy to Figma

From the live site to editable Figma layers.

Select an element, the visible area or a whole page, press copy, then paste into Figma. You get real rectangles, text, gradients, strokes, shadows, images and icons. They are layers you can edit, not a flat screenshot.

  • One click from the panel, or F while hovering
  • Groups named after the elements they came from
  • Tells you what it had to simplify, never silently
The Design System tab showing a site's declared variables with dark-mode values

Design system

The design system the site really uses.

PixelPeek reads the variables the site's own developers wrote, with the same names and the same dark-mode values. Then it lists the colours, text styles, shadows, spacing and components the page actually uses. Nothing is guessed or generated.

  • CSS variables, with light and dark values side by side
  • Colours grouped by role, matched to the variable that holds them
  • Text styles named by where they appear: H1, Button, Link
  • Every button, input, card and badge variant, with its real values

Responsive

See the real mobile version, inside a phone.

Pick a device and the page appears inside it at its real size. PixelPeek also makes the browser act like that phone or tablet, the way Chrome's device toolbar does, so sites that serve a separate mobile page actually serve it.

  • iPhones, Pixels, Galaxys, iPads, laptops and watches
  • Mobile user agent and touch input switched on while it is open
  • Scroll the phone and only the phone moves. The page behind stays still
PixelPeek's iPhone 16 Pro Max preview showing the mobile layout of a site
The Export tab with Tailwind classes and CSS for a button

For developers

Take it straight to code.

Select any element and take it as Tailwind classes, raw CSS, or a ready-made prompt for your AI coding tool. Export the page's whole design system in the format your project already uses.

  • Tailwind classes, click one to copy it (no pointless fixed sizes)
  • Copy as AI prompt: every value, ready to paste
  • Export CSS variables, Tailwind v4, SCSS, DTCG, JSON or DESIGN.md
  • Download the whole page as one self-contained HTML file

Also included

The small things you'll use every day.

Contrast checker

Ratio and AA/AAA for any text, measured against the real background, even a gradient.

Spacing guides

Draw margin and padding, with their pixel values, right on the page.

Measure

Select one element, hold Alt over another and see the exact gap.

Assets

Images, SVGs, icons, video and CSS backgrounds, one by one or as a ZIP. Select an element to see only its assets.

Saved library

Keep the elements you like, with their CSS and Tailwind, on your own computer.

Keyboard first

F copy to Figma, S save, Esc leave. Your page stays frozen while you work.

Private by design

Free, no account, and it never phones home.

  • Runs in your browser. Everything is read and built on your own computer.
  • Nothing is sent anywhere. No analytics, no tracking, no ads, no remote code.
  • Only where you click. It runs on the tab where you press its icon, and stops when you press Esc.
  • Your library stays yours. Saved elements live in your browser's own storage.

Get it

Install in under a minute.

The complete extension is one small ZIP. Chrome Web Store listing: coming soon.

  1. 1

    Download

    Get the ZIP and unzip it anywhere. Keep the folder, Chrome reads from it.

    Download PixelPeek 1.1.1
  2. 2

    Open extensions

    In Chrome, go to chrome://extensions and turn on Developer mode (top right).

  3. 3

    Load unpacked

    Click Load unpacked, pick the unzipped folder, then click the PixelPeek icon on any page.

    Pin it from the puzzle icon for one-click access

Try it on your own website.

It's free, it's private, and it takes about a minute to set up.

Download the extension

Version 1.1.1 · 96 KB