How to Extract Brand Colors and Typography From a Website

Short answer: inspect the live page in Chrome DevTools and record the computed values for representative elements. Computed styles show the final color and font after the CSS cascade, inheritance, media queries, and overrides have been applied. Use CSS Overview for a page-wide inventory, then automate a real browser when you need the same audit across many URLs.

The result is an inventory of the site’s observed website styling. It is not proof of the company’s official brand guidelines. Confirm official colors and typefaces with brand documentation when that distinction matters.

1. Inspect one element in Chrome DevTools

Element inspection is the fastest way to answer questions such as “What hex color is this button?” or “What font does this heading use?” Chrome documents the workflow in its Inspect mode guide.

1. Open the target page in Chrome.
2. Open DevTools with Cmd+Option+C on macOS or Ctrl+Shift+C on Windows, Linux, and ChromeOS. You can also open DevTools from the browser menu.
3. Activate the element picker, then hover over a heading, paragraph, navigation link, button, footer label, and a colored section.
4. Click an element to pin it in the Elements panel.
5. In Styles, see which declarations match. In Computed, record the final applied values.

The inspection tooltip can show background color, text color, font properties, dimensions, padding, and margin. For text, capture the foreground and background together. Chrome can also display a contrast ratio for text headers. The DevTools documentation states that “A good contrast ratio is vital for readable text.” Save a contrast concern separately; do not alter the extracted color to make it pass.

What to record

Field	Example record	Why it matters
Selector or component	header a, primary button	Lets another person find the value again
Foreground	rgb(32, 33, 36)	Actual text or icon color
Background	#ffffff	Needed for contrast and component context
Font family	Inter, Arial, sans-serif	Preserves the fallback list
Font size	16px	Describes rendered hierarchy
Font weight	600	Distinguishes regular, medium, semibold, and bold
Line height	1.5 or 24px	Important for readable body text
URL, date, browser, viewport	Page URL, 2026-09-29, Chrome, 1440px	Makes the observation reproducible

Use representative roles rather than a random sample: a main heading, body paragraph, navigation link, call-to-action button, footer text, and each major colored section. If two declarations compete, the Computed panel is the source of truth for that viewport. The Styles pane is still useful for tracing the winning rule back to a stylesheet.

2. Build a page-wide inventory with CSS Overview

For a broader scan, open DevTools, choose More tools → CSS Overview, and generate an overview. Chrome’s CSS Overview documentation describes the report sections.

The Colors section groups colors found on the page, identifies low-contrast text, and lets you follow a color to the elements that use it. The Font info section groups font occurrences by size, weight, and line height and identifies affected elements. This is useful for spotting a small design token set, repeated neutrals, and accidental one-off values.

Turn the report into a usable palette

1. Export or copy the color list.
2. Normalize equivalent representations such as #fff and rgb(255, 255, 255) into one notation.
3. Group each value by role: page background, surface, body text, muted text, border, link, action, and accent.
4. Follow each color back to elements before naming its role. A color used once in an illustration may not be a design token.
5. Keep foreground/background pairs together and note any contrast warning.

CSS inspection does not capture every color in a logo, photograph, SVG used as an image, or canvas drawing. It also cannot tell you which values are part of an official brand guide. Treat rare colors cautiously and label the result as observed styling.

3. Extract typography without misreading fallbacks

Record the complete font-family declaration, not only its first item. A declaration such as "Brand Sans", Arial, sans-serif is a fallback chain. The first family may not be installed, may fail to load, or may be unavailable to some visitors. The W3C WAI CSS technique recommends selecting fonts likely to be available and defining fallbacks.

For each representative role, save family, size, weight, style, stretch when present, and line height. Check headings, body copy, buttons, navigation, and code blocks separately. A site may intentionally use a display face for headings and a system sans-serif for interface text.

Verify that a web font actually loaded

In DevTools, inspect the Network panel while reloading and filter by font. A failed font request explains why the computed result may use a fallback. The Computed panel tells you the final CSS value; the rendered face can still vary by operating system and by whether a web font finished loading before capture.

4. A repeatable browser extraction script

Manual inspection is ideal for one page. For recurring audits, run a real browser, wait for the page to settle, query representative elements, and read computed styles. The following Puppeteer script is a small starting point. It collects colors from visible elements and typography from named roles; adapt the selectors and wait conditions to the site you own or are authorized to inspect.

import puppeteer from 'puppeteer';

const url = process.argv[2] || 'https://example.com';
const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage({viewport: {width: 1440, height: 1000}, deviceScaleFactor: 1});
await page.goto(url, {waitUntil: 'networkidle2', timeout: 90000});

const result = await page.evaluate(() => {
  const selectors = ['h1', 'h2', 'p', 'nav a', 'button', 'footer', 'pre', 'section'];
  const rows = [];
  for (const selector of selectors) {
    const element = document.querySelector(selector);
    if (!element) continue;
    const style = getComputedStyle(element);
    const rect = element.getBoundingClientRect();
    if (rect.width === 0 || rect.height === 0) continue;
    rows.push({
      selector,
      text: (element.textContent || '').trim().slice(0, 120),
      color: style.color,
      backgroundColor: style.backgroundColor,
      borderColor: style.borderColor,
      fontFamily: style.fontFamily,
      fontSize: style.fontSize,
      fontWeight: style.fontWeight,
      lineHeight: style.lineHeight
    });
  }
  return {url: location.href, capturedAt: new Date().toISOString(), rows};
});

console.log(JSON.stringify(result, null, 2));
await browser.close();

Run it with node extract.mjs https://your-site.example after installing Puppeteer. For multi-page work, add a URL queue, retry navigation timeouts, save one JSON file per URL, and deduplicate values after collection.

Improve the extractor for real sites

• Wait for fonts: in the page context, await document.fonts.ready before reading styles.
• Handle lazy content: scroll incrementally and wait for images or sections that appear on scroll.
• Capture variants: run desktop and mobile viewports, and repeat with a dark-mode preference when the site supports it.
• Sample by role: weight page backgrounds and call-to-action elements more heavily than incidental decorative nodes.
• Deduplicate: normalize RGB, HSL, and hex values and retain a list of selectors for each value.
• Preserve provenance: store URL, timestamp, viewport, user agent, and selector with every observation.

Automation can report what the browser rendered; it cannot establish an official brand standard. Review the output with a designer or compare it with published brand documentation.

5. Choosing the right method

Method	Best for	Strength	Trade-off
Inspect mode	One element or one page	Immediate context and DOM mapping	Manual sampling
CSS Overview	Page-wide inventory	Groups colors and font usage	Still requires interpretation
Browser automation	Recurring or multi-page audits	Repeatable computed values	Browser setup, waiting, retries, storage

6. Troubleshooting

The color in Styles is not the color on screen

Cause: another rule, inheritance, opacity, a pseudo-element, or a variable changes the result. Fix: use Computed, inspect ::before/::after, and check opacity and background layers.

The font name is correct but the shape looks different

Cause: the preferred web font failed, loaded late, or is unavailable on the machine. Fix: inspect font requests, await document.fonts.ready, and record the full fallback list.

CSS Overview shows colors I cannot find

Cause: the value may belong to a hidden element, pseudo-element, border, shadow, or state rule. Fix: follow the value to affected elements and inspect the matching state.

The script returns empty or incomplete results

Cause: the page is client-rendered, content is lazy-loaded, or navigation finished before data appeared. Fix: wait for a meaningful selector, scroll to trigger lazy sections, await fonts, and increase the navigation timeout. Respect access controls and robots or site policies that apply to your use.

Colors change between runs

Cause: theme preferences, viewport breakpoints, personalization, animations, or rotating campaigns. Fix: fix viewport and preferences, disable animation where appropriate, capture multiple states, and keep the timestamp.

7. Performance, reliability, and cost notes

DevTools has no service cost and is usually fastest for a single lookup. Browser automation consumes CPU and memory, so reuse a browser process for a batch, limit concurrency, and avoid waiting for every third-party request when a stable content selector is available. Network-idle waits can be slow on pages with analytics or long-polling connections; a selector plus a short settle delay is often more predictable.

For reliable records, retry transient navigation failures, distinguish a timeout from an empty page, and save the raw observations alongside normalized tokens. A failed run should be visible in your audit output rather than silently producing an empty palette. Re-run at the same viewport when comparing dates.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. You can capture the rendered page first and use the image as an audit record, while still using DevTools or a browser script when you need exact computed CSS values. Its capture options include full-page shots with lazy images loaded, element capture by CSS selector, dark mode, device presets or custom viewports, custom CSS and JavaScript, waiting for a selector, delay, or network idle, and custom headers, cookies, user agents, timezone, and geolocation.

See the ScreenshotNeo API documentation for all options. This one-call example saves a WebP image:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const image = Buffer.from(await res.arrayBuffer());
await fs.promises.writeFile('shot.webp', image);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

8. Practical checklist

• Record the URL, date, browser, viewport, and theme.
• Inspect heading, body, navigation, button, footer, and section backgrounds.
• Use Computed values when declarations compete.
• Save foreground/background pairs and contrast findings separately.
• Keep complete font fallback lists.
• Use CSS Overview for grouping and browser automation for repeatability.
• Label the output as observed website styling until official documentation confirms it.

FAQ

How do I find a website’s hex colors?

Inspect an element, copy its computed color, and convert RGB or HSL to hex if your design tool requires it. Verify the value against the element’s actual background and state.

Can I identify colors inside a logo?

Only if the logo exposes those colors as inspectable CSS or inline SVG shapes. A raster image’s internal palette requires image analysis and is outside a normal CSS inventory.

Does the first font-family name prove the font is rendered?

No. It is the preferred choice in a fallback list. Check font loading and the final rendered result across the browsers and operating systems you support.

Should extracted colors replace my accessibility review?

No. Preserve the observed values, then report contrast or readability issues as a separate finding.