How to extract the colors and fonts from any website

Paste a URL and get the exact palette, font families, type scale, radii and shadows in seconds. Copy any value, or export as CSS, JSON or Tailwind. Free, no signup.

Steps

  1. Open the style extractor.
  2. Paste the website URL and click Extract.
  3. You get colors ranked by use, font families, the type scale, corner radii and shadows.
  4. Click any swatch to copy its hex, use "copy all" per section, or export the palette as CSS variables, JSON or a Tailwind theme.

What it reads

It parses the page's stylesheets - inline styles and linked CSS - and ranks colors by how often they appear, so the first swatches are the dominant brand colors, not one-off accents. Fonts skip generic fallbacks like sans-serif so you see the real typefaces.

When a site comes back thin

Sites that build their styles with JavaScript at runtime can return few values to a static reader. The SlopScrub extension reads the live rendered page in your browser, so it captures those correctly, plus whole sections you can reuse.

Turn a palette into a redesign

Extracting values is step one. To actually rebuild in the style, use "Copy for your AI" - it bundles the palette, fonts and tokens with an instruction that makes Claude, Cursor or ChatGPT restyle your own site to match.

FAQ

Can I get the exact fonts a website uses?

Yes. Font families are listed under Fonts; click one to copy it. Generic fallbacks are filtered out.

What formats can I export?

CSS variables, JSON, or a Tailwind theme config. You can also copy any single value or a whole section.

Does it work on any website?

Any public URL. JavaScript-heavy sites are read more accurately by the SlopScrub browser extension.