UI Tokens Generator

Select a base color and automatically get a complete UI token set: color scales, semantic colors, and ready-to-use CSS variables.

Base Color

Select the primary color for generating all UI tokens. This color will be used as the foundation for creating the color scale and semantic colors.

Preview

Preview

Primary Button

Card

Card Title

This card demonstrates surface and border colors from the generated tokens.

Semantic Colors

Success
Warning
Danger

Backgrounds

Background

Background Muted

All Tokens

Primary Tokens

--color-primary

#3C83F6

--color-primary-hover

#0563FA

--color-primary-active

#004ECC

--color-primary-muted

#DCE3EF

--color-primary-foreground

#FFFFFF

Primary Scale

50

#EFF1F6

100

#DCE3EF

200

#C7D5EA

300

#9CB7E2

400

#6D98DF

500

#3C83F6

600

#0563FA

700

#004ECC

800

#003B99

900

#002766

Background Tokens

--color-bg

#FAFAFA

--color-bg-muted

#F2F2F2

--color-surface

#FFFFFF

--color-surface-hover

#FAFAFA

--color-border

#D9D9D9

Semantic Tokens

--color-success

#F63C83

--color-warning

#AF3CF6

--color-danger

#3CF6AF

Export

:root {
  /* Primary Colors */
  --color-primary: #3C83F6;
  --color-primary-hover: #0563FA;
  --color-primary-active: #004ECC;
  --color-primary-muted: #DCE3EF;
  --color-primary-foreground: #FFFFFF;

  /* Primary Scale */
  --color-primary-50: #EFF1F6;
  --color-primary-100: #DCE3EF;
  --color-primary-200: #C7D5EA;
  --color-primary-300: #9CB7E2;
  --color-primary-400: #6D98DF;
  --color-primary-500: #3C83F6;
  --color-primary-600: #0563FA;
  --color-primary-700: #004ECC;
  --color-primary-800: #003B99;
  --color-primary-900: #002766;

  /* Background Colors */
  --color-bg: #FAFAFA;
  --color-bg-muted: #F2F2F2;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAFAFA;
  --color-border: #D9D9D9;

  /* Semantic Colors */
  --color-success: #F63C83;
  --color-warning: #AF3CF6;
  --color-danger: #3CF6AF;
}

Similar Tools

Discover other useful color tools

🎨

UI Theme Generator

View Tool →
🎯

Brand Color Analyzer

View Tool →
🌈

tools.palette.title

View Tool →

Complete guide to using UI Tokens Generator

UI Tokens Generator is a powerful online tool for creating a complete set of design tokens from a single base color. With this service, you can automatically generate color scales, semantic colors, and ready-to-use CSS variables for your design system.

Step 1: Select base color

Start by selecting a base color for your design system. Use the color picker or enter a HEX code manually. This color will be used as the foundation for generating all other tokens.

Step 2: Generate color scale

The tool automatically creates a color scale of 10 shades (from 50 to 900) based on the selected base color. Each shade is optimized for use in different interface components.

Step 3: Review primary tokens

Check the generated primary tokens: primary (base, hover, active, muted), background (background, surface, borders) and semantic (success, warning, danger). All tokens are automatically configured for optimal visual hierarchy.

Step 4: Preview tokens

Use the preview section to visually check tokens on real UI components: buttons, cards, text. This helps ensure all colors work harmoniously together.

Step 5: Export tokens

Choose export format: CSS Variables for use in CSS, Tailwind Config for Tailwind CSS integration, or JSON for use in design systems. Copy the code with one click.

Step 6: Integrate into project

Copy the exported code and paste it into your project. CSS variables can be added to :root, Tailwind config to tailwind.config.js, and JSON tokens to your design system.

How to use UI Tokens Generator: step-by-step guide

How to create design tokens from one color

Select a base color using the color picker or enter a HEX code. The tool automatically generates a complete set of tokens: color scale, primary colors, background colors, and semantic colors.

How to generate color scale

After selecting a base color, the tool automatically creates a scale of 10 shades (50-900). Each shade is optimized for use in different component states: from lightest (50) to darkest (900).

How to export tokens as CSS variables

Go to the 'Export' section, select the 'CSS Variables' tab and click 'Copy'. The copied code contains all tokens in CSS variable format, ready to use in your project.

How to export tokens for Tailwind CSS

In the 'Export' section, select the 'Tailwind Config' tab. Copy the code and add it to the tailwind.config.js file in the theme.extend.colors section. Tokens will be available as Tailwind classes.

How to create semantic colors

The tool automatically generates semantic colors (success, warning, danger) based on the base color by adjusting the hue. These colors are perfect for notifications, alerts, and status indicators.

How to use tokens in design system

Export tokens in JSON format for use in design systems. JSON contains structured data about all colors that can be imported into design tools (Figma, Sketch) or used in code.

Frequently asked questions about UI Tokens Generator

What are UI tokens?

UI tokens are standardized design values (colors, spacing, sizes) used in design systems to ensure interface consistency. Tokens make it easy to maintain a unified style throughout the application.

How does the token generator work?

The generator takes one base color and automatically creates a complete set of tokens: color scale (10 shades), primary colors (primary, hover, active), background colors, and semantic colors (success, warning, danger). All tokens are optimized for UI use.

What export formats are supported?

The generator supports three export formats: CSS Variables (for use in CSS), Tailwind Config (for Tailwind CSS integration), and JSON (for use in design systems and design tools).

How to use exported CSS variables?

Copy the code from the 'CSS Variables' section and add it to your stylesheet (e.g., globals.css) in the :root block. After that, you can use variables in CSS: var(--color-primary), var(--color-primary-hover), etc.

Can I customize the color scale?

The color scale is automatically generated based on the base color using HSL algorithms to ensure visual consistency. Changing the base color automatically updates the entire scale.

What are semantic colors?

Semantic colors are colors with specific meaning: success (green), warning (yellow/orange), danger (red). They are automatically generated based on the base color by adjusting the hue on the color wheel.