Generador
ColorGenerador de Tonos de Color
Genera tonos y matices equilibrados a partir de cualquier color base HEX. Ajusta variantes claras y oscuras, previsualiza muestras accesibles y exporta variables CSS, JSON o configuración Tailwind para tus sistemas de diseño en segundos.
Generador de Tonos de Color - Construye la escala de tu marca
Los sistemas de diseño necesitan gradaciones coherentes para estados, fondos y visualizaciones de datos. Este generador crea variaciones equidistantes desde un único color base para que puedas publicar paletas listas para UI, ilustración o impresión.
¿Qué son los shades y tints?
Los tints mezclan el color con blanco para hacerlo más claro, mientras que los shades lo mezclan con negro para oscurecerlo. Una escala equilibrada aporta flexibilidad para estados hover, sombras, tarjetas y gráficos sin adivinar porcentajes.
¿Cómo uso el generador?
1) Ingresa o selecciona un color base HEX. 2) Define el total de muestras o ajusta cuántos tints y shades necesitas. 3) Haz clic en Generar. 4) Copia cualquier swatch o exporta variables CSS, JSON o configuración Tailwind para tu proyecto.
¿Por qué exportar en varios formatos?
Cada equipo usa un flujo distinto. Las variables CSS se pegan directo en estilos, JSON funciona para tokens o plugins de Figma, y Tailwind se integra con proyectos basados en utilidades.
Características clave
- Genera hasta 16 tonos y matices desde un único HEX
- Cuadrícula interactiva con copia al hacer clic
- Controles independientes para variantes claras y oscuras
- Bloques de exportación CSS, JSON y Tailwind listos para pegar
- Generador de color aleatorio para explorar
- Previsualización accesible de contraste por muestra
- Diseño responsive y accesible con teclado
- Estilos para modo oscuro y animaciones suaves
- Todos los cálculos se ejecutan localmente en tu navegador