Free tool · no sign-up

Get any website’s brand kit.

Paste a URL and see the colours, fonts and logos the site actually uses, read from its own HTML and stylesheets. Copy them as hex codes, CSS variables or JSON.

Try · ·

What it reads

The brand as the site declares it.

Ranked by evidence rather than by eye: a colour the site names as its brand outranks one that merely appears often.

Colours

First the colours a site names as its own: custom properties called primary, brand or accent, and the theme colour a phone paints the browser bar with. Then the colours its buttons and links use, and the ones that recur across the site. Greys, near-white and near-black are listed apart, as neutrals. It reads hex, rgb, hsl, lab, lch and the oklch that Tailwind 4 writes.

Fonts

The families the site loads, from Google Fonts or its own font files, and which of them the body text and the headings use. System fallbacks such as Arial or Segoe UI are left out unless the site loads them on purpose, and icon fonts are ignored.

Logos and icons

Images the page itself labels as its logo, the app icon a phone shows, the icon in the browser tab and the image the site shares on social media. Each one opens full size.

How it works, and what it cannot see

What it fetches
The page you name and up to sixteen of its stylesheets, the way a browser starts to load it, without running its JavaScript or signing in to anything.
What it misses
A site that draws itself entirely with JavaScript returns a thinner kit, and the result says so when that is likely.
What it keeps
Nothing beyond a six-hour cache of the result, so the same site twice in an afternoon answers at once.

From brand kit to film

This is the first step of every Frame24 film.

Frame24 reads a brand from its website the same way, then applies the colours, type and logo to every scene of a product film built around the product’s real screens, with a narrator, music and captions. The extractor shows you that reading for free; the film is the part we charge for.

Brand Kit How Frame24 keeps every scene of a film in your colours, type and logo.Set up your Brand Kit Check what Frame24 read from your site and correct it before the first film.URL to video Turn the same website into an on-brand product film.

Questions

Answered plainly.

How do I find out what colors a website uses?

Paste its address into the brand kit extractor on this page. It reads the site's stylesheets and lists the colours the site names as its brand (a --primary variable or its theme colour, for example), the colours its buttons and links use, and its neutrals, each as a hex code you can copy. A browser's inspector shows the same thing one element at a time.

How can I tell what font a website is using?

The extractor lists the font families a site loads, from Google Fonts or its own font files, and marks the one its headings use. For a single element, your browser's inspector shows the computed font-family. Text drawn as an image, or fonts loaded only by JavaScript, will not appear.

Can I download a company's logo from its website?

The extractor shows the logo images, icons and social image the site publishes and opens each one full size. A logo is a trademark: use it to refer to the company, and check the company's brand guidelines or press kit before using it for anything else.

Is the brand kit extractor free?

Yes, with no account and no email, and a fair-use limit of ten sites every ten minutes. It is free because reading a brand from a website is the first step of what Frame24 sells: a product film in that brand, built around the product's real screens.

Why are some colors or fonts missing?

The extractor reads the page's HTML and stylesheets without running its JavaScript, so a site that builds its page in the browser can return a partial kit, and the result says when that is likely. Try another page of the same site, such as its pricing page.

Have the brand.
Now make the film.

Three 30-second films on a 3-day trial, card required.

Start your trial