Color Token Generator: Build a Complete Design Token System from One Color
You pick one brand color. The Color Token Generator turns it into a full color token system: eight primitive scales, 88 primitive tokens, and 31 semantic tokens for each theme. You preview the result in light and dark mode, check every key pair against WCAG, and export the tokens as CSS variables, SCSS, Tailwind CSS or W3C Design Tokens JSON.
Design teams used to spend days building color systems by hand. They exported swatches from Figma, argued about shade names, and patched dark mode at the end. This tool replaces that manual work with a repeatable process that produces consistent, accessible and developer-ready design tokens in seconds.
Key takeaways
- A color token is a named, reusable color value that your design system stores once and applies everywhere.
- Primitive tokens hold raw values; semantic tokens assign meaning; component tokens bind meaning to specific UI parts.
- OKLCH scales stay smooth and hue-consistent, so they beat HSL scales for generated palettes.
- Two theme maps (light and dark) let you ship dark mode without touching component code.
- WCAG AA requires 4.5:1 for normal text and 3:1 for UI components. Test every token pair.
- Export once, then use the same tokens in CSS, Tailwind, Figma variables and Style Dictionary.
What Is a Color Token Generator?
A design token stores a design decision as data. Instead of hard-coding #4F46E5 in two hundred places, you store it as --color-primary and reference that name everywhere. When the brand changes, you edit one value, and every button, link and badge updates.
A color token generator goes one step further. It does not just store colors; it creates them. It calculates a consistent lightness ramp, keeps the hue of your brand color intact, derives secondary and accent colors through color harmony, adds neutral grays and status colors, and then assigns every color a job inside the interface. You get a design system foundation instead of a loose palette.
People also call this tool a design token generator, a color system generator, a theme generator or a UI color palette generator. The workflow behind all of them is the same: one input color, many structured outputs.
Why Design Teams Use Color Tokens
Color tokens solve problems that raw hex codes create. Here is what you gain when you adopt them.
One source of truth
Designers and developers read the same names. A designer picks primary-600 in Figma, and a developer writes var(--color-primary-600) in CSS. Nobody copies hex codes from screenshots, and nobody guesses which blue is the "real" blue.
Fast rebranding and white-labeling
If you ship a product for several clients, tokens let you swap the whole brand layer. You regenerate the primitives from a new brand color, keep the semantic map, and your components restyle themselves. Agencies and SaaS teams use this approach to launch themed versions in hours instead of weeks.
Reliable dark mode
Dark mode fails when teams invert colors by hand. Tokens fix this because each theme maps the same semantic names to different primitives. Components never know which theme is active.
Built-in accessibility
When you define on-primary next to primary, you guarantee readable text on every filled button. You test the pair once, and the whole product inherits the result.
Scalable collaboration
Tokens give large teams a shared language. They reduce review comments, prevent one-off colors, and make design-system audits simple, because you can search for any hard-coded value that bypasses the token layer.
Primitive, Semantic and Component Tokens
A mature design system organizes color tokens in layers. The generator creates the first two layers for you and prepares the third.
| Token layer | Purpose | Example name | Example value |
|---|---|---|---|
| Primitive (also called base, core or global tokens) | Stores a raw color on a numbered scale | --color-primary-600 | #4F46E5 |
| Semantic (also called alias or role tokens) | Describes the job a color does | --color-text-muted | var(--color-neutral-600) |
| Component | Binds a semantic token to one UI part | --button-bg | var(--color-primary) |
Primitive tokens
Primitive tokens form the raw palette. The generator produces eight scales: primary, secondary, accent, neutral, success, warning, danger and info. Each scale has eleven steps from 50 (almost white) to 950 (almost black). You should never use primitives directly inside components, because their names carry no meaning about usage.
Semantic tokens
Semantic tokens carry intent. surface means "the background of a card," while border-strong means "an outline that must stay visible." Because semantic tokens reference primitives, you can retheme the interface by changing the reference, not by touching the component.
Component tokens
Component tokens sit on top. A --button-bg token can point to --color-primary today and to --color-accent in a campaign theme. The generator does not create this layer, because every product names its components differently, but its semantic output gives you a clean base to build it.
How to Use This Color Token Generator
You can generate a complete token set in five steps.
- Enter your brand color. Pick a color with the color picker, type a HEX code, or choose one of the preset brand colors.
- Choose a harmony and neutral style. Select analogous, triadic, complementary or split-complementary harmony for the secondary and accent scales, then choose tinted or pure-gray neutrals.
- Review scales, previews and contrast. Inspect the eight 11-step primitive scales, check the light and dark theme previews, and read the WCAG contrast report.
- Set the value format and prefix. Choose HEX, OKLCH or HSL output, set a token prefix, and decide whether semantic tokens reference primitives with var().
- Export your design tokens. Open the CSS, SCSS, Tailwind v4, Tailwind v3 or W3C JSON tab and copy the generated tokens into your project.
The preview panel updates instantly as you change any option, so you can explore dozens of brand directions in a few minutes. Use the preset swatches for quick starting points, or press Random brand when you need inspiration.
How the Generator Builds Each Color Scale
The generator converts your brand color into OKLCH, a color model built on the OKLab space. OKLCH describes every color with three values: lightness (L), chroma (C) and hue (H). Because the model is perceptually uniform, a change of 0.1 in lightness looks like the same visual step across blue, green and red.
Step 1: Anchor the brand color
The tool measures the lightness of your input and finds the closest step on the 11-step ramp. It then places your exact brand color on that step, so your real color always appears in the scale. A dot in the preview marks the anchor.
Step 2: Generate the lightness ramp
The remaining steps follow a fixed lightness curve, from about 98% at step 50 to about 25% at step 950. Light steps suit backgrounds and subtle fills. Middle steps suit buttons and links. Dark steps suit text and dark-mode surfaces.
Step 3: Shape the chroma
Colors lose vividness near white and black. The generator reduces chroma toward both ends of the scale, which prevents neon pastels and muddy darks. When a color falls outside the sRGB gamut, the tool lowers the chroma until the color fits, and it keeps the hue and lightness unchanged.
Step 4: Derive secondary and accent hues
You choose a color harmony. Analogous harmony shifts the hue by about 30 degrees, triadic by 120 and 240 degrees, complementary by 180 degrees, and split-complementary by 150 and 210 degrees. The generator applies the same chroma logic to these hues, so all scales feel related.
Step 5: Add neutrals and status colors
Neutrals use the brand hue with a very low chroma (tinted) or zero chroma (pure gray). Tinted neutrals make interfaces feel cohesive. Success, warning, danger and info scales use fixed hues (green, amber, red and blue) so that status meaning stays universal across brands.
Why not HSL?
HSL looks simple, but it distorts perception. A yellow and a blue with identical HSL lightness look very different in brightness, which forces designers to tweak every step by hand. OKLCH removes most of that guesswork. If you want to explore the model yourself, try the OKLCH color picker or convert existing colors with the HEX to OKLCH converter.
How to Name Color Tokens
Good names make a token system usable for years. Bad names force a rewrite. Follow these rules.
- Name primitives by hue and step. Use
primary-600, notbrand-blue-dark. The step number gives an objective position on the scale. - Name semantic tokens by purpose. Use
text-muted,surface-mutedandborder-strong. Describe the job, not the look. - Use the "on" pattern for foreground colors.
on-primaryis the text color that sits onprimary. This pattern, popular in Material Design, makes contrast pairs explicit. - Add state suffixes consistently. Use
-hover,-active,-subtleand-disabledacross every role. - Use a namespace prefix. The generator lets you set a prefix such as
color,dsor your company name, which prevents collisions with third-party CSS. - Keep names theme-agnostic. A token called
white-backgroundbreaks the moment dark mode turns it black.
How to Build Light and Dark Themes with Tokens
The generator creates two semantic maps from the same primitives. The light map uses near-white backgrounds (neutral-50 and a pure-white surface) with dark text (neutral-900). The dark map uses near-black backgrounds (neutral-950), slightly lighter surfaces (neutral-900 and neutral-800), and light text (neutral-50).
The tool also adjusts brand colors for each theme. Saturated mid-tone colors such as primary-600 work well on light backgrounds, but they look heavy on dark ones. The dark map therefore shifts interactive colors to lighter steps (usually step 400) and swaps subtle fills to the darkest steps (950), which keeps tinted backgrounds quiet on dark surfaces.
Switching themes in CSS
The CSS export includes three blocks: a light default, a prefers-color-scheme: dark media query that respects system settings, and a [data-theme="dark"] block for manual toggles. Each block also sets the color-scheme property, so native form controls and scrollbars match your theme.
This approach gives users three behaviors with one token set: automatic system theming, explicit light mode, and explicit dark mode. Your components do not need any theme-specific code.
Accessibility and WCAG Contrast
Color tokens help accessibility only when you test them. The generator runs the key checks for you in both themes.
| WCAG 2.2 requirement | Minimum ratio | Applies to |
|---|---|---|
| AA, normal text (1.4.3) | 4.5:1 | Body text, labels, links |
| AA, large text (1.4.3) | 3:1 | Text at 24px, or 18.66px bold, and above |
| AA, non-text contrast (1.4.11) | 3:1 | Input borders, icons, focus indicators |
| AAA, normal text (1.4.6) | 7:1 | Enhanced readability |
The contrast report checks text on bg, text-muted on bg, text on surface, every on-* color on its fill, and primary against the page background. It labels each pair AA, AAA or Fail.
How the tool picks "on" colors
For every filled color, the generator tests white and the darkest neutral and chooses the one with the higher contrast ratio. That is why a yellow warning button gets dark text while a deep indigo button gets white text.
What to do when a pair fails
If a pair fails, move the token to another step. Choose a darker step for light-mode fills or a lighter step for dark-mode fills. Because tokens reference primitives, you fix the problem in one place. Also test your colors for color vision deficiencies with the color-blind palette checker, since contrast ratio alone does not guarantee that people with protanopia or deuteranopia can tell two hues apart.
Remember that color should never be the only signal. Pair error colors with icons and text, and pair links with underlines or other cues.
Which Export Format Should You Choose?
The generator offers five outputs. Pick the one that matches your stack.
| Format | Best for | Dark mode method | Notes |
|---|---|---|---|
| CSS variables | Any website or web app | prefers-color-scheme and data-theme | Works everywhere, no build step |
| SCSS | Sass-based projects | Theme maps (light and dark) | Use maps with a mixin to emit CSS variables |
| Tailwind v4 | Tailwind CSS 4 projects | CSS variable override on .dark or data-theme | Uses the CSS-first @theme directive |
| Tailwind v3 | Projects with tailwind.config.js | darkMode selector plus CSS variables | Semantic names map to var() |
| W3C JSON | Style Dictionary, Figma plugins, token pipelines | Separate light and dark groups | Uses $value, $type and aliases |
HEX, OKLCH or HSL values?
Choose HEX for maximum compatibility, including email templates and legacy tools. Choose OKLCH when you want to adjust lightness or chroma directly in code and you target modern browsers. OKLCH works in current Chrome, Edge, Safari and Firefox. Choose HSL when your team already thinks in hue, saturation and lightness. You can convert any value later with the OKLCH to HEX converter.
Using Tokens in Tailwind, CSS, Figma and Style Dictionary
Tailwind CSS
Paste the Tailwind v4 export into your main CSS file after @import "tailwindcss". Tailwind then generates utilities such as bg-primary, text-on-primary and border-border. Add the dark class or data-theme="dark" attribute to the root element to switch themes. In Tailwind v3, paste the color object into theme.extend.colors and add the generated CSS variables to your global stylesheet.
Plain CSS and CSS custom properties
Copy the CSS export into a tokens.css file and import it before your component styles. Then reference tokens with var(--color-surface). CSS custom properties cascade, so you can also override tokens inside a single section, such as a promotional banner.
Sass and SCSS
Use the SCSS maps with a small mixin that loops through each key and prints a CSS variable. This pattern keeps Sass functions available while your runtime theming stays in CSS.
Figma variables
Figma variables support color types and modes, which match light and dark themes. Import the W3C JSON through a token plugin, or create variables manually by using the generated names. Keep names identical between Figma and code so handoff needs no translation.
Style Dictionary and token pipelines
Style Dictionary reads token JSON and transforms it into platform outputs for web, iOS and Android. The W3C export gives you a clean starting file. Add it to your repository, run your build, and publish one token package that every product consumes.
Common Color Token Mistakes
- Using primitives in components. Components that reference
blue-500directly cannot switch themes. Reference semantic tokens instead. - Naming tokens after their color.
red-errorbecomes wrong the day you change the error hue. Usedanger. - Inverting colors for dark mode. A mechanical inversion produces glaring whites and low-contrast accents. Build a dedicated dark map instead.
- Skipping hover, focus and disabled states. Missing state tokens push developers to invent colors during implementation.
- Ignoring non-text contrast. Input borders and focus rings need 3:1 contrast, and many palettes miss this requirement.
- Creating too many tokens. A system with hundreds of near-duplicate tokens is as hard to maintain as raw hex codes. Start with the roles you need.
- Never auditing the system. Search your codebase for hard-coded hex values every quarter and replace them with tokens.
Color Token Best-Practice Checklist
- Start from one verified brand color and generate scales from it.
- Keep three layers: primitive, semantic and component tokens.
- Reference primitives from semantic tokens with
var()or aliases. - Define light and dark semantic maps from the same primitives.
- Pair every fill with an
on-text color. - Test text pairs at 4.5:1 and UI pairs at 3:1.
- Check palettes against color vision deficiencies.
- Use a namespace prefix and consistent state suffixes.
- Store tokens in version control and treat changes like code changes.
- Document every semantic token with one sentence that explains its use.
Frequently Asked Questions About Color Tokens
What is a color token generator?
A color token generator is a tool that turns one or more base colors into a structured set of design tokens. It creates primitive color scales, maps them to semantic roles such as background, text and primary, builds light and dark themes, and exports everything as CSS variables, Tailwind config or JSON.
What is the difference between primitive and semantic color tokens?
Primitive tokens store raw color values, such as primary-600. Semantic tokens describe how you use a color, such as text-muted or primary-hover, and they point to a primitive. You change a theme by remapping semantic tokens, not by editing components.
How many shades should a color scale have?
Eleven steps (50, 100, 200 through 900, and 950) cover almost every interface need. Light steps handle backgrounds and subtle fills, mid steps handle brand and interactive colors, and dark steps handle text, borders and dark-mode surfaces.
Why does this tool use OKLCH to generate color tokens?
OKLCH separates lightness, chroma and hue in a perceptually uniform way. Equal lightness changes look equal to the human eye, so the generated scale stays smooth and keeps the hue of your brand color without the muddy or washed-out steps that HSL often produces.
How do I add dark mode with color tokens?
Define semantic tokens once for the light theme and once for the dark theme, then switch them with the prefers-color-scheme media query or a data-theme attribute. Components keep using the same token names, so you never rewrite component styles for dark mode.
Does the Color Token Generator check WCAG contrast?
Yes. The contrast report tests the key text and component pairs in both themes. It requires a 4.5:1 ratio for normal text (WCAG AA) and a 3:1 ratio for UI components, and it flags every pair that fails.
Can I use these tokens in Tailwind CSS?
Yes. Choose the Tailwind v4 tab to get an @theme block with CSS variables, or choose the Tailwind v3 tab to get a tailwind.config.js color object plus the CSS variables that power your semantic names.
What is the W3C Design Tokens format?
The W3C Design Tokens Community Group (DTCG) format is a JSON standard for design tokens. Each token uses a $value and a $type, and aliases use curly-brace references such as {color.primary.600}. Tools like Style Dictionary and Figma plugins can read this structure.
How should I name color tokens?
Name primitives by hue and step (primary-600) and name semantic tokens by purpose (text-muted, surface, border-strong). Avoid names that describe appearance, such as light-blue-button, because the value changes between themes and brands.
Is the Color Token Generator free and private?
Yes. The tool is free, needs no signup, and runs entirely in your browser. Your brand colors never leave your device.
Conclusion: Generate Your Color Tokens in Seconds
A strong color system gives your product consistency, accessibility and speed. The Color Token Generator builds that foundation for you. You enter one color, review the scales and previews, fix any contrast warnings, and export tokens that your designers and developers can use immediately.
Start with your brand color above, then explore related tools to refine the system: create smooth blends with the OKLCH gradient generator, build lighter variations with the color tint generator, and name your final colors with the color name finder. Generate, test, export, and ship a design system your whole team can trust.