Site Colors & Fonts – Get any site's palette and type

Get any website's colors, fonts, spacing, and contrast. Export to Figma, Tailwind, CSS, or a DESIGN.md file for AI.

Site Colors & Fonts reads a website's real CSS and turns it into a clean design system you can reuse. Click the icon and choose Scan page. A report opens in a new tab: • Colors: the main colors with their jobs (brand, accent, background, surface, text, secondary text, border), the site's own CSS variable names, and every color on the page. Switch between HEX, RGB, HSL and OKLCH. Click any value to copy it. • Fonts: every font family with its weights, a link to Google Fonts when the font is there, and all text sizes with line height and weight. • Sizes: spacing values and how often each is used, corner radius and shadows. • Contrast: the text and background pairs on the page as they are painted (transparency and opacity included), checked against WCAG 2.2 AA (Passes, Large text only, Fails, plus AAA). Text over images, gradients, filters or blend modes is marked "Check by eye" instead of getting a result. Ratios are never rounded up. • Export: save the colors, fonts and sizes as a file for your design tool, your code or an AI coding assistant, or as a palette image. Or download everything in one ZIP. Also in the popup: • Pick color: pick any color on the page, including inside images. Picked colors stay in the popup, one click to copy. • Inspect element: hover anything to see its color, background, contrast, font, line height and padding. Click to copy the color. Real CSS values, not colors guessed from a screenshot. Private by design: it runs only when you click it, on that tab. No account, no tracking, no servers: Site Colors & Fonts sends nothing itself. Scan results stay in your browser's memory and are gone when Chrome closes. Report a bug or say hi: https://isabilov.com