// Extract brand assets (logos, colors, backdrop images, brand name) from any website URL. Use when building branded interfaces, generating style guides, or needing brand identity data from a URL.
| name | openbrand |
| description | Extract brand assets (logos, colors, backdrop images, brand name) from any website URL. Use when building branded interfaces, generating style guides, or needing brand identity data from a URL. |
Extract brand assets from any website URL โ logos, colors, backdrop images, and brand name.
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=your_api_key \
openbrand -- npx -y openbrand-mcp
Get your free API key at openbrand.sh/dashboard.
Once configured, use the extract_brand_assets tool with a URL to get structured brand data.
npm add openbrand
import { extractBrandAssets } from "openbrand";
const result = await extractBrandAssets("https://stripe.com");
if (result.ok) {
// result.data.brand_name โ "Stripe"
// result.data.logos โ LogoAsset[]
// result.data.colors โ ColorAsset[]
// result.data.backdrop_images โ BackdropAsset[]
}
curl "https://openbrand.sh/api/extract?url=https://stripe.com" \
-H "Authorization: Bearer your_api_key"
| Asset | Sources |
|---|---|
| Logos | Favicons, apple-touch-icons, header/nav logos, inline SVGs (with dimension probing) |
| Brand colors | theme-color meta tags, manifest.json, dominant colors from logo imagery |
| Backdrop images | og:image, CSS backgrounds, hero/banner images |
| Brand name | og:site_name, application-name, logo alt text, page title |
{
"brandName": "Stripe",
"logos": [
{ "url": "https://...", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } }
],
"colors": [
{ "hex": "#635bff", "usage": "primary" },
{ "hex": "#0a2540", "usage": "secondary" }
],
"backdrops": [
{ "url": "https://...", "description": "Hero image" }
]
}