How to Extract Brand Colors from a Website

Every website has a visual identity — a set of brand colors that define its look and feel. Extracting those colors programmatically opens up powerful use cases: dynamic theming, branded dashboards, competitive analysis, and design system automation.

In this guide, we'll explore how brand color extraction works and how to implement it.

Why Extract Brand Colors?

Before diving into the how, let's understand the why:

Dynamic theming — Auto-theme a customer's dashboard or widget with their brand colors
CRM enrichment — Color-code account cards and pipeline views for visual scanning
Competitive analysis — Analyze competitor color strategies at scale
Design system automation — Generate design tokens from extracted brand palettes
Directory branding — Color-code business directories and marketplace listings

How Brand Color Extraction Works

Brand color extraction is a multi-step process:

Step 1: CSS Analysis

The most direct source of brand colors: the website's stylesheets.

function extractColorsFromCSS() {
  const colors = new Set();
  
  // Check all computed styles
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        const text = rule.cssText;
        // Match hex colors
        const hexMatches = text.match(/#[0-9A-Fa-f]{3,8}/g);
        hexMatches?.forEach(c => colors.add(c.toUpperCase()));
      }
    } catch (e) {
      // Cross-origin stylesheets may be inaccessible
    }
  }
  
  return [...colors];
}

Step 2: Inline Style Analysis

Beyond stylesheets, inline styles on key elements carry brand signals:

function extractInlineColors() {
  const selectors = [
    'header', 'nav', '.navbar', '.header',
    'a', 'button', '.btn', '.button',
    'h1', 'h2', '.brand', '.logo',
  ];
  
  const colors = new Map();
  
  for (const selector of selectors) {
    const elements = document.querySelectorAll(selector);
    for (const el of elements) {
      const style = getComputedStyle(el);
      const color = style.color;
      const bg = style.backgroundColor;
      
      if (color !== 'rgb(0, 0, 0)') {
        colors.set(color, (colors.get(color) || 0) + 1);
      }
      if (bg !== 'rgba(0, 0, 0, 0)' && bg !== 'rgb(255, 255, 255)') {
        colors.set(bg, (colors.get(bg) || 0) + 1);
      }
    }
  }
  
  // Return colors sorted by frequency
  return [...colors.entries()]
    .sort((a, b) => b[1] - a[1])
    .map(([color]) => color);
}

Step 3: Heuristic Ranking

Not all colors on a page are brand colors. A good algorithm distinguishes brand colors from content colors:

Position weighting — Colors in headers and navigation matter more
Frequency analysis — Colors used consistently across the page
Element type — Button and link colors are often brand colors
Contrast with white — Brand colors typically have moderate contrast with white backgrounds
Uniqueness — Colors that appear rarely might be content images, not brand

Step 4: Logo Image Analysis

When CSS analysis is inconclusive, analyzing the logo image provides a reliable fallback:

async function extractColorsFromLogo(logoUrl) {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = logoUrl;
  
  await img.decode();
  
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // Scale down for performance
  const scale = Math.min(1, 100 / Math.max(img.width, img.height));
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;
  
  // Count color frequencies
  const colorCounts = new Map();
  for (let i = 0; i < pixels.length; i += 4) {
    const r = pixels[i], g = pixels[i + 1], b = pixels[i + 2];
    // Skip transparent and near-white pixels
    if (pixels[i + 3] < 128) continue;
    if (r > 240 && g > 240 && b > 240) continue;
    
    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
    colorCounts.set(hex, (colorCounts.get(hex) || 0) + 1);
  }
  
  return [...colorCounts.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 5)
    .map(([color]) => color.toUpperCase());
}

The Challenges of Manual Implementation

Building this yourself means dealing with:

Cross-origin stylesheets — Many sites load CSS from CDNs, inaccessible to JavaScript
CSS-in-JS frameworks — Styled Components, Emotion, CSS Modules complicate extraction
Gradient-heavy designs — When the brand uses gradients, identifying a single brand color is tricky
Minimal color usage — Some sites use mostly black/white with minimal brand color
Image-heavy logos — When the logo is a complex image, dominant color extraction needs statistical analysis
Accessibility calculations — Computing WCAG contrast ratios requires additional logic

Using a Color Palette API

A dedicated API like Brandohue handles all of this:

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

const { colors, colorPalette, contrastRatios } = await response.json();

// colors: ["#635BFF", "#0A2540", "#00D924"]
// colorPalette.dominant.hex: "#635BFF"
// contrastRatios.dominantOnWhite: 4.2

What the API provides:

Dominant brand color with label
Accent and secondary colors
Background and text colors
WCAG contrast ratios for accessibility
Confidence scores for each color
Source attribution (CSS vs logo vs mixed)

Use Cases for Extracted Brand Colors

Dynamic Dashboard Theming

function BrandedDashboard({ companyDomain }) {
  const [colors, setColors] = useState(null);
  
  useEffect(() => {
    brandohue.extract(companyDomain).then(data => {
      const root = document.documentElement;
      root.style.setProperty('--brand-primary', data.colorPalette.dominant.hex);
      root.style.setProperty('--brand-accent', data.colorPalette.accent.hex);
      setColors(data.colors);
    });
  }, [companyDomain]);
  
  if (!colors) return <Skeleton />;
  
  return (
    <div className="dashboard" style={{ 
      '--brand-primary': colors[0], 
      '--brand-accent': colors[1] 
    }}>
      <header style={{ background: colors[0] }}>...</header>
      <Chart color={colors[1]} />
    </div>
  );
}

CRM Account Cards

function AccountCard({ company }) {
  return (
    <div className="account-card" style={{ 
      borderLeft: `4px solid ${company.brandColor}` 
    }}>
      <img src={company.logo} alt={company.name} />
      <h3>{company.name}</h3>
    </div>
  );
}

Conclusion

Brand color extraction combines CSS analysis, element frequency counting, heuristic ranking, and logo image processing. Building this from scratch requires significant engineering effort and ongoing maintenance.

A color palette API handles all the complexity — CSS parsing, image analysis, accessibility calculations — in a single call, alongside the logo and metadata extraction you likely already need.

Start extracting brand colors with 1000 free credits.