Website Color & Font Extractor

About the Website Color & Font Extractor

Enter a website’s address to see the colours and fonts it really uses. MySmartCoPilot’s server reads the page and up to five of its stylesheets and counts every colour value — hex, rgb(), hsl(), oklch(), lab(), named colours and the custom properties (var(--brand)) they come through — by what it colours: text, backgrounds, borders, shadows or SVG icons. Near-identical shades are merged by CIEDE2000 colour difference into a palette named after the site’s own design tokens, with the light and dark themes told apart.

The font report names each typeface and whether the site loads it (self-hosted, Google Fonts, Adobe Fonts…) or only lists it for visitors who have it installed, with the weights, styles and file formats it loads, the font lists it falls back through, and the font sizes and weights the CSS uses. You can also paste HTML or CSS — from a page behind a login or on your own computer — and it is read in your browser.

Common uses

• Rebuilding or migrating a site and needing its real colour values and fonts, not what an old style guide says.
• Matching a client’s brand colours and typefaces when all you have is their website.
• Auditing a design system: which tokens the CSS really uses, which are defined but never used, and how many near-duplicate greys crept in.
• Checking which web fonts a site loads, from where and in which weights, before you license or replace them.
• Comparing a competitor’s palette and typography with your own.

How colours are counted

Every declaration that can hold a colour is read — color, background, the border properties, outline, box-shadow, text-shadow, fill, stroke, caret-color, accent-color and the rest — with inline style attributes and the fill, stroke and stop-color attributes of inline SVG. A colour used through a custom property (color: var(--brand)) counts as a use of the colour the property holds, through chains of var(), and so do the channel patterns frameworks use: hsl(var(--primary)) (shadcn/ui), rgba(var(--bs-primary-rgb), .5) (Bootstrap) and Tailwind’s rgb(59 130 246 / var(--tw-bg-opacity)). A property that rules set to several colours — Bootstrap’s --bs-btn-bg, one for each button style — gives its first colour every use and each of the others one use of its own. #fff, #ffffff, white and rgb(255 255 255) are one colour.

Comments, @media print rules, text inside strings, scripts and <template> content are not counted. Colours are read as CSS Color Module Level 4 defines them; a colour outside the sRGB range of most screens (color(display-p3 …), a very saturated oklch()) is shown as the sRGB hex that CSS Color 4’s gamut mapping gives it and is marked wide gamut. Translucent colours (shadows and overlays) are listed apart and never merged into opaque ones.

Merging similar colours

Sites often use many shades that look the same — #333, #343434, #323232. The palette sorts colours by use and merges each one into the first colour within the chosen CIEDE2000 difference (ΔE00): Exact merges nothing, Close (ΔE00 2) only shades that are very hard to tell apart, Similar (ΔE00 5, the default) also the hover and border variants of a colour, and Loose (ΔE00 10) whole colour families. Each swatch keeps the colour the site uses most, so its value is a real one, not an average. ΔE00 is computed on CIE Lab (D65), following the implementation notes of Sharma, Wu and Dalal.

Light and dark themes

A colour counts as a dark-theme use inside @media (prefers-color-scheme: dark), in a rule for a dark-theme selector (.dark, [data-theme=dark], [data-bs-theme=dark], [data-color-mode=dark]), in a stylesheet linked with media="(prefers-color-scheme: dark)", or as the second colour of light-dark() — also inside custom properties, and in the var(--lightningcss-light, …) var(--lightningcss-dark, …) form that Lightning CSS, the compiler inside Tailwind CSS 4, writes it in for older browsers. When a dark-theme rule redefines a custom property, every use of that property also counts for its dark value, and a use inside a dark-theme rule counts only for the dark value. Theme: Light and Dark then show the two palettes apart; a site that switches themes in another way shows both together.

Fonts: what the labels mean

