# Website Color Palette Extractor: Colors, Fonts & Buttons (`hydrafetch/website-color-palette-extractor`) Actor Read a site's real design system: colors by role with contrast ratios, the type scale, corner radius and button styling. - **URL**: https://apify.com/hydrafetch/website-color-palette-extractor.md - **Developed by:** [Hydrafetch](https://apify.com/hydrafetch) (community) - **Categories:** Developer tools, Other - **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks - **User rating**: No ratings yet ## Pricing from $36.00 / 1,000 results This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events. Since this Actor supports Apify Store discounts, the price gets lower the higher subscription plan you have. Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-event ## What's an Apify Actor? Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows. In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours, and optionally produces a well-defined JSON output, datasets with results, or files in key-value store. In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server. Actors are written with capital "A". ## How to integrate an Actor? If asked about integration, you help developers integrate Actors into their projects. You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready. The best way to integrate Actors is as follows. - **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use). - **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`. - **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`. - **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`. - **Any other language** — the [REST API](https://docs.apify.com/api/v2.md). For usage examples, see the [API](#api) section below. For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt). # README
Hydrafetch ## Website Color Palette Extractor: Colors, Fonts & Buttons **Read a site's real design system: colors by role with contrast ratios, the type scale, corner radius and button styling.** `Pay per result` · `No API key` · `No signup` · Powered by [Hydrafetch](https://hydrafetch.com?utm_source=apify\&utm_medium=readme\&utm_content=website-color-palette-extractor)
*** Extracts the design system a website actually paints, read from computed styles in a real browser, so a color defined through four layers of CSS variables comes back as the hex it resolved to. Colors arrive by role (background, surface, text, accent) with contrast ratios, alongside the type scale, webfont sources, corner radius, shadows, spacing and button styling. Built for design audits, competitor teardowns and generating themes from a real site. ### What you get - **Colors by role.** Background, surface, text and accent, with contrast ratios and a WCAG AA verdict, so they drop into a theme without guesswork. - **The type scale.** Family, size, weight, line height and letter spacing for h1 through body and links. - **Webfont sources.** Where the site serves each typeface from, so you can render in it rather than just name it. - **Shape and depth.** Corner radius for cards and buttons, the shadow scale and the spacing scale. - **Button styling.** Background, text color, radius, padding, border and the rendered box. Results export to JSON, CSV or Excel, or stream straight to your own database through the Apify API. ### Common use cases - **Design audits.** Capture what a site actually paints, not what its design file claims. - **Competitor teardowns.** Compare palettes, type scales and spacing across a set of sites in one run. - **Theme generation.** Seed a design token set from a real brand. - **Accessibility checks.** Find text and accent colors that fail contrast against their own background. ### Input One field: **domains**, one per line. Use bare domains like `stripe.com`, not `https://stripe.com/pricing`. ```json { "domains": [ "stripe.com", "vercel.com" ] } ``` ### Output One row per domain. A domain we cannot resolve is skipped rather than returned empty, and you are not charged for it. The run log names every one that was skipped, so a short result is never a mystery. | Field | Description | | --- | --- | | `domain` | Domain | | `mode` | Mode | | `background` | Background | | `accent` | Accent | | `headingFont` | Heading font | The table view shows the columns that scan best; the full record is in the JSON, CSV and Excel exports. #### Example output ```json { "domain": "stripe.com", "mode": "light", "background": "#ffffff", "surface": "#f8fafd", "text": "#000000", "accent": "#533afd", "headingFont": "sohne-var", "bodyFont": "sohne-var", "radius": { "card": "6px", "button": "4px", "default": "6px" }, "button": { "background": "#533afd", "color": "#ffffff", "radius": "4px", "fontSize": 16, "minHeight": 48 }, "contrast": { "textOnBackground": 21, "accentOnBackground": 6.19, "meetsAA": true }, "resolvedAt": "2026-08-22T10:14:03.000Z" } ``` ### How it works 1. Paste your domains into the input box, or point a task at a saved list. 2. Run it. Each domain is resolved on its own, so one bad entry cannot lose the batch. 3. Take the results as JSON, CSV or Excel, or have Apify push them straight to your own store. You are charged per row returned. A domain we could not resolve is skipped and costs you nothing, which means a run's cost matches what you can actually use. ### FAQ **How is this different from reading the CSS?** It reads computed styles from a real browser, so a color defined through four layers of CSS variables comes back as the hex it resolved to, and anything applied by JavaScript is included. **Why are colors labelled by role?** A ranked list of six colors leaves you guessing which one is safe behind text. Roles drop straight into a theme. **Does it work on single-page apps?** Yes. The page is rendered before the styles are read. **Why does this cost more than the other Actors?** Every run renders the page in a real browser. There is no cheap path to average that against. ### Automate it Save your input as a task and put it on a [schedule](https://docs.apify.com/platform/schedules) to keep a list current. Apify can call a webhook when a run finishes, so results land in your own system without anyone watching the run. Everything here is also available over the Apify API, which means any language with an HTTP client. ### Use it in your own stack For ongoing use, going direct is cheaper per record and adds the rest of the API: scraping, crawling, search, structured extraction, MCP access and webhooks. The same data, without the Store in the middle. ```bash curl "https://api.hydrafetch.com/v1/web/styleguide?domain=stripe.com" \ -H "X-API-Key: $HYDRAFETCH_API_KEY" ``` There are typed clients for Python, Node, Go, Ruby, Rust and PHP, and an MCP server so Claude, Cursor and Codex can call it directly. [hydrafetch.com](https://hydrafetch.com?utm_source=apify\&utm_medium=readme\&utm_content=website-color-palette-extractor) · [Docs](https://hydrafetch.com/docs?utm_source=apify\&utm_medium=readme\&utm_content=website-color-palette-extractor) · [MCP](https://hydrafetch.com/mcp?utm_source=apify\&utm_medium=readme\&utm_content=website-color-palette-extractor) ### Other Actors by Hydrafetch - [Company Enrichment API: Domain to Logo, Colors & Firmographics](https://apify.com/hydrafetch/company-enrichment-api): turn a list of domains into full company records: name, description, logo, brand colors, fonts, socials and industry. - [Bulk Company Logo Finder: Logos, Colors & Sizes by Domain](https://apify.com/hydrafetch/bulk-company-logo-finder): give it a list of domains and get a direct image URL for each company logo, with dimensions and dominant color. - [AI SEO & GEO Audit: Can ChatGPT & Perplexity Read Your Site?](https://apify.com/hydrafetch/ai-seo-geo-audit): check whether an LLM or AI agent can actually read your pages, and get the specific reasons when it cannot. ### Terms of use **The results are yours.** You keep whatever rights you have in the inputs you submit and the output you get back, and we claim none of it. What we sell is the fetching and the processing, not the data. Two things that follow from that. Third parties may hold rights in the underlying web content, and nothing here grants you rights over it. And because you choose the domains, the legality of fetching a given target and of what you do with the result is yours. Full terms: [hydrafetch.com/terms](https://hydrafetch.com/terms?utm_source=apify\&utm_medium=readme\&utm_content=website-color-palette-extractor) ### Support Something not working? Open an issue on the Issues tab with the input you used. ***
Built by Hydrafetch. Clean web data for developers and agents.
# Actor input Schema ## `domains` (type: `array`): The domains to process, one per line. Bare domains like stripe.com, without https:// or a path. ## Actor input object example ```json { "domains": [ "stripe.com", "vercel.com" ] } ``` # Actor output Schema ## `results` (type: `string`): Website Color Palette Extractor: Colors, Fonts & Buttons records (the run's default dataset). # API You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup. ## JavaScript example ```javascript import { ApifyClient } from 'apify-client'; // Initialize the ApifyClient with your Apify API token // Replace the '' with your token const client = new ApifyClient({ token: '', }); // Prepare Actor input const input = { "domains": [ "stripe.com", "vercel.com" ] }; // Run the Actor and wait for it to finish const run = await client.actor("hydrafetch/website-color-palette-extractor").call(input); // Fetch and print Actor results from the run's dataset (if any) console.log('Results from dataset'); console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`); const { items } = await client.dataset(run.defaultDatasetId).listItems(); items.forEach((item) => { console.dir(item); }); // 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs ``` ## Python example ```python from apify_client import ApifyClient # Initialize the ApifyClient with your Apify API token # Replace '' with your token. client = ApifyClient("") # Prepare the Actor input run_input = { "domains": [ "stripe.com", "vercel.com", ] } # Run the Actor and wait for it to finish run = client.actor("hydrafetch/website-color-palette-extractor").call(run_input=run_input) # Fetch and print Actor results from the run's dataset (if there are any) print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}") for item in client.dataset(run.default_dataset_id).iterate_items(): print(item) # 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start ``` ## CLI example ```bash echo '{ "domains": [ "stripe.com", "vercel.com" ] }' | apify call hydrafetch/website-color-palette-extractor --silent --output-dataset ``` ## MCP server setup ```json { "mcpServers": { "apify": { "type": "http", "url": "https://mcp.apify.com/?tools=fetch-actor-details,hydrafetch/website-color-palette-extractor" } } } ``` The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer ` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations). ## OpenAPI specification Download the OpenAPI definition: https://api.apify.com/v2/actors/tq7uWahJxk5HfQUgK/builds/5rq48vZ2FYfKSurza/openapi.json