Website Scraper

Pull colours, fonts, images and links from a page.

Pull the design and content details out of any web page

Designers, developers and marketers often need the same facts about a website: which colours and fonts it uses, which images it loads, where it links and how its content is structured. The Website Scraper collects all of it from one URL in a few seconds, without browser extensions or installing anything.

What it extracts

  • Colour palette: every colour in the page's CSS, normalised to hex, with swatches and a usage count. CSS custom properties that hold colours, such as --brand, are listed too, which often reveals the design system.
  • Fonts: font families from the CSS, @font-face rules, and Google Fonts or Adobe Fonts links.
  • Images: img tags, srcset and lazy-loaded sources, the Open Graph image, favicons and background images referenced in the CSS, each with a preview.
  • Links: internal and external links with their anchor text.
  • Heading outline: the H1 to H6 structure as an indented outline, with skipped levels and multiple H1s flagged.
  • Meta data and social profiles: title, description, canonical, language and Open Graph tags, plus links to profiles on networks such as LinkedIn, X, Instagram, YouTube, Facebook and GitHub.

Ideas for using it

Build a mood board from a competitor's palette, check that your own site uses the brand colours consistently, find which web fonts a page loads before licensing them, audit heading structure for SEO and accessibility, or gather social profile links for outreach. Export everything as JSON to keep a snapshot or feed it into another tool.

The scraper reads the HTML as the server delivers it and the first five stylesheets. Single-page apps that build their content with JavaScript may show fewer results.

Frequently asked questions

Where do the colours come from?

From the page's inline styles, its style blocks and up to five linked stylesheets. Every hex, rgb and hsl value is normalised to hex and counted, so the most used colours, usually the brand palette, appear first.

How are fonts detected?

The scraper reads font-family declarations and @font-face rules in the CSS, plus Google Fonts and Adobe Fonts links in the HTML. The count shows how often each family is used in the styles.

Why are some images or colours missing?

Only the HTML the server sends and its first five stylesheets are read. Content built by JavaScript after the page loads, images set by scripts and styles in further stylesheets are not included.

Is scraping a website allowed?

Reading a public page for research, design inspiration or auditing your own site is common practice. Respect copyright and trademarks: colours and font names are facts, but logos, photos and text belong to their owners.

Can I export the results?

Yes. Download everything as one JSON file, or copy any colour by clicking its swatch.

More developer tools

All developer tools