Colors, fonts, spacing — pulled from the live DOM. Export as CSS variables, Tailwind config, or JSON. No account, no API, runs locally.
Financial infrastructure for the internet. Millions of businesses use Stripe to accept payments.
Every color on the page — backgrounds, text, borders, shadows. Clustered, deduplicated, sorted by frequency.
Font families, sizes, weights. See exactly what fonts a site uses and at what sizes. Click to copy any value.
Padding and margin values extracted and organized into a usable spacing scale. See the grid they built on.
One click: complete :root block with --color, --font, and --space custom properties. Paste into your project.
Export as a ready-to-use tailwind.config.js with extend colors, fontFamily, and spacing. Drop in and go.
Structured JSON with all tokens. Feed into Figma plugins, Style Dictionary, design tooling pipelines.
Add DesignGrab from the Chrome Web Store. Works on Chrome, Edge, Brave, Arc, Opera — any Chromium browser.
Navigate to the site whose design you want to extract. Landing pages, dashboards, portfolios — anything.
DesignGrab scans up to 2,000 elements, extracts every color, font, and spacing value, clusters similar colors, and presents the results in under a second.
Click any value to copy it. Or export the entire design system as CSS Variables, Tailwind config, or JSON.
| Feature | ColorZilla | WhatFont | CSS Scan ($69) | DesignGrab ($29) |
|---|---|---|---|---|
| Full color palette | 1 at a time | No | Per element | Entire site |
| Typography extraction | No | Name only | Per element | All fonts + specs |
| Spacing scale | No | No | No | Full scale |
| CSS Variables export | No | No | No | One click |
| Tailwind export | No | No | No | One click |
| Price | Free | Free | $69 | $29 |
No subscription. No account. Pay once, use forever.