Rendry
Extract a website's design tokens — colours, fonts & CSS
To extract a website's design tokens, capture the page with Rendry Pro and it hands you that page's colours, fonts, and spacing as reusable tokens you can export as CSS variables or JSON — captured in the same flow, processed entirely on your machine, with nothing sent to a server.
How do I get a website's colours and fonts?
Capture the page with Rendry, then open the Extract panel in the editor. It surfaces the page's palette and typography as a tidy set of design tokens — ready to drop into a project rather than eyeballed from a screenshot.
Because this is a Pro feature, you get a free preview of what Rendry found before you export, so you can see the colours and fonts a site uses without leaving the capture.
What font is a website using?
Rendry lists the typefaces a page uses, along with the sizes, weights, and line spacing that make up its type scale — so "what font is this?" becomes a tidy answer you can reuse, not a guess.
You get the full type story of the page, not just one heading, which makes it easy to rebuild a consistent hierarchy in your own work.
Can I export a site's styles as CSS variables or JSON?
Yes. Rendry exports the captured tokens as ready-to-paste CSS custom properties or as structured JSON, so they slot straight into a stylesheet, a theme file, or a design-tool import.
CSS variables suit dropping colours and spacing into a project immediately; JSON suits feeding a token pipeline or a design system. Pick whichever fits your stack.
How do I copy CSS values from a page?
Open the Extract panel after capturing and copy the values you need — colours, type, and spacing — in one click, no inspecting element-by-element and no transcribing hex codes by hand.
Everything happens locally inside the capture you already took, so you can lift the styling of a reference page without it ever leaving your browser.
How do I capture one component for a moodboard?
Use Rendry's element capture to grab a single component — a card, a button, a hero — on its own, even if it sits below the fold. You get a clean, isolated image that drops straight into a moodboard or spec.
Pair it with the design tokens from the same page and your moodboard carries both the look and the exact colours and fonts behind it. See capture one element for the full walkthrough.
Who it's for
- Front-end developers rebuilding or theming a reference page and want its colours and spacing as variables
- Designers assembling moodboards from real, live sites instead of flat screenshots
- Design-system teams who need a page's tokens in JSON to seed or compare against their own
- Anyone tired of squinting at DevTools to copy a hex code or a font name
Frequently asked questions
Is extracting design tokens free in Rendry?
Full-page capture and the built-in editor are free. Turning a page's colours, fonts, and spacing into exportable design tokens is a Pro feature ($2/mo) with a 7-day free trial. You can preview what Rendry finds before exporting, so you see the tokens up front and only the export itself is gated.
What format do the design tokens export in?
Two formats. Choose CSS custom properties to paste straight into a stylesheet or theme file, or structured JSON to feed a token pipeline or design system. Both come from the same capture, so you can grab whichever your workflow needs without re-capturing the page.
Does Rendry send the page to a server to read its styles?
No. Everything happens in your browser on your machine — the capture and the design tokens never leave your device. The only outbound call Rendry ever makes is a licence check, which carries your email and subscription status, never any page content or browsing data.
Can I get the colours and fonts from just one component?
Yes. Use element capture to isolate a single component, even one below the fold, then pull the design tokens from the same page. That gives you a clean image of the component plus the exact colours and fonts behind it — ideal for a moodboard or a component spec.
Which browsers does Rendry work in?
Rendry runs in Chromium-based browsers including Chrome, Brave, Edge, Opera, Arc, and Comet. Install it from the Chrome Web Store, capture any page, and the design token export is available on the Pro tier with a 7-day free trial.