Toolkist

Brand Assets Extractor

Extract colours, fonts and logos from any website URL.

Figma pluginSoon

About Brand Assets Extractor

Enter any public URL to extract brand colours, typography, logos and page metadata. Colours are ranked by CSS frequency, deduplicated to remove near-identical shades, and checked for WCAG contrast. Fonts are detected from font-family declarations and Google Fonts CDN links. Export as CSS custom properties, JSON or Markdown brand guidelines.

Why can't I fetch some sites?

Some sites block CORS proxies or serve content entirely via JavaScript. The tool works best on sites that render styles server-side.

Are requests made from my browser?

HTML is fetched through a public CORS proxy (api.allorigins.win). The URL you enter will be sent to that proxy service.

What does the Ionic palette do?

It generates all 9 Ionic colour roles with base, rgb, contrast, contrast-rgb, shade and tint CSS variables. Primary/secondary/tertiary come from the brand; success, warning, danger, dark, medium and light use Ionic's default values.

Why are some images missing?

Inline SVGs are serialised from the DOM. External image URLs are shown as thumbnails but may not load due to CORS or auth restrictions. Base64 data URLs embedded in CSS are captured directly.

Related: WCAG Contrast Checker · Colour Palette Generator

Keywords: brand colour extractor, website colour palette, extract brand assets, logo extractor, Ionic palette generator