• Web font: the site loads it, from an @font-face rule (with where its files are: Self-hosted on the site’s own domain, Google Fonts, Adobe Fonts or another host) or from a font service’s stylesheet, whose families and weights are read from the address alone (Google Fonts CSS API).
• No web font found: named in a font list, but no @font-face rule or font-service stylesheet in what was read loads it, so visitors see it only if it is installed on their device (Arial, Segoe UI, Helvetica Neue…) — unless a script, or a stylesheet beyond the five that are read, loads it.
• Device interface font: system-ui, -apple-system, BlinkMacSystemFont and the ui- families, which give the device’s own interface fonts.
• Generic family: serif, sans-serif, monospace and the like, the browser’s last fallback (CSS Fonts Module Level 4).

First choice counts the declarations whose font list starts with the font, fallback those that list it later. Font sizes are listed largest first, with rem, pt and keyword sizes converted to pixels at the browser’s default 16 px root size. Sizes and weights set through a custom property (font-size: var(--text-sm), as Tailwind CSS 4 writes them) count as the values it holds.

The exports

The palette files use each swatch’s colour and the site’s own custom-property name where one holds it (--color-primary), otherwise its main use and a number (text-1, bg-2), and add the font lists as --font-body, --font-2…. Design tokens (JSON) follows the Design Tokens Format Module 2025.10 of the W3C Design Tokens Community Group: colours as sRGB objects with a hex fallback, font lists as fontFamily tokens. Tailwind v4 writes the colours in OKLCH inside @theme; Tailwind v3 gives a theme.extend block for the config. The .ase swatch file opens in Adobe apps such as Photoshop, Illustrator and InDesign, and the .gpl palette in GIMP and Inkscape.

How an address is read

MySmartCoPilot’s server fetches the page as MySmartCoPilotBot, follows up to five redirects, and reads at most 384 KB of HTML and 640 KB of CSS from up to five stylesheets — the site’s own first, then the others in page order, each followed by the stylesheets it @imports — and the web app manifest. Google Fonts, Bunny Fonts and Fontshare stylesheets are not fetched: their families and weights are read from the address; an Adobe Fonts kit stylesheet is read like the site’s own. Only public http:// and https:// addresses on the standard ports are read; private, local and cloud-metadata addresses are refused, also after a redirect and after a DNS check of every host (OWASP SSRF Prevention Cheat Sheet), and a stylesheet the page links on such an address is listed as not read, with the reason.

What comes back is the page’s title, its colour values, the custom properties they come through, font names, weights and sizes, and the addresses of the stylesheets read — never the rest of the page’s text, its markup or the stylesheets themselves. The result for an address is kept for up to 24 hours, so checking it again is instant; Check again reads the site afresh.

Limitations

• Styles a page adds with JavaScript after it loads (some CSS-in-JS libraries, widgets) are not in the HTML and stylesheets that are read. Copy them from your browser’s developer tools and paste them instead.
• One check reads up to five stylesheets, 640 KB of CSS and 384 KB of HTML. Stylesheets beyond that are listed, and you can paste them.
• Colours in images, videos and canvas drawings are not read: use Color Palette from Image on a screenshot for those.
• Use counts are counts of declarations and attributes, not of how much of the screen a colour covers: a background used once may fill the whole page.
• Which element gets which value of a custom property set in many rules depends on the classes in the page, so its first colour counts for every use and its other colours once each.
• Dark-theme colours are recognised by the media query, the selectors above and light-dark(); themes switched in other ways show as one palette.
• Font files are not downloaded or opened, so the weights shown are those the CSS or the font service address declares.
• Some sites answer automated requests with an error or a bot check; the report then says so, and pasting the source works instead.

Privacy

In “From a URL” mode the address goes to MySmartCoPilot’s server, which reads the page and its stylesheets and sends back only the page title, colour values, custom properties, font names, weights and sizes, and the addresses of the stylesheets it read. That result is kept for up to 24 hours under a one-way hash of the address, so a repeat check is instant; the page and the CSS are never stored, and the server log records only the host name, status and time of each request. Pasted HTML and CSS are read in your browser and never uploaded.