Skip to content

Exportador de tokens de diseño

Convierte una paleta de colores y una escala tipográfica modular en variables CSS, un tema de Tailwind, JSON o Figma Tokens (Tokens Studio). Sin conexión e instantáneo.

Sin subidas
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
5xl · 61.04 Design tokens
4xl · 48.83 Design tokens
3xl · 39.06 Design tokens
2xl · 31.25 Design tokens
xl · 25 Design tokens
lg · 20 Design tokens
base · 16 Design tokens
sm · 12.8 Design tokens
xs · 10.24 Design tokens
:root {
  --color-primary: #4f46e5;
  --color-primary-50: #f2f2fd;
  --color-primary-100: #e5e4fb;
  --color-primary-200: #c3c0f6;
  --color-primary-300: #9994f0;
  --color-primary-400: #665ee8;
  --color-primary-500: #372de1;
  --color-primary-600: #261cc9;
  --color-primary-700: #1f17a5;
  --color-primary-800: #191282;
  --color-primary-900: #120d5e;
  --color-primary-950: #0b083a;
  --color-accent: #f97316;
  --color-accent-50: #fff6f0;
  --color-accent-100: #feede1;
  --color-accent-200: #fdd5b9;
  --color-accent-300: #fcb788;
  --color-accent-400: #fa934c;
  --color-accent-500: #f97315;
  --color-accent-600: #e05f06;
  --color-accent-700: #b84e05;
  --color-accent-800: #903d04;
  --color-accent-900: #682c03;
  --color-accent-950: #411b02;
  --color-neutral: #64748b;
  --color-neutral-50: #f6f7f9;
  --color-neutral-100: #edeff2;
  --color-neutral-200: #d5dae1;
  --color-neutral-300: #b8c0cc;
  --color-neutral-400: #94a1b2;
  --color-neutral-500: #74849b;
  --color-neutral-600: #606f85;
  --color-neutral-700: #4f5c6e;
  --color-neutral-800: #3e4856;
  --color-neutral-900: #2d343e;
  --color-neutral-950: #1c2027;

  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
  --text-3xl: 2.4413rem;
  --text-4xl: 3.0519rem;
  --text-5xl: 3.815rem;
}

Cómo usar Exportador de tokens de diseño

  1. 1Abre Exportador de tokens de diseño. Funciona en tu navegador, sin registro.
  2. 2Escribe o pega tus datos.
  3. 3Copia o descarga el resultado.

Preguntas

How are shades generated?

Each colour keeps its hue and saturation while lightness steps from 97% (50) down to 13% (950), giving a Tailwind-style 50–950 ramp. Untick “Generate shades” to export only your exact colours.

What is the Figma Tokens format?

JSON for the Tokens Studio for Figma plugin, using $value and $type keys. Import it in the plugin to create colour and typography tokens.

Where do I get a palette?

Extract one with the Color Palette from Image tool, then paste the hex codes here.

Más herramientas

Generador de códigos QREnlaces, Wi-Fi, texto — SVG o PNG Contador de palabras y caracteresPalabras, caracteres, tiempo de lectura Conversor de mayúsculas y slugsMAYÚS, Título, camel, kebab Markdown a HTMLVista previa en vivo y exportación Markdown a PDFListo para imprimir, texto seleccionable Limpiador de texto: deduplicar, ordenar, reemplazarLíneas, espacios, buscar y reemplazar Generador de letras bonitasFuentes Unicode para tu bio Generador de Lorem IpsumPárrafos de relleno