Generador de Tema UI

Genera paletas completas para interfaces: colores de acento, fondos, texto, bordes y colores auxiliares

Entrada de Color Base

Base Color (HEX, RGB, or HSL)

Theme Mode

Theme Presets

Extract Color from Image (Optional)

Vista Previa del Tema

Theme Preview

Card Title

This is a sample card component demonstrating the theme colors.

Form Example

Password

Success

Warning

Error

Info

Tokens de Color

Color Tokens

Primary

Token	Value	Action
Copy #3B82F6 primary	#3B82F6
Copy #6DA2F8 primary-hover	#6DA2F8
Copy #0B64F4 primary-active	#0B64F4
Copy #000000 primary-foreground	#000000

Secondary

Token	Value	Action
Copy #295BAC secondary	#295BAC
Copy #2E67C2 secondary-hover	#2E67C2
Copy #FFFFFF secondary-foreground	#FFFFFF

Neutral

Token	Value	Action
Copy #0A0A0A background	#0A0A0A
Copy #FFFFFF foreground	#FFFFFF
Copy #1A1A1A card	#1A1A1A
Copy #2A2A2A muted	#2A2A2A

Status

Token	Value	Action
Copy #00FF00 success	#00FF00
Copy #FFBF00 warning	#FFBF00
Copy #FF0000 error	#FF0000
Copy #00AAFF info	#00AAFF

Borders

Token	Value	Action
Copy #2A2A2A border	#2A2A2A
Copy #404040 border-strong	#404040
Copy #3B82F6 ring	#3B82F6

Shadows

Token	Value	Action
Copy rgba(0, 0, 0, 0.3) shadow-sm	rgba(0, 0, 0, 0.3)
Copy rgba(0, 0, 0, 0.4) shadow-md	rgba(0, 0, 0, 0.4)
Copy rgba(0, 0, 0, 0.5) shadow-lg	rgba(0, 0, 0, 0.5)

Contraste

Contrast Analysis

Color Pair	Contrast Ratio	WCAG Compliance	Recommendation
vs	5.71:1	✓ AA	✓ Good contrast
vs	6.59:1	✓ AA	✓ Good contrast
vs	19.80:1	✓ AA✓ AAA	✓ Good contrast
vs	1.14:1	✗ Below AA	Increase card contrast for better visibility

Exportar

Export

:root {
  /* Primary Colors */
  --color-primary: #3B82F6;
  --color-primary-hover: #6DA2F8;
  --color-primary-active: #0B64F4;
  --color-primary-foreground: #000000;

  /* Secondary Colors */
  --color-secondary: #295BAC;
  --color-secondary-hover: #2E67C2;
  --color-secondary-foreground: #FFFFFF;

  /* Neutral Colors */
  --color-background: #0A0A0A;
  --color-foreground: #FFFFFF;
  --color-card: #1A1A1A;
  --color-muted: #2A2A2A;

  /* Status Colors */
  --color-success: #00FF00;
  --color-warning: #FFBF00;
  --color-error: #FF0000;
  --color-info: #00AAFF;

  /* Borders */
  --color-border: #2A2A2A;
  --color-border-strong: #404040;
  --color-ring: #3B82F6;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.3);
  --shadow-md: rgba(0, 0, 0, 0.4);
  --shadow-lg: rgba(0, 0, 0, 0.5);
}

Herramientas Similares

Descubre otras herramientas útiles de color

🎨

Guía completa para usar Generador de Tema UI

Generador de Tema UI es una herramienta para generar paletas de color completas para interfaces. Crea colores de acento, fondos, texto, bordes y colores auxiliares basados en un solo color base.

Paso 1: Seleccionar color base

Elija un color primario usando el selector de color, ingrese HEX/RGB/HSL manualmente, seleccione un tema listo de la lista (Light, Dark, Vibrant, Pastel, Minimal, Corporate) o cargue una imagen para extraer el color dominante.

Paso 2: Configurar modo

Seleccione modo de tema: Light (tema claro), Dark (tema oscuro) o Auto (detección automática basada en color base).

Paso 3: Ver vista previa

Vea la vista previa del tema en componentes UI reales: botones, bloques de texto, tarjeta, formulario, panel de navegación. Esto permite ver el tema en acción.

Paso 4: Explorar tokens

Explore todos los tokens de color generados, organizados por categorías: Primary (principales), Secondary (secundarios), Neutral (neutrales), Status (estado), Borders (bordes), Shadows (sombras).

Paso 5: Verificar contraste

Revise el análisis automático de contraste para pares de colores clave: primary vs primary-foreground, secondary vs secondary-foreground, text vs background, card vs fondo. Asegure cumplimiento WCAG AA/AAA.

Paso 6: Exportar

Exporte el tema en varios formatos: Variables CSS (para uso directo en CSS), config de Tailwind (para integración con Tailwind CSS), tokens JSON (para sistemas de diseño), Tokens de Figma (para uso en Figma). Use botón 'Export All' para exportar todos los formatos a la vez.

Cómo usar Generador de Tema UI: guía paso a paso

Cómo seleccionar color base

Use selector de color para selección visual, ingrese color manualmente en cualquier formato (HEX, RGB, HSL), seleccione un tema listo de la lista desplegable o cargue una imagen para extracción automática de color dominante.

Cómo configurar modo de tema

Seleccione Light para tema claro, Dark para tema oscuro o Auto para detección automática basada en brillo del color base. El modo afecta la generación de colores neutros y sombras.

Cómo usar vista previa del tema

La vista previa muestra el tema en componentes UI reales: botones con estados hover/active, bloques de texto, tarjetas, formularios, panel de navegación. Esto ayuda a evaluar visualmente el tema antes de usarlo.

Cómo trabajar con tokens

Todos los tokens están organizados por categorías. Cada token muestra muestra de color, valor HEX y botón de copiar. Los tokens están listos para usar en su proyecto.

Cómo interpretar análisis de contraste

La tabla de contraste muestra relaciones para pares de colores clave. Etiquetas verdes (✓ AA, ✓ AAA) indican cumplimiento con estándares. Etiquetas rojas (✗ Below AA) requieren mejora de contraste.

Cómo exportar tema

Seleccione formato de exportación deseado (Variables CSS, Config de Tailwind, Tokens JSON, Tokens de Figma), copie código o descargue archivo. Use 'Export All' para obtener todos los formatos a la vez.

Preguntas frecuentes sobre Generador de Tema UI

¿Qué son los tokens UI?

Los tokens UI son valores de color con nombre usados en sistemas de diseño. Aseguran consistencia de colores en interfaces y simplifican mantenimiento de temas. Ejemplos: primary, secondary, background, foreground.

¿Cómo funciona la generación de tokens?

El generador usa color base y crea variaciones mediante aclarado/oscurecimiento (para estados hover/active), mezcla con colores neutros (para secondary) y selección automática de colores contrastantes (para foreground). Los colores de estado se generan ajustando el tono.

¿Qué es el modo Auto?

El modo Auto determina automáticamente si el tema debe ser claro u oscuro basado en el brillo del color base. Si el color base es claro (luma >= 0.5), se selecciona tema claro, de lo contrario tema oscuro.

¿Cómo usar tokens exportados?

Las Variables CSS se pueden usar directamente en CSS: var(--color-primary). La config de Tailwind debe agregarse a tailwind.config.js. Los tokens JSON son adecuados para integración en sistemas de diseño. Los Tokens de Figma se pueden importar a Figma mediante plugin.

¿Por qué algunos pares de colores no pasan la verificación de contraste?

Si el color base es demasiado claro u oscuro, los colores foreground generados automáticamente pueden no proporcionar suficiente contraste. En este caso, se recomienda elegir un color base diferente o ajustar manualmente los colores foreground.

¿Puedo editar tokens manualmente?

En la versión actual, los tokens se generan automáticamente. Para edición manual, puede copiar los valores exportados y modificarlos en su proyecto. Las versiones futuras planean agregar capacidad de edición manual.