Generador de tokens UI
Selecciona un color base y obtén automáticamente un conjunto completo de tokens UI: escalas de color, colores semánticos y variables CSS listas para usar.
Color base
Selecciona el color primario para generar todos los tokens UI. Este color se utilizará como base para crear la escala de colores y los colores semánticos.
Vista previa
Preview
Primary Button
Card
Card Title
This card demonstrates surface and border colors from the generated tokens.
Semantic Colors
Backgrounds
Background
Background Muted
Todos los 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;
}
Herramientas Similares
Descubre otras herramientas útiles de color
Guía completa para usar el Generador de tokens UI
El Generador de tokens UI es una herramienta online poderosa para crear un conjunto completo de tokens de diseño a partir de un solo color base. Con este servicio, puedes generar automáticamente escalas de color, colores semánticos y variables CSS listas para usar para tu sistema de diseño.
Paso 1: Seleccionar color base
Comienza seleccionando un color base para tu sistema de diseño. Usa el selector de color o ingresa un código HEX manualmente. Este color se usará como base para generar todos los demás tokens.
Paso 2: Generar escala de colores
La herramienta crea automáticamente una escala de colores de 10 tonos (del 50 al 900) basada en el color base seleccionado. Cada tono está optimizado para usar en diferentes componentes de interfaz.
Paso 3: Revisar tokens primarios
Revisa los tokens primarios generados: primary (base, hover, active, muted), background (fondo, superficie, bordes) y semantic (success, warning, danger). Todos los tokens están configurados automáticamente para una jerarquía visual óptima.
Paso 4: Vista previa de tokens
Usa la sección de vista previa para verificar visualmente los tokens en componentes UI reales: botones, tarjetas, texto. Esto ayuda a asegurar que todos los colores funcionen armoniosamente juntos.
Paso 5: Exportar tokens
Elige el formato de exportación: Variables CSS para usar en CSS, Config de Tailwind para integración con Tailwind CSS, o JSON para usar en sistemas de diseño. Copia el código con un clic.
Paso 6: Integrar en proyecto
Copia el código exportado y pégalo en tu proyecto. Las variables CSS se pueden agregar a :root, la configuración de Tailwind a tailwind.config.js, y los tokens JSON a tu sistema de diseño.
Cómo usar el Generador de tokens UI: guía paso a paso
Cómo crear tokens de diseño a partir de un color
Selecciona un color base usando el selector de color o ingresa un código HEX. La herramienta genera automáticamente un conjunto completo de tokens: escala de colores, colores primarios, colores de fondo y colores semánticos.
Cómo generar escala de colores
Después de seleccionar un color base, la herramienta crea automáticamente una escala de 10 tonos (50-900). Cada tono está optimizado para usar en diferentes estados de componentes: desde los más claros (50) hasta los más oscuros (900).
Cómo exportar tokens como variables CSS
Ve a la sección 'Exportar', selecciona la pestaña 'Variables CSS' y haz clic en 'Copiar'. El código copiado contiene todos los tokens en formato de variables CSS, listos para usar en tu proyecto.
Cómo exportar tokens para Tailwind CSS
En la sección 'Exportar', selecciona la pestaña 'Config de Tailwind'. Copia el código y agrégalo al archivo tailwind.config.js en la sección theme.extend.colors. Los tokens estarán disponibles como clases de Tailwind.
Cómo crear colores semánticos
La herramienta genera automáticamente colores semánticos (success, warning, danger) basados en el color base ajustando el tono. Estos colores son perfectos para notificaciones, alertas e indicadores de estado.
Cómo usar tokens en sistema de diseño
Exporta tokens en formato JSON para usar en sistemas de diseño. JSON contiene datos estructurados sobre todos los colores que se pueden importar en herramientas de diseño (Figma, Sketch) o usar en código.
Preguntas frecuentes sobre el Generador de tokens UI
¿Qué son los tokens UI?
Los tokens UI son valores de diseño estandarizados (colores, espaciado, tamaños) utilizados en sistemas de diseño para asegurar la consistencia de la interfaz. Los tokens facilitan mantener un estilo unificado en toda la aplicación.
¿Cómo funciona el generador de tokens?
El generador toma un color base y crea automáticamente un conjunto completo de tokens: escala de colores (10 tonos), colores primarios (primary, hover, active), colores de fondo y colores semánticos (success, warning, danger). Todos los tokens están optimizados para uso en UI.
¿Qué formatos de exportación se admiten?
El generador admite tres formatos de exportación: Variables CSS (para usar en CSS), Config de Tailwind (para integración con Tailwind CSS) y JSON (para usar en sistemas de diseño y herramientas de diseño).
¿Cómo usar las variables CSS exportadas?
Copia el código de la sección 'Variables CSS' y agrégalo a tu hoja de estilos (por ejemplo, globals.css) en el bloque :root. Después de eso, puedes usar variables en CSS: var(--color-primary), var(--color-primary-hover), etc.
¿Puedo personalizar la escala de colores?
La escala de colores se genera automáticamente basada en el color base usando algoritmos HSL para asegurar consistencia visual. Cambiar el color base actualiza automáticamente toda la escala.
¿Qué son los colores semánticos?
Los colores semánticos son colores con significado específico: success (verde), warning (amarillo/naranja), danger (rojo). Se generan automáticamente basados en el color base ajustando el tono en la rueda de colores.