Pixeliro Logo
Pixeliro
Free Online Tool

Design Token Generator - CSS, Tailwind, Figma & DTCG Tokens

Generate design tokens from your color palette. Export to CSS variables, Tailwind v4, DTCG JSON, Figma Tokens, Swift, and Kotlin. The complete token workflow for design systems.

Pixeliro Logo

Color Palette

Add your brand colors

Export Tokens

Choose your target platform

styles/tokens.css
:root {
  --color-primary: #3B82F6;
  --color-secondary: #8B5CF6;
  --color-accent: #F59E0B;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-neutral: #6B7280;
}

Key Features

Powerful features designed for designers and developers

Multi-Platform Export

Export tokens to any platform: CSS, Tailwind v4, DTCG JSON, Figma Tokens, Swift UIColor, and Kotlin Color.

CSS Variables

Generate clean CSS custom properties with semantic naming. Works with any CSS framework or vanilla CSS.

Tailwind v4

Export Tailwind v4 @theme inline tokens with full color scale support. Drop into your CSS entrypoint.

DTCG Standard

Export in the W3C Design Token Community Group (DTCG) format — the emerging industry standard.

Figma Tokens

Generate Figma Variables-compatible JSON for seamless designer-developer handoff.

Mobile SDKs

Export as Swift UIColor extensions for iOS and Kotlin Color constants for Android — no manual coding.

How It Works

Get started in just a few simple steps

  1. 1

    Create Your Palette

    Input your brand colors manually or generate them from the Color Palette Generator. Add primary, secondary, and semantic colors.

  2. 2

    Choose Platform

    Select your target platform: CSS, Tailwind, DTCG, Figma, Swift, or Kotlin.

  3. 3

    Preview Tokens

    See a live preview of your generated tokens with syntax highlighting. Review naming and structure.

  4. Download

    Copy the token code or download as a file. Use directly in your design system or project.

Frequently Asked Questions

Everything you need to know

What are design tokens?

Design tokens are named entities that store visual design decisions. Instead of hardcoding `#3B82F6`, you use `--color-primary-500`. This makes design systems scalable and maintainable.

What is the DTCG format?

DTCG (Design Token Community Group) is a W3C-backed format for defining design tokens in JSON. It is becoming the industry standard, supported by tools like Style Dictionary and Figma.

How do I use tokens in Figma?

Export as Figma Tokens JSON and import using the Figma Variables feature (Figma Enterprise/Pro) or plugins like Tokens Studio.

Does it support Tailwind v4?

Yes. We export in Tailwind v4 @theme inline format using CSS custom properties, which is the recommended approach for Tailwind v4.

Can I use this for mobile apps?

Yes. Swift UIColor export creates type-safe color extensions for iOS. Kotlin export creates companion object constants for Android/Compose.

Is it free?

CSS Variables export is free. Tailwind, DTCG, Figma, Swift, and Kotlin exports require a Starter or Pro subscription.

Ready to Get Started?

Design Token Generator - CSS, Tailwind, Figma & DTCG Tokens - Free, no signup required

Generate Design Tokens