How to Extract Brand Colors from Any Website

Why Color Extraction Matters

Colors are among the most recognizable elements of any brand. Think of Coca-Cola's red, Facebook's blue, or Spotify's green. When building tools that display brand information, getting the colors right is essential.

But extracting brand colors programmatically is harder than it sounds. Colors can be defined in CSS variables, inline styles, meta theme-color tags, SVG fills, or computed from complex stylesheets. Some sites use CSS-in-JS, others use utility frameworks like Tailwind CSS where the actual color values are buried in compiled output.

The Manual Approach (and Why It Fails at Scale)

The typical manual process involves:

1. Opening the site in a browser
2. Using the eyedropper tool or inspecting CSS
3. Guessing which colors are "primary" vs "accent"
4. Recording hex values somewhere

This works for one or two brands. For a CRM with thousands of company profiles, or an agency managing dozens of clients, it simply does not scale.

Using the Fetching Company API

The Fetching Company API handles all this complexity for you. A single API call returns structured color data:

curl https://api.fetching.company/v1/analyze \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{"url": "https://stripe.com"}'

The colors section of the response looks like this:

{
  "colors": {
    "primary": "#635bff",
    "secondary": "#0a2540",
    "accent": "#00d4aa",
    "background": "#ffffff",
    "text": "#425466"
  }
}

How We Detect Colors

Our extraction pipeline analyzes colors from multiple sources, prioritized by reliability:

1. Meta Theme Color

The <meta name="theme-color"> tag is the most explicit signal. When a site specifies this, we treat it as a strong indicator of the primary brand color.

2. CSS Custom Properties

Many modern sites define their palette using CSS custom properties. We scan for common patterns like --color-primary, --brand-color, and --theme-color.

3. Computed Styles

We analyze the actual rendered styles of key elements: the header background, primary buttons, link colors, and heading text. This catches colors that are defined through preprocessors or utility frameworks.

4. SVG and Favicon Analysis

Logo SVGs and favicons often contain the exact brand colors. We parse these to extract fill and stroke values.

Code Examples

JavaScript (Node.js)

const response = await fetch('https://api.fetching.company/v1/analyze', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ url: 'https://stripe.com' }),
});

const data = await response.json();
console.log(data.colors.primary); // "#635bff"

PHP (Laravel)

$response = Http::withToken('YOUR_API_KEY')
    ->post('https://api.fetching.company/v1/analyze', [
        'url' => 'https://stripe.com',
    ]);

$primary = $response->json('colors.primary'); // "#635bff"

Practical Applications

• Email templates: Automatically style emails in the recipient company's brand colors
• CRM enrichment: Display company profiles with accurate brand palettes
• Competitive dashboards: Track competitors' visual identity changes over time
• White-label platforms: Auto-theme portals based on client brand colors

Next Steps

Sign up for a free account to start extracting brand colors today. The free plan includes 50 credits per month, enough to analyze dozens of brands.