Website Color Palette Extractor: Colors, Fonts & Buttons

---

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.

{
  "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

{
  "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 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.

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 · Docs · MCP

Other Actors by Hydrafetch

• Company Enrichment API: Domain to Logo, Colors & Firmographics: 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: 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?: 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

Support

Something not working? Open an issue on the Issues tab with the input you used.

---