Website in 24 Hours

Tools › W24 Design Grabber

W24 Design Grabber · Chrome extension

Grab any website's design. Export it in one click.

Design Grabber reads the colours, fonts, type scale, spacing, corner radius, shadows and logo of the site you are on, checks contrast, and exports CSS variables, a Tailwind config or design tokens.

Add to ChromeHow it works
Colour roles & contrastType scaleCSS · Tailwind · JSON
W24 Design Grabber screenshot
What it does

Everything in one click

Colour palette

Background, surface, text, accent, border and more, each with its role. Click to copy any hex code.

Contrast check

Text, buttons and links tested against WCAG AA with the exact ratio.

Typography

Fonts plus size, weight and line height for headings, body, links, buttons and captions.

Spacing & shape

The spacing scale, corner radius, shadows and button style the site uses.

Logo & icons

Logos, favicons and the share image, with SVG logos ready to download.

Export

CSS custom properties, Tailwind theme config or a design tokens JSON file.

How it works

Four steps, under a minute

  1. Open a websiteA client's current site, or one you admire.
  2. Click W24 Design GrabberThen Grab design.
  3. Review the systemPalette, contrast, type, spacing and logo on one page.
  4. ExportCopy or download CSS, Tailwind or JSON tokens.
Screens

See it in action

Colours with roles and contrast checks.
Colours with roles and contrast checks.
Type scale, spacing and radius.
Type scale, spacing and radius.
Export CSS, Tailwind or design tokens.
Export CSS, Tailwind or design tokens.
Start from the toolbar on any site.
Start from the toolbar on any site.

Screens show the extension running on demo pages.

Questions

Good to know

Are the colours exact?

They are the values the browser computed on the page you grabbed. Check them against the brand's own guidelines before you rely on them.

Why are some CSS variables missing?

Browsers block reading stylesheets served from other domains, so only variables in readable stylesheets are listed.

Is anything uploaded?

No. Everything runs in your browser. Your last 10 grabs are kept on your device.

Need help? Visit support · Read the privacy policy.