Semantic Color Token Generator
From one brand color, emit primary, secondary, success, warning, error and neutral with full 50-950 scales each.
From One Brand Color to a Full Token Set
A modern design system needs more than a single brand color. It needs primary and secondary brand scales, neutral grays for backgrounds and text, plus success green, warning yellow or amber, and error red for status communication. Each of these is typically a full 50-to-950 scale, which means a complete design system has roughly 66 color tokens (6 semantic categories times 11 stops each). Building this by hand for every project is slow and error-prone. The Semantic Color Token Generator takes one brand color as input and emits the entire token set, calibrated so the semantic categories feel cohesive rather than randomly picked. The secondary brand color is generated as a complementary or analogous hue depending on which produces better contrast with the primary; the neutral scale is tinted slightly toward the primary hue so backgrounds and grays feel like part of the same family; the status colors (success, warning, error) are placed at hue angles known to be perceptually distinct from the primary and from each other. Every scale uses OKLCH spacing matching Tailwind v4 conventions for cross-system compatibility.
How Each Semantic Category Is Generated
Primary is the input brand color, expanded to an 11-stop OKLCH-spaced scale matching the same spacing as the Tailwind v4 OKLCH Palette tool. Secondary picks a complementary or analogous hue (selectable via toggle) and generates an 11-stop scale with matching chroma; the analogous option produces a more harmonious palette while the complementary option produces a stronger visual contrast. Neutral starts from the primary hue, drops chroma to roughly 0.01 to 0.02 (a subtle tint), and produces an 11-stop scale that reads as gray but feels family-related to the brand. Success uses a green hue around 145 degrees in OKLCH, calibrated to be perceptually distinct from typical primary brand colors. Warning uses an amber-yellow hue around 80 degrees, the conventional warning color for accessibility reasons (it sits in the middle of the human visible spectrum and is hard to confuse with success or error). Error uses a red hue around 25 degrees, the conventional error color. All status scales use slightly lower maximum chroma than the brand scales so they read as status indicators rather than primary brand colors.
Output Formats and Integration
The output panel offers four formats. CSS custom properties is the universal option: 66 CSS variables in a :root block, ready to paste into a stylesheet. Tailwind v4 config produces a theme.extend.colors block with all six semantic categories named and ready for utility class generation. Style Dictionary JSON produces a tokens.json file compatible with the Amazon Style Dictionary build tool, which is the industry standard for converting design tokens into platform-specific formats (iOS, Android, web). Figma variables produces a JSON file that imports as a complete Figma variable collection. The four formats cover the dominant 2026 design token toolchains. For platforms not listed, the CSS custom properties output is the easiest to transform because the names follow the convention --semantic-stop (for example --primary-500, --neutral-100, --error-700), which translates cleanly to any naming scheme.
Frequently Asked Questions
Why generate a full token set from one color?+
Three reasons. Consistency: hand-picked secondary and neutral colors often clash with the primary in subtle ways, while generated ones are mathematically related and feel cohesive. Speed: generating 66 tokens by hand takes hours, while the tool produces the same result in seconds. Iteration: changing the brand color regenerates the entire token set, which means brand exploration is cheap rather than expensive.
Can I edit individual tokens after generation?+
Yes. The output is plain CSS, JSON, or Tailwind config that can be edited like any other code. The generator is the starting point, not the final word; common edits include nudging the warning hue from amber toward more orange, tweaking the neutral chroma for a colder or warmer feel, and adjusting the secondary hue to match a co-existing brand requirement.
What hue angles do the status colors use?+
Success is at 145 degrees OKLCH (a clean green that reads as positive without being too lime or too forest). Warning is at 80 degrees (an amber-yellow that is distinguishable from success and error). Error is at 25 degrees (a red-orange that reads as alarming without being too pure red). These angles are conventional and match the status colors used by Tailwind, Radix, Material Design, and most major design systems.
Is the neutral scale truly gray, or tinted?+
Slightly tinted toward the primary hue by default, with a chroma of about 0.015 in OKLCH. The result reads as gray but feels family-related to the brand rather than a separate cold gray. A toggle lets you switch to pure-gray neutrals (chroma 0) if you want strict neutrality, which is the right pick when the primary is itself a near-gray brand color.
Does the generator work for non-Western color conventions?+
The default status hues follow Western conventions where red means error and green means success. For products targeting markets where these mappings are inverted or different (some East Asian financial contexts use red for positive and green for negative), regenerate after rotating the success and error hues manually. The tool does not enforce specific status meanings; it generates colors at named hue angles that you can re-label.
How does this differ from Tailwind v4 OKLCH Palette?+
Tailwind v4 OKLCH Palette generates a single 11-stop scale from one color, which is the right tool when you need just one named palette like brand-primary. Semantic Color Token Generator generates six full 11-stop scales (primary, secondary, neutral, success, warning, error), which is the right tool when you need a complete design system in one pass.
What design token format should I use?+
Use CSS custom properties for direct stylesheet integration; use Style Dictionary JSON for cross-platform pipelines (mobile, web, marketing); use Tailwind v4 config if you are on Tailwind v4 and want utility classes; use Figma variables if Figma is the source of truth for design tokens in your team. Many teams use two or three formats simultaneously, with Style Dictionary acting as the central source and the other formats generated downstream.
Are the generated colors accessible?+
The 50-950 spacing follows OKLCH lightness conventions that produce WCAG-compliant contrast at the predictable stop pairs (50 against 950, 100 against 800, and so on). Always verify specific text-on-background pairs with the Contrast Checker tool, since accessibility depends on the exact pair you use rather than the palette structure alone. The status colors are perceptually distinct enough to satisfy WCAG color-blind requirements, but pair them with icons or labels rather than relying on color alone.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service