Turn five brand colors into semantic tokens — primary, success, warning, danger, info — each with hover, active, subtle, border, strong and on-color slots, ready for CSS or Tailwind v4.
Settings
Generated locally in your browser — your settings and results never leave this page.
Name the meaning, not the color
Components should say bg-danger, not bg-red-500 — because the day danger becomes orange, or dark mode needs a different red, semantic names let the change happen in one place. This generator takes five base colors and produces the full role vocabulary: for each of primary, success, warning, danger and info, seven slots — default, hover, active, subtle, border, strong and the on-color for text.
How the slots are derived
- Each role gets an OKLCH shade scale; hover is the 600 step, active 700, subtle the 100 tint, border 300, strong 800 — the convention most mature design systems converge on.
- The on color is computed, not assumed: black or white by real WCAG ratio against the role’s default.
Worked example (Tailwind v4)
@theme {
--color-danger: #ef4444;
--color-danger-hover: #dc2626;
--color-danger-subtle: #fee2e2;
--color-danger-on: #ffffff;
/* …35 tokens total… */
}
<button class="bg-danger text-danger-on hover:bg-danger-hover">Delete</button>Accessibility notes
- Warning ambers are intrinsically light — white text frequently fails on them, and the computed on-color will honestly come back black. Verify pairs in the WCAG Contrast Checker.
- Subtle backgrounds pair with the strong text slot (danger-subtle + danger-strong) for readable alert boxes.
Limitations
- Roles cover interactive/status colors; surfaces and text neutrals belong to the Light/Dark Theme Generator.
- The 600/700 hover/active convention is a starting point — tune per component where your design calls for it.
How to use the Semantic Color Token Generator
- Pick base colors for primary, success, warning, danger and info.
- Watch the live component strip — buttons, badges, hover/active chips.
- Copy the tokens as CSS variables, Tailwind v4 @theme, or JSON.
- Use semantic names in code: bg-primary, not bg-indigo-500.
Frequently asked questions
What are semantic color tokens?
Names that encode MEANING rather than appearance: –color-danger instead of –red-500. Components reference the role; the underlying color can change (rebrands, themes, dark mode) without touching component code. This generator produces seven slots per role: default, hover, active, subtle, border, strong and the on-color.
How are hover and active derived?
From the role's OKLCH scale: hover is one step darker (600), active two (700), subtle is the 100 tint and border the 300 — the convention most design systems converge on. They are starting points; tune per component where needed.
What is the "on" token?
The text color that passes contrast on the role's default background — computed as the better of black/white by real WCAG ratio, following the on-color naming popularized by Material Design.
Warning colors look low-contrast — why?
Ambers and yellows are intrinsically light, so white text often fails on them. Check the pair in the WCAG Contrast Checker; frequently the accessible answer is dark text on warning backgrounds.
Turn a palette into design tokens
The same palette as named tokens, as CSS custom properties, and as a Figma token file.
- Color Palette GeneratorProduce the palette the tokens will describe.
- Semantic Color Token Generator you are hereGive the colours role names rather than colour names.
- Design Token GeneratorBuild the token set from those roles.
- CSS Variables GeneratorEmit the tokens as CSS custom properties.
- Figma Token JSON GeneratorEmit the same tokens in the format Figma reads.
