Design Token Generator
Export CSS variables, Tailwind config, SCSS and JSON
Farben (name: #hex, one per line)
Typografie-Skala
Spacing-Skala
:root {
/* Colors */
--color-primary: #6366f1;
--color-primary-rgb: 99, 102, 241;
--color-secondary: #8b5cf6;
--color-secondary-rgb: 139, 92, 246;
--color-success: #22c55e;
--color-success-rgb: 34, 197, 94;
--color-warning: #f59e0b;
--color-warning-rgb: 245, 158, 11;
--color-danger: #ef4444;
--color-danger-rgb: 239, 68, 68;
--color-gray-50: #f9fafb;
--color-gray-50-rgb: 249, 250, 251;
--color-gray-100: #f3f4f6;
--color-gray-100-rgb: 243, 244, 246;
--color-gray-900: #111827;
--color-gray-900-rgb: 17, 24, 39;
/* Typography */
--font-size-xs: 0.6400rem;
--font-size-sm: 0.8000rem;
--font-size-base: 1.0000rem;
--font-size-lg: 1.2500rem;
--font-size-xl: 1.5625rem;
--font-size-2xl: 1.9531rem;
--font-size-3xl: 2.4414rem;
--font-size-4xl: 3.0518rem;
--font-size-5xl: 3.8147rem;
/* Spacing */
--spacing-0: 0.000rem;
--spacing-1: 0.250rem;
--spacing-2: 0.500rem;
--spacing-3: 0.750rem;
--spacing-4: 1.000rem;
--spacing-5: 1.250rem;
--spacing-6: 1.500rem;
--spacing-7: 1.750rem;
--spacing-8: 2.000rem;
--spacing-9: 2.250rem;
--spacing-10: 2.500rem;
}Streamline Your Design Workflow
The Design Token Generator simplifies the process of translating raw design values into usable code components for your web projects. By inputting hex codes and base sizes, you can instantly generate formatted variables for CSS, SCSS, Tailwind configuration files, and JSON objects. This eliminates manual copy-pasting and ensures consistency across your entire styling system, making it an essential tool for developers who want to bridge the gap between design mockups and production-ready code efficiently.
Versatile Export Options
Our tool provides multi-format support to accommodate various development workflows and frameworks. Whether you are building a custom site with SCSS, utilizing Tailwind CSS for rapid styling, or creating a design system that requires JSON exports, the generator handles it all. By converting your color palette into standardized tokens, you ensure that updates can be made in one place and reflected across every component of your project automatically.
Secure Local Processing
Your privacy is a top priority when using the Design Token Generator. All calculations and conversions are performed directly within your web browser rather than being sent to an external server. This means your proprietary color palettes, project names, and design data remain private and secure at all times. You can generate your configuration files with confidence, knowing that your sensitive development information never leaves your local environment during the generation process.
Frequently asked questions
What formats does the Design Token Generator support?
The tool supports several popular formats including CSS variables, SCSS, Tailwind configuration files, and JSON. This allows developers to export their design tokens into whichever format best fits their specific project requirements or framework without manual conversion.
How do I input my hex codes?
You can enter your hex codes directly into the tool's input field. The system is designed to process one name and hex code per line, allowing you to easily paste lists from design tools like Figma or Adobe XD for instant conversion.
Can I use this for Tailwind CSS projects?
Yes, the tool includes a specific option to export values in a format compatible with Tailwind configuration files. This helps you quickly populate your theme colors and spacing scales while maintaining consistency across your entire UI component library.
Is my data safe when using this tool?
Your data is completely secure because the generation happens locally in your browser. No information, including your hex codes or project names, is ever sent to a server, ensuring that your proprietary design assets remain private and protected during the conversion process.