Color Token Generator

The color token generator turns an editable palette into an array of named token objects, each carrying a dotted name with its hex, rgb triple and hsl value.

What is Color Token Generator?

The color token generator sits between a bare list of hex codes and a full design system. You keep a palette in the editor on the left, and the panel on the right produces a JSON array in which every colour has become a token: an object with a dotted name, an uppercase hex value, a comma-separated rgb triple and an hsl string. A copy button lifts the whole array onto the clipboard, so the result can be pasted into a configuration file, a theme module or a script without editing.

The shape of each entry is worth reading once, because it determines where the output can be used:

• A dotted name such as color.brand.1, which is the convention most token tooling expects.
• An uppercase six-digit hex string.
• An rgb value as three bare numbers separated by commas rather than a quoted CSS function, which is what colour libraries and canvas code usually want.
• A complete hsl function string, ready to drop into a stylesheet.

That last point is the practical argument for generating color tokens rather than writing them. A palette that exists as hex in one file and as rgb in another has two sources of truth, and they diverge the first time someone edits only one of them. Producing all three notations from a single value means every consumer reads the same colour, whether it is a stylesheet asking for hex, a charting library asking for channels, or a hue-based tool asking for hsl. Multiplied across a palette, that removes a whole category of slow, hard-to-see bugs.

The names are the one thing the tool cannot decide for you. It emits dotted, positional paths because it has no idea what each colour is for, and positional names age badly: a token called color dot brand dot three tells a future reader nothing about whether it is a surface or a state. Treat the generated array as scaffolding and rename the entries to the roles they serve, which is what makes a palette survive a rebrand. The JSON structure, on the other hand, rarely needs editing.

In practice the output lands in three places. A plain data file imported by application code, which is the simplest case and needs no key renaming at all if you use positional lookups. A design token json file consumed by a build step, where the dotted names matter and the extra notations save conversion. And documentation, where an array of objects is easy to render as a table because every token has the same four fields in the same order.

A few things are deliberately out of scope:

• There are no types, descriptions or reference graphs, which is what separates this from a full W3C-style design token generator.
• There is no alpha channel, so translucent values have to be handled downstream.
• Names are positional — color.brand.1 through color.brand.n — because the tool cannot know what each colour is for, so the role naming is left to you.

Read it as a color token generator in the literal sense: take a palette, get back an array of self-describing colour objects with their notations already aligned. When the goal is to move a palette to color tokens with rgb and hsl side by side, or to produce a design token json file that a build can consume without a conversion step in between, this is the shortest route from the colours on screen to the file that code reads.

How to use Color Token Generator

1. Build the palette in the editor on the left.
2. Read the JSON array on the right: each colour becomes one object with name, hex, rgb and hsl.
3. Copy the array and rename the positional entries to the roles they serve before committing it.

When to use Color Token Generator vs related tools

Use this generator when a palette needs to become named, machine-readable tokens carrying more than one notation. Use the W3C-style token generator when types and descriptions are required, and the JSON exporter when a plain list of values is enough. The W3C-style token generator adds types and descriptions, and when a plain list of values is enough the JSON exporter is the lighter target.

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 Color Token Generator