Website Color Palette Extractor - Brand Colors from CSS

Get the brand color and color palette of hundreds of websites in one run, from their CSS: the most used colors with their share, the neutrals (white, black, grays) kept apart, the CSS color variables (--primary, --brand...) and the theme-color.

• A primary color guess you can trust or check. The brand color comes from the site's own CSS variables named brand or primary (then accent-like names), else from its theme-color, else from the most used color. Hover and shadow variants, state colors (error, warning, success), backgrounds and pale tints are never picked. Measured on 37 well-known brands, the guess matches the real brand color 7 times out of 10. primaryColorSource tells you where it comes from.
• The full palette. Up to 12 brand colors sorted by how often the CSS uses them, plus the top neutrals, so you can pick the right shade yourself.
• Design tokens. Up to 20 CSS color variables with their values.
• Fast and cheap. The page and up to 6 stylesheets are read, no browser: $2 per 1,000 sites, where browser-based palette Actors charge up to $40.

What can I use it for?

• Design and branding research: compare the colors of a market or of competitors.
• Personalized outreach and mockups: generate a pitch, a demo or a preview in each prospect's brand color.
• Directories and dashboards: give each company card its brand color automatically.
• Accessibility and consistency audits: spot sites that use dozens of near-identical colors (distinctColors).

Input

{ "urls": ["spotify.com", "apify.com", "github.com"] }

Output

One row per website. Example from a real run (lists shortened):

{
    "url": "https://spotify.com/",
    "finalUrl": "https://open.spotify.com/",
    "status": 200,
    "primaryColor": "#1ed760",
    "primaryColorSource": "css variable --essential-bright-accent",
    "palette": [
        { "hex": "#1ed760", "count": 41, "share": 3.8 },
        { "hex": "#590810", "count": 20, "share": 1.9 }
    ],
    "neutrals": [
        { "hex": "#ffffff", "count": 286, "share": 26.7 },
        { "hex": "#000000", "count": 239, "share": 22.3 }
    ],
    "cssColorVariables": [
        { "name": "--background-highlight", "hex": "#000000" },
        { "name": "--text-bright-accent", "hex": "#ffffff" }
    ],
    "distinctColors": 120,
    "themeColor": null,
    "stylesheetsRead": 1,
    "error": null
}

share is the percentage of all color occurrences in the CSS. A color defined once but used everywhere through a variable is counted once: check cssColorVariables for design tokens.

Pricing

$0.002 per website analyzed ($2 per 1,000 sites) plus Apify's small run-start fee. No subscription, lower prices on higher Apify plans. Invalid inputs, errors and pages without any CSS color are free.

How it works, and its limits

Colors are read from the CSS (inline styles, <style> blocks and linked stylesheets), not from a rendered screenshot. Colors that only appear in images, or in styles injected later by JavaScript, are not counted. The primary color is a best guess: always look at primaryColorSource and the palette.

Use it from AI agents (MCP)

Add website-color-palette to the Apify MCP server in your MCP client (Claude, Cursor, VS Code...).

Integrations

Apify API, schedules, webhooks, Make, Zapier, n8n. Export as JSON, CSV, Excel or HTML.

FAQ

Need the logo too? Use Website Logo & Favicon Extractor.

Something wrong or missing? Open an issue on the Issues tab.