Skip to main content
Back to Colors generators

Colors

Color Token Name Generator

Used by developers, writers, and creators worldwide.

The color token name generator creates a structured, numbered color scale using a prefix and step count you define. Instead of ad-hoc names like "blue-light" or "primary-dark", you get a consistent scale — brand-100 through brand-900 — that maps predictably from lightest to darkest. That predictability is what makes token-based systems maintainable across large codebases. Tailwind CSS, Radix UI, and Material Design 3 all use this numeric naming pattern. By mirroring those conventions, the tokens you generate here plug directly into existing workflows. Each output includes both the CSS variable name and its hex value, ready to drop into a :root block, a Figma variable collection, or a Style Dictionary JSON file.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Enter your token prefix — for example, 'brand', 'neutral', or 'accent' — in the prefix field.
  2. Set the number of scale steps you need; nine is standard, but increase to twelve for finer tonal control.
  3. Click Generate to produce the full color token scale with names and hex values.
  4. Copy the output and paste it directly into your CSS :root block, Figma variable collection, or token JSON file.

Use Cases

  • •Populating a Figma variable collection with a brand-100 to brand-900 tonal scale
  • •Seeding a Style Dictionary tokens.json with hex values for a multi-platform design system
  • •Configuring theme.extend.colors in tailwind.config.js using generated CSS custom properties
  • •Generating a 12-step neutral gray scale for accessible hover, active, and disabled states
  • •Documenting a component library's color decisions in a Storybook design system reference

Tips

  • →Generate separate scales for each role — primary, neutral, and danger — using different prefixes rather than one large scale.
  • →A nine-step scale maps cleanly to Tailwind's 100–900 range; use eleven steps if you need 50 and 950 equivalents for extreme tints and shades.
  • →After generating, assign semantic aliases (e.g. color-text-default: brand-900) so components never reference raw numeric tokens directly.
  • →For dark mode, keep the same token names but remap the hex values at the :root level inside a prefers-color-scheme media query.
  • →Cross-check your generated scale against WCAG contrast ratios — steps 600 and above typically pass 4.5:1 on white backgrounds for most hues.
  • →When naming tokens for Figma, use a forward slash in the variable name (brand/500) so Figma groups them into a collapsible nested structure.

FAQ

what is the difference between a color token and a semantic token

A color token like brand-500 is a raw value in a numbered scale. A semantic token like color-button-primary-bg maps a descriptive role to that raw token. Best practice is to generate your numeric scale first, then build a second layer of semantic tokens that reference those values — this two-layer approach makes dark mode and theming much easier to manage.

how many steps should a color scale have

Nine steps (100–900) matches Tailwind's original palette and covers most UI needs. Eleven or twelve steps give finer control for accessible contrast ratios and complex component states like hover, active, and disabled. Fewer than seven steps works for simple projects but may limit flexibility in component-level theming.

can I use the generated tokens directly in Figma variables

Yes. Open the Variables panel in Figma, create a Color collection, and name each variable using the same prefix and step number — for example, brand/500. Figma's slash syntax renders as nested groups, matching the CSS variable structure. You can also use the Tokens Studio plugin to import a JSON token file directly.