CSS Color Extractor

What does CSS Color Extractor do?

CSS Color Extractor fetches any website and parses all CSS — both linked external stylesheets and inline <style> blocks — to extract every color value used on the page. It returns a complete, deduplicated color palette with usage counts, normalized hex values, and the CSS properties each color appears in. Supports all standard CSS color formats: hex (#ff5733), RGB/RGBA, HSL/HSLA, and named CSS colors (red, coral, rebeccapurple).

The extractor is pure HTTP — no browser, no JavaScript execution. It's fast, cheap, and scales to dozens of URLs in a single run. Great for design audits, brand consistency checks, or building color inventory reports across many sites.

---

Who is CSS Color Extractor for?

🎨 UI/UX Designers & Design Systems Teams

• Audit a live site's CSS to extract the full color palette actually used in production
• Check brand consistency before and after a redesign — compare extracted palettes across two domains
• Export color data to Figma, Sketch, or your design system tool via JSON/CSV

🔍 Front-end Developers & Code Reviewers

• Discover unused or undocumented color variables in legacy CSS
• Identify color inconsistencies across pages — e.g., 12 slightly different shades of grey
• Generate an objective palette report from a client's site without manually reading CSS files

🏢 Marketing & Brand Teams

• Verify third-party agencies or freelancers have implemented your brand colors correctly
• Monitor a brand's website over time with scheduled runs and alerting via Zapier/Make
• Quickly document a competitor's color palette for competitive analysis

🛠️ Digital Agencies & Consultants

• Batch-analyze client websites for accessibility or branding audits
• Feed extracted color palettes into automated WCAG contrast checks
• Build color inventory reports as part of technical website audits

---

Why use CSS Color Extractor?

• ✅ No browser overhead — pure HTTP with got-scraping + Cheerio, runs in milliseconds
• ✅ All CSS formats supported — hex (3, 4, 6, 8 chars), rgb/rgba, hsl/hsla, all 148 CSS named colors
• ✅ Deduplication with usage counts — know which colors are dominant, which are one-offs
• ✅ Normalized output — optional conversion of all formats to hex for easy comparison
• ✅ Inline + external CSS — parses <style> tags, style= attributes, and linked .css files
• ✅ Multi-URL batch runs — analyze dozens of pages in one run
• ✅ Scheduled monitoring — detect color changes on a site over time
• ✅ Exports to JSON, CSV, Excel — works natively with Apify's storage and export tools
• ✅ No API key or login required

---

What data can you extract?

Each color in the palette is returned as a structured record:

Field	Type	Description
url	string	The page URL the color was extracted from
color	string	Original color value as found in CSS (e.g. hsl(230, 6%, 44%))
colorNormalized	string	Normalized hex value (e.g. #696c77). null if normalization is off
format	string	Color format: hex, rgb, rgba, hsl, hsla, or named
usageCount	number	Number of times this color (after normalization) appears in CSS
properties	string	CSS properties where the color was found (e.g. background-color, color)
sources	string	Where the color was found: inline-<style>, inline-style-attr, or stylesheet filename

Example output record:

{
  "url": "https://example.com",
  "color": "hsl(221, 87%, 60%)",
  "colorNormalized": "#4078f2",
  "format": "hsl",
  "usageCount": 8,
  "properties": "color",
  "sources": "main.css"
}

---

How much does it cost to extract CSS colors from a website?

This Actor uses pay-per-event pricing — you pay only for what you analyze. No monthly subscription. All platform costs are included.

	Free	Starter ($29/mo)	Scale ($199/mo)	Business ($999/mo)
Per URL analyzed	$0.0023	$0.002	$0.00156	$0.0012
10 URLs	$0.028	$0.025	$0.020	$0.017
100 URLs	$0.235	$0.205	$0.161	$0.125

Plus a one-time run start fee of $0.005 per run.

Real-world cost examples:

Input	URLs	Duration	Cost (Free tier)
Single landing page	1	~3s	~$0.007
Small site audit	10	~30s	~$0.028
Large site palette	50	~2 min	~$0.12

Higher-tier plans get additional volume discounts.

On the free plan ($5 credit), you can analyze roughly 2,000 URLs before spending any money.

---

How to extract CSS colors from a website

1. Open the CSS Color Extractor on Apify Store
2. Click "Try for free" (no credit card needed for the free tier)
3. Enter one or more URLs in the URLs to analyze field
4. Configure options: choose whether to include named colors, normalize to hex, and how many stylesheets to fetch per page
5. Click "Start" — results appear in seconds
6. Export the color palette as JSON, CSV, or Excel from the dataset tab

Example input for a basic run:

{
  "urls": ["https://example.com"],
  "includeInlineStyles": true,
  "includeNamedColors": true,
  "normalizeColors": true,
  "maxStylesheets": 20
}

Example input for a multi-site brand audit:

{
  "urls": [
    "https://brand-site.com",
    "https://brand-site.com/about",
    "https://brand-site.com/products"
  ],
  "normalizeColors": true,
  "maxStylesheets": 10,
  "includeNamedColors": false
}

Example input with proxy (for sites behind rate limits):

{
  "urls": ["https://target-site.com"],
  "normalizeColors": true,
  "proxyConfiguration": { "useApifyProxy": true, "apifyProxyGroups": ["SHADER"] }
}

---

Input parameters

Parameter	Type	Default	Description
urls	array	required	List of URLs to extract CSS colors from
includeInlineStyles	boolean	true	Parse colors from inline style= attributes
includeNamedColors	boolean	true	Include named CSS colors (red, transparent, etc.)
normalizeColors	boolean	true	Convert all colors to hex for deduplication
maxStylesheets	integer	20	Max linked CSS files to fetch per page (1–100)
timeoutSecs	integer	30	HTTP request timeout in seconds (5–120)
proxyConfiguration	object	none	Proxy settings (optional — most sites work without)

---

Output examples

Single URL — example.com:

[
  {
    "url": "https://example.com",
    "color": "#eee",
    "colorNormalized": "#eeeeee",
    "format": "hex",
    "usageCount": 1,
    "properties": "background",
    "sources": "inline-<style>"
  },
  {
    "url": "https://example.com",
    "color": "#348",
    "colorNormalized": "#334488",
    "format": "hex",
    "usageCount": 1,
    "properties": "color",
    "sources": "inline-<style>"
  }
]

Real site — apify.com (top 3 colors by usage):

[
  {
    "url": "https://apify.com",
    "color": "hsl(230, 6%, 44%)",
    "colorNormalized": "#696c77",
    "format": "hsl",
    "usageCount": 39,
    "properties": "color",
    "sources": "inline-style-attr"
  },
  {
    "url": "https://apify.com",
    "color": "transparent",
    "colorNormalized": "transparent",
    "format": "named",
    "usageCount": 22,
    "properties": "background, background-color, color",
    "sources": "inline-<style>"
  },
  {
    "url": "https://apify.com",
    "color": "hsl(230, 8%, 24%)",
    "colorNormalized": "#383a42",
    "format": "hsl",
    "usageCount": 13,
    "properties": "color",
    "sources": "inline-style-attr"
  }
]

---

Tips for best results

• 🔢 Start small — test with 1-2 URLs first to verify the output matches your expectations before running a large batch
• 🎨 Use normalizeColors: true — this converts rgb(255, 87, 51) and #ff5733 to the same hex value, making deduplication accurate across format variants
• 📋 Filter by usageCount — after export, sort by usage count to find dominant brand colors vs. one-off utility colors
• 🔗 Increase maxStylesheets for SPA/heavy sites — some React/Vue apps load many CSS chunks; increase to 50 if you're missing colors
• 🚫 Disable includeNamedColors if you only want actual color values — this filters out transparent, inherit, currentColor, etc.
• ⏱️ Schedule regular runs — detect unauthorized color changes on a site with a weekly scheduled run and Slack/email webhook alerts
• 🌍 No proxy needed for most sites — the extractor is making plain HTTP requests to CSS files, not scraping user content. Only add proxy if you encounter 403 errors.
• 📊 Combine with color-contrast-checker — feed this actor's output into Color Contrast Checker for automated WCAG accessibility audits

---

Integrations

CSS Color Extractor works natively with Apify's integration ecosystem:

CSS Color Extractor → Google Sheets Export the palette as CSV and import to Sheets for team review. Or use Apify's Google Sheets integration to push results directly as they're scraped — great for weekly brand audits tracked in a living document.

CSS Color Extractor → Slack/Discord (change monitoring) Set up a scheduled run + webhook: if usageCount for your primary brand color drops to 0 (color removed from site), send a Slack alert. Useful for catching unauthorized CSS changes on production sites.

CSS Color Extractor → Make / Zapier (automated pipeline) Chain with an HTTP action in Make to POST the palette to your design system API, or trigger a Figma plugin that syncs extracted colors to your library.

CSS Color Extractor → Color Contrast Checker (WCAG audit) Use the output palette from this actor as input to Color Contrast Checker to automatically verify text/background color combinations meet WCAG 2.1 AA/AAA standards.

Scheduled monitoring runs Use Apify Scheduler to run weekly — track how a site's color palette evolves over time, or alert on regressions.

---

Using the Apify API

Run this Actor programmatically via the Apify API. Replace YOUR_API_TOKEN with your token from Apify Console.

Node.js:

import { ApifyClient } from 'apify-client';

const client = new ApifyClient({ token: 'YOUR_API_TOKEN' });

const run = await client.actor('automation-lab/css-color-extractor').call({
  urls: ['https://example.com', 'https://another-site.com'],
  normalizeColors: true,
  maxStylesheets: 20,
});

const { items } = await client.dataset(run.defaultDatasetId).listItems();
console.log(items);

Python:

from apify_client import ApifyClient

client = ApifyClient('YOUR_API_TOKEN')

run = client.actor('automation-lab/css-color-extractor').call(run_input={
    'urls': ['https://example.com'],
    'normalizeColors': True,
    'maxStylesheets': 20,
})

for item in client.dataset(run['defaultDatasetId']).iterate_items():
    print(item['color'], item['colorNormalized'], item['usageCount'])

cURL:

curl -X POST \
  "https://api.apify.com/v2/acts/automation-lab~css-color-extractor/runs?token=YOUR_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "urls": ["https://example.com"],
    "normalizeColors": true,
    "maxStylesheets": 20
  }'

---

Use with AI agents via MCP

CSS Color Extractor is available as a tool for AI assistants that support the Model Context Protocol (MCP).

Add the Apify MCP server to your AI client — this gives you access to all Apify actors, including this one:

Setup for Claude Code

$claude mcp add --transport http apify "https://mcp.apify.com"

Setup for Claude Desktop, Cursor, or VS Code

Add this to your MCP config file:

{
    "mcpServers": {
        "apify": {
            "url": "https://mcp.apify.com"
        }
    }
}

Your AI assistant will use OAuth to authenticate with your Apify account on first use.

Example prompts

Once connected, try asking your AI assistant:

• "Use automation-lab/css-color-extractor to extract all CSS colors from https://stripe.com and show me the top 10 most-used colors"
• "Extract the color palette from https://example.com with hex normalization, then check if any colors are missing from our brand guidelines"
• "Analyze https://competitor.com's color palette and identify which colors appear most in their branding"

Learn more in the Apify MCP documentation.

---

Is it legal to extract CSS colors from websites?

Yes — CSS stylesheets are publicly served assets, analogous to reading a webpage's source code. CSS Color Extractor makes standard HTTP GET requests to fetch CSS files, the same requests your browser makes when loading a page.

We follow ethical scraping practices:

• We do not bypass authentication, CAPTCHAs, or access controls
• We only request publicly available CSS files that any browser would fetch
• We respect robots.txt conventions (CSS files are rarely restricted)
• We do not store or share any personal data — CSS color values are purely technical metadata

Always ensure your use case complies with the target site's Terms of Service and applicable laws (GDPR, CCPA, etc.). For commercial or large-scale use, consult your legal team.

---

FAQ

How fast is CSS Color Extractor? Very fast — each URL typically takes 2-10 seconds depending on the number of external stylesheets and their sizes. Pure HTTP with no browser means minimal overhead. A batch of 50 URLs usually completes in under 2 minutes.

How much does it cost for 100 URLs? On the Free tier, approximately $0.23 ($0.005 start + 100 × $0.0023). On the Starter plan ($29/mo), about $0.21. On the Scale plan ($199/mo), about $0.16.

Why does it find fewer colors than I expected? Most modern websites use CSS-in-JS (styled-components, Emotion, Tailwind JIT) where styles are injected dynamically at runtime — these are invisible to a pure HTTP parser since no browser executes JavaScript. If the site heavily relies on CSS-in-JS, consider using a browser-based approach. For traditional CSS files and <style> blocks, coverage is complete.

Why are some stylesheet colors missing? Check if maxStylesheets is too low — the default is 20, but some sites have 30+ CSS chunks. Increase it. Also, some CSS files are loaded conditionally via JavaScript and won't appear in the HTML's <link> tags.

What's the difference between color and colorNormalized? color is the raw value from the CSS (e.g. hsl(221, 87%, 60%)). colorNormalized is its hex equivalent (#4078f2). Normalization enables accurate deduplication — the same color in different formats is counted as one entry rather than three.

Does it handle CSS variables (--primary-color)? Not in the current version — CSS variables are resolved at render time in the browser. This extractor captures the literal values in your CSS files. Variable definitions themselves (e.g. --brand: #ff5733) are not extracted, but any place a literal color is used (including as a variable default) is captured.

---

Other CSS and design tools

Explore other free automation-lab tools for web design and accessibility:

• 🎨 Color Contrast Checker — check foreground/background color pairs against WCAG 2.1 AA/AAA contrast standards
• 🔧 JSON Schema Generator — generate JSON Schema from any JSON sample