Colors, fonts and tokens

Get the colors, fonts and tokens from any website.

Nyabag reads the palette, fonts and corner radius of every website you save. Copy them as CSS variables, a Tailwind v4 theme, a Tailwind v3 config or W3C design tokens JSON, with no DevTools digging and no AI guesswork in the export.

Start free
Crafted
Supercut
Squarespace
Linear
Click a swatch to copy its hex.

How extraction works

  1. Save a site

    Nyabag renders the page, then measures its HTML, CSS and screenshot.

  2. It collects the tokens

    Up to 10 colors and 6 fonts are kept. Colors get roles like background and primary, fonts get roles like heading and body, and corner radius comes along when it's measured.

  3. Copy the format you need

    Choose Copy tokens on the reference, or ask your AI tool for them with get_design_tokens.

Real output, unedited

This is exactly what Nyabag exported for a saved cursor.com page, including the fonts a page loads for small details. W3C design tokens JSON and a Tailwind v3 config are also available.

CSS variables

:root {
  --color-background: #ffffff;
  --color-color-1: #d9d5cf;
  --color-foreground: #4a443b;
  --color-accent: #34785c;
  --color-accent-1: #2d629e;
  --color-accent-2: #fb2c36;
  --color-primary: #e40014;
  --color-color-2: #f0fdf4;
  --color-accent-3: #00c758;
  --color-accent-4: #00a544;
  --font-heading: "EB Garamond", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-mono: "SFMono", monospace;
  --font-other: "CursorGothic", sans-serif;
  --font-other-5: "KaTeX Main", sans-serif;
  --font-other-6: "KaTeX SansSerif", sans-serif;
  --radius: 3px;
}

Tailwind v4

@theme {
  --color-background: #ffffff;
  --color-color-1: #d9d5cf;
  --color-foreground: #4a443b;
  --color-accent: #34785c;
  --color-accent-1: #2d629e;
  --color-accent-2: #fb2c36;
  --color-primary: #e40014;
  --color-color-2: #f0fdf4;
  --color-accent-3: #00c758;
  --color-accent-4: #00a544;
  --font-heading: "EB Garamond", sans-serif;
  --font-body: "Lato", sans-serif;
  --font-mono: "SFMono", monospace;
  --font-other: "CursorGothic", sans-serif;
  --font-other-5: "KaTeX Main", sans-serif;
  --font-other-6: "KaTeX SansSerif", sans-serif;
  --radius: 3px;
}

Good to know

  • Roles like background and primary are inferred from token names, brightness and saturation, so review them before relying on them.
  • Every font a page loads can appear, including ones only used for details like math or code.
  • Tokens appear once a save has been analyzed, and the option stays disabled until colors or fonts exist.

Who it's for

  • Designers studying how a site is built
  • Design engineers starting a theme
  • AI coding workflows that need real values, not guesses

Questions

Can I get tokens for a group of sites?

Yes. The design_brief tool sums up the shared palette, fonts, section types and typical radius of a library, a search or chosen references.

Does this use AI?

The export doesn't. It's computed from values Nyabag has already measured and stored.

Can I reuse these tokens as they are?

Treat them as a study of what a site uses. Respect the original site's brand and font licenses when you build your own.

Related features

Build your design memory before you need it.

Start free