---
name: brand-color-extraction
description: "Extract corporate brand colors from a live website via browser_console getComputedStyle(). Works without vision models. Use when a user wants branded visual content (decks, diagrams, HTML artifacts, infographics) matching their company's identity."
---

# Brand Color Extraction

Extract a company's brand color palette from their live website using DOM inspection — no vision model required. Use whenever a user asks for visual content that should match their corporate branding (PowerPoint decks, architecture diagrams, landing pages, infographics, etc.).

## When to Use

- User says "use our company colors" or "match the style of [website]"
- User references a specific company website for visual styling
- Any branded visual content task where the palette should come from the real brand, not a guessed theme

## Process

### Step 1: Navigate to the Company Website

```
browser_navigate(url="https://company-domain")
```

If the primary domain fails (connection reset, DNS, etc.), try common fallbacks:
- `.cloud` TLD if `.de`/`.com` fails
- `www.` prefix
- Known alternate domains

### Step 2: Extract Colors via browser_console

Run a `getComputedStyle()` JavaScript expression that collects colors from all relevant page elements. See [references/extraction-snippet.md](references/extraction-snippet.md) for the ready-to-copy snippet.

The snippet collects:
- **Link colors** (`a` elements) — typically the primary brand color
- **Heading colors** (`h1`–`h6`) — sometimes a darker variant of primary
- **Button colors** (`.wp-element-button`, `.wp-block-button__link`, `button`) — accent/secondary
- **Body background and text** — base palette
- **All CSS rule colors** scanned from stylesheets — catches custom properties, gradients, WordPress presets

### Step 3: Build the Palette

Map the extracted `rgb(r, g, b)` values to a usable palette:

| Role | Source |
|------|--------|
| Primary | Dominant link/heading color |
| Secondary | Button text or contrasting heading shade |
| Background | Body background (light sites) or darkest heading/bg (dark sites) |
| Text | Body text color |
| Accent | Button background or a third distinct color from CSS rules |

Convert `rgb(r,g,b)` to hex: `#` + each channel as 2-digit hex.

### Step 4: Apply to the Visual Content

Feed the extracted hex codes directly into the target tool:
- **PowerPoint (pptxgenjs):** `slide.background.color = "#XXXXXX"`, `text.fontColor = "#YYYYYY"`
- **Architecture diagrams (HTML/SVG):** CSS variables or inline styles
- **HTML artifacts:** `<style>` block with the palette as CSS custom properties

## Why Not Vision?

- Vision models may not be available (text-only active model, no vision keys configured)
- `getComputedStyle()` is more precise — it reads exact CSS values, not approximated pixel colors
- Works headlessly without screenshots
- Faster than screenshot + vision analysis round-trip

## Pitfalls

- **WordPress sites:** Custom preset colors are stored as CSS custom properties (`--wp--preset--color--*`). The stylesheet scan in the snippet catches these — don't rely only on computed styles of visible elements.
- **Dark vs. light sites:** Some sites have dark hero sections but light body. Check both `body` background and any `section[header]` or hero section backgrounds.
- **Connection resets:** Corporate sites may block non-browser user agents. If `browser_navigate` fails, try alternative TLDs or subdomains before giving up.
- **Logo colors ≠ CSS colors:** The logo is often an image (PNG/SVG) with its own embedded colors. CSS link/heading colors are the practical brand colors for slides and diagrams — they're what the company uses consistently across their site.
