dev-tools 4 min read

OpenBrand - Extract Brand Assets from Any URL

Free open-source tool to extract logos, colors, and brand assets from any URL using an API, npm package, or AI agent skill.

By
Share: X in
OpenBrand product thumbnail

TL;DR

TL;DR: OpenBrand is a free, open-source tool that extracts logos, color palettes, and brand assets from any website URL via API, npm package, or AI agent integration.

Source and Accuracy Notes

⚠️ This section is MANDATORY. All links must be verified from actual source, not guessed.

What Is OpenBrand?

OpenBrand is an open-source brand asset extraction toolkit developed by Tight Studio. Drop in any website URL and get back structured brand data: logos in multiple formats, dominant color palettes, and backdrop images.

The project positions itself as an open-source alternative to commercial brand asset services. It ships three interfaces:

  • REST API — call https://openbrand.sh/api/extract with a URL and your API key
  • npm package — server-side TypeScript/Python without needing an API key
  • AI agent skillnpx skills add tight-studio/openbrand for Claude Code, Cursor, Codex, Gemini CLI, and 40+ other agents

As of the main branch, the GitHub repo shows 779 stars and is MIT-licensed.

Setup Workflow

Option 1 — API call

Sign up free at openbrand.sh/dashboard for an API key.

curl "https://openbrand.sh/api/extract?url=https://stripe.com" \
  -H "Authorization: Bearer your_api_key"

Response includes brand_name, logos, colors, and backdrop_images keyed by format.

Option 2 — npm package

No API key required. Install and use from server-side code:

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[]
} else {
  // result.error.code → "ACCESS_BLOCKED" | "NOT_FOUND" | "SERVER_ERROR"
}

Option 3 — AI agent integration

Add the OpenBrand skill to any compatible agent:

npx skills add tight-studio/openbrand

After installation, the agent automatically understands how to extract brand assets — just prompt it naturally.

API Response Structure

The API returns structured JSON. For a successful extraction:

{
  "ok": true,
  "data": {
    "brand_name": "Stripe",
    "logos": [
      {
        "format": "png",
        "url": "https://openbrand.sh/logos/stripe.png",
        "width": 512,
        "height": 512
      }
    ],
    "colors": [
      {
        "hex": "#6772E5",
        "usage": "primary"
      }
    ],
    "backdrop_images": []
  }
}

Error responses include a machine-readable code field: ACCESS_BLOCKED, NOT_FOUND, SERVER_ERROR, and others for programmatic handling.

Practical Evaluation Checklist

  • Extract assets from 3 different sites (e.g. Stripe, Vercel, a random blog)
  • Check logo format diversity (SVG vs PNG vs ICO)
  • Verify color accuracy against the target site’s CSS
  • Test the npm package locally (no API key path)
  • Try with an agent skill if you have Claude Code or Cursor

Security Notes

  • The npm package runs extraction server-side — no API key required for local use
  • API calls require a bearer token; keep it out of client-side code
  • The service extracts publicly available visual assets only; no authentication-bypassing involved
  • Rate limits apply to the free API tier (check dashboard for current limits)

FAQ

Q: Is there a free tier? A: Yes. The API has a free tier with an API key. The npm package requires no key at all.

Q: How does it compare to commercial brand asset services? A: OpenBrand is MIT-licensed and self-hostable. It competes with services like Brand.dev or IconHorse but targets developers who want programmatic extraction without a paid subscription.

Q: Can I self-host it? A: The core extraction logic is open source. The hosted API at openbrand.sh is the public-facing service, but the npm package gives you local control.

Q: What formats does it return? A: Logos are returned in multiple formats including PNG and SVG. The exact set varies per brand depending on what the site exposes.

Conclusion

OpenBrand fills a specific niche: you need a logo, color palette, or brand imagery for a project and do not want to manually screenshot and extract it. The three-interface design (API, npm, AI skill) covers most developer workflows cleanly. MIT license means you can build on it freely.

Try it at openbrand.sh or check the GitHub repo at github.com/tight-studio/openbrand.