Design Token Generator

The design token generator exports a palette as a W3C design tokens JSON document, wrapping each colour as a named token with its value and type so it can be fed into a token pipeline.

What is Design Token Generator?

The design token generator pairs a palette editor with a JSON output panel, and the document it writes is the W3C design tokens shape that transform pipelines are built to consume. The editor starts with five colours and gives each one a colour field and a delete button, plus an Add color button that appends a randomly seeded swatch. Every edit is reflected immediately in the panel beside it, which renders the full token document, and a copy button takes the whole thing.

• The structure of the output is a single color group whose keys are positional — brand-1 through brand-5 for the default five, extending as you add colours.
• Each entry is an object carrying the colour in upper-case hex as its value and the string color as its type.
• That shape is what the design token format is for: the type tells a consuming pipeline that this token is a colour, so it can be transformed into the right output for each target platform rather than being treated as an opaque string.

One detail is worth checking against your own pipeline before you paste. The emitted keys are the bare value and type pair, whereas the current draft of the format module prefixes these with a dollar sign, using $value and $type. Many toolchains accept both forms, but stricter ones — and the newer releases of the common transform libraries built around the draft — expect the prefixed spelling. If your build complains that a token has no value, that single character is usually the reason.

Names are the other thing to decide rather than accept. Positional keys are excellent for a first pass, because you get a valid document in seconds, and poor for a long-lived token set, because brand-3 tells a future reader nothing. The usual fix is to rename after generation: --primary becomes color.primary or color.brand.primary in the document, and the group structure does most of the work of organising them. Since the type is declared once per token, a rename is safe.

In use, this fits neatly between a palette and a repository. Generate or paste in the colours, copy the document into a tokens file, and let the build step turn it into CSS variables, platform constants or a theme object. With five colours regenerated per session it is also a quick way to see whether a palette has enough spread: five entries that differ only in lightness will look repetitive in the JSON, which is a useful early signal that the palette needs more range.

• What it does not do is scoped or nested tokens, gradients, numeric scales or the other token types a full design system eventually needs — this is a colour exporter, and every entry has the same type.
• There is no validation of the output beyond well-formed JSON, and the group name is fixed at color.
• Within those limits, the fastest way to export design tokens from a palette is right here: build the set, copy the design tokens color document, and adjust the keys to match your naming convention on the way through — and if it is color tokens json you need rather than a broader token set, that narrowing is an advantage, since the document stays small, valid and immediately transformable.

How to use Design Token Generator

1. Edit the five starting colours, or add more with Add color.
2. Watch the design tokens panel regenerate on every change.
3. Copy the JSON document into your tokens file.
4. Rename the positional keys and add the dollar prefix to value and type if your pipeline expects it.

When to use Design Token Generator vs related tools

Use this when a palette needs to leave the browser as a machine-readable token document. Use the CSS variables exporter when you only need custom properties, or the SCSS and LESS generators for preprocessor variables. When the keys should be meaningful names you type rather than positional ones, the figma token generator produces that variant of the same document, and a lighter token shape for a smaller job is the color token generator's output.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Design Token Generator