Extract the colors and fonts of any website
Get a site’s design tokens in seconds: its most-used colors, its CSS color variables and the fonts it uses — ready to copy as CSS variables or a Tailwind theme for your own project or AI coding tool.
Free, no sign-up. Works with any public page.
How to use the Website Color & Font Extractor
- 1
Paste a link
Enter the website whose look you want to study.
- 2
Get the palette
See its colors ranked by how often they are used, its CSS color variables and its fonts.
- 3
Copy the tokens
Copy any color, or the whole palette as CSS variables or a Tailwind config.
What you can use it for
- Match the look of a reference site when you ask Claude Code or Cursor to build a page.
- Pull your client’s brand colors and fonts from their current website.
- Study how well-designed products build their palettes.
- Start a design system from colors that are already in use.
Need the whole website?
Download every page as HTML, CSS, JavaScript and images
Save one page or up to 300 pages of a site as a ZIP that opens offline — including your own pages behind a login. Back it up, read it offline, or migrate your site with Claude Code or Cursor. Plans from $3.99 a month.
Frequently asked questions
Where do the colors come from?
From the page’s stylesheets, its <style> blocks and inline styles. Colors are counted by how often they appear, so the main brand colors usually come first.
Why are some colors missing?
Colors used only inside images, SVG files or styles added later by JavaScript aren’t in the stylesheets. The tool reads up to eight linked stylesheets per page.
Can I use these fonts?
Fonts from Google Fonts are free to use and are marked as such. Other fonts may need a license from their maker — check before you use them.
What does “Copy as Tailwind” give me?
A colors object you can paste into tailwind.config.js (or a @theme block), with each color named so you can use classes like bg-brand-1.
Is it free?
Yes, free without an account, within a fair-use limit per hour.
More free tools
Website Source Code Viewer
See any page’s HTML with line numbers, copy it or save it as a file.
Open toolWebsite Technology Checker
Find the framework, CMS, CSS, analytics and hosting behind any site.
Open toolMeta Tag & Open Graph Checker
Preview the Google result and social card, and get SEO fixes.
Open toolWebsite Image & Asset Extractor
List every image, stylesheet, script, font and icon on a page.
Open tool