How to Extract Colors from Any Website

Whether you're analyzing a competitor's brand, building a design system, or just curious about the palette behind a beautiful website, extracting colors programmatically saves hours of manual eyedropper work.

In this guide, we'll cover three approaches: a free online tool, a developer API, and a DIY method with Puppeteer and Sharp.

Why Extract Colors from Websites?

Color extraction is useful for a surprising number of workflows:

• Brand analysis - Quickly understand a company's visual identity
• Design inspiration - Build mood boards from sites you admire
• Accessibility audits - Check contrast ratios across a site's palette
• Competitive intelligence - Track when competitors rebrand
• Content creation - Match social media graphics to a brand's colors
• White-label dashboards - Auto-theme your SaaS to match a client's site

Method 1: Free Online Tool (No Code)

The fastest way to extract a website's color palette is ColorPeek. Paste a URL, click analyze, and get the dominant colors in seconds.

ColorPeek renders the full page (including JavaScript-rendered content), analyzes every pixel, and returns the dominant colors with their hex, RGB, and HSL values. It also detects CSS color variables defined in stylesheets.

The free tier gives you 50 extractions per month, which is plenty for occasional use.

Method 2: ColorPeek API (For Developers)

If you need to extract colors programmatically (in a pipeline, CI/CD, or your own app), the ColorPeek API is the simplest option:

curl "https://colorpeek.grabshot.dev/api/extract?url=https://stripe.com" \
  -H "X-API-Key: your_api_key"

Response:

{
  "url": "https://stripe.com",
  "colors": [
    { "hex": "#635bff", "rgb": [99,91,255], "hsl": [243,100,68], "name": "Slate Blue", "percentage": 24.3 },
    { "hex": "#0a2540", "rgb": [10,37,64], "hsl": [210,73,15], "name": "Midnight", "percentage": 18.7 },
    { "hex": "#ffffff", "rgb": [255,255,255], "hsl": [0,0,100], "name": "White", "percentage": 31.2 }
  ],
  "cssVariables": ["--primary: #635bff", "--background: #0a2540"],
  "timestamp": "2026-02-17T01:00:00Z"
}

Node.js Example

const response = await fetch(
  'https://colorpeek.grabshot.dev/api/extract?url=https://stripe.com',
  { headers: { 'X-API-Key': process.env.COLORPEEK_KEY } }
);
const { colors } = await response.json();

// Get the dominant color
const dominant = colors[0];
console.log(`Dominant: ${dominant.hex} (${dominant.name})`);
// → Dominant: #635bff (Slate Blue)

Python Example

import requests

resp = requests.get(
    'https://colorpeek.grabshot.dev/api/extract',
    params={'url': 'https://stripe.com'},
    headers={'X-API-Key': 'your_api_key'}
)
colors = resp.json()['colors']
for c in colors:
    print(f"{c['name']}: {c['hex']} ({c['percentage']}%)")

Method 3: DIY with Puppeteer + Sharp

If you want full control, you can build color extraction yourself. Here's a minimal approach:

const puppeteer = require('puppeteer');
const sharp = require('sharp');

async function extractColors(url) {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });

  // Take a screenshot as a buffer
  const screenshot = await page.screenshot({ fullPage: true });
  await browser.close();

  // Resize to speed up analysis (we don't need pixel-perfect)
  const { data, info } = await sharp(screenshot)
    .resize(200, null, { fit: 'inside' })
    .raw()
    .toBuffer({ resolveWithObject: true });

  // Count pixel colors (simplified)
  const colorMap = new Map();
  for (let i = 0; i < data.length; i += 3) {
    const hex = '#' + [data[i], data[i+1], data[i+2]]
      .map(b => b.toString(16).padStart(2, '0')).join('');
    colorMap.set(hex, (colorMap.get(hex) || 0) + 1);
  }

  // Sort by frequency and return top 5
  return [...colorMap.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 5)
    .map(([hex, count]) => ({
      hex,
      percentage: ((count / (info.width * info.height)) * 100).toFixed(1)
    }));
}

extractColors('https://stripe.com').then(console.log);

This works, but you'll need to handle browser management, color clustering (quantization), CSS variable parsing, and scaling. For most use cases, an API like ColorPeek handles the complexity for you.

Comparing the Approaches

• Free online tool - Best for quick, occasional checks. No code needed. Try ColorPeek →
• API integration - Best for automated workflows, design tools, SaaS products. Starts at 50 free requests/month.
• DIY with Puppeteer - Best if you need full customization and don't mind maintaining the infrastructure.

Use Cases and Integrations

Auto-theme a white-label SaaS

When a new client signs up, extract their website colors and apply them as the default theme. No manual configuration needed.

Design system documentation

Run color extraction on your own site periodically. If the extracted colors drift from your design tokens, you've got a consistency bug.

SEO and content tools

Auto-generate branded social media images by pulling the target site's palette and using it as the background/accent colors.

Wrapping Up

Color extraction used to mean screenshotting a site and using an eyedropper tool. Now you can do it in a single API call, get structured data back, and integrate it into any workflow.

If you're building something that touches design, branding, or visual analysis, having programmatic color extraction in your toolkit is a force multiplier.