UlvixorGenerador de Paletas de Colores
Elige un color base y esta herramienta genera una paleta armoniosa a partir de reglas clásicas de teoría del color (análogo, complementario, triádico, tetrádico o complementario dividido), además de una rampa de tonos y sombras del mismo color lista para usar como estados de hover o fondos. Todo el cálculo ocurre en tu navegador.
Cómo funciona
- Elige un color base con el selector visual o escribiendo su código hexadecimal.
- Selecciona el tipo de armonía: monocromático, análogo, complementario, triádico, tetrádico o complementario dividido.
- La paleta se recalcula al instante según el color base y la armonía elegida; cada regla produce el número de colores que le corresponde (por ejemplo, 2 tonos para complementario, 3 para triádico).
- Debajo se muestra siempre una rampa de 5 variantes de luminosidad del color base, útil para fondos, bordes o estados de hover sin salir de la misma familia de color.
- Haz clic en cualquier color para copiar su código hex, o copia toda la paleta como variables CSS listas para pegar en tu hoja de estilos.
Casos de uso
- Elegir los colores de una marca o interfaz a partir de un único color de referencia.
- Generar variantes de hover, focus o disabled de un botón a partir del color primario del diseño.
- Explorar combinaciones de color para una presentación, ilustración o paleta de una app.
- Obtener rápidamente variables CSS (`--color-1`, `--color-2`...) para prototipar sin definir los colores a mano.
Casos de uso
- Elegir los colores de una marca o interfaz a partir de un único color de referencia.
- Generar variantes de hover, focus o disabled de un botón a partir del color primario del diseño.
- Explorar combinaciones de color para una presentación, ilustración o paleta de una app.
- Obtener rápidamente variables CSS (`--color-1`, `--color-2`...) para prototipar sin definir los colores a mano.
Errores comunes
- Esperar que todas las reglas de armonía devuelvan la misma cantidad de colores.Cada regla de teoría del color implica una cantidad distinta de tonos: complementario son 2 tonos (con variantes de luminosidad), triádico son 3, tetrádico son 4. Esta herramienta respeta esa cantidad en lugar de rellenar artificialmente hasta un número fijo.
- Escribir un código hexadecimal incompleto o con caracteres inválidos en el campo de texto.El campo de texto solo actualiza la paleta cuando el valor es un hexadecimal válido de 6 dígitos (por ejemplo #3366CC); mientras el valor no sea válido, la paleta sigue mostrando el último color base correcto.
- Buscar los colores generados en el historial después de cerrar la pestaña.La paleta no se guarda en ningún lado; si necesitas conservar el resultado, copia los códigos hex o las variables CSS antes de cerrar o cambiar el color base.
Preguntas frecuentes
No. La paleta se calcula completamente en tu navegador a partir del color base que elijas.
Monocromático usa un solo tono en distintas luminosidades; análogo usa tonos vecinos en el círculo cromático; complementario usa el color opuesto; triádico y tetrádico distribuyen 3 o 4 tonos equidistantes; complementario dividido combina un color con los dos vecinos de su opuesto, un contraste algo más suave que el complementario puro.
Sí, el bloque de variables CSS genera un `:root { --color-1: ...; }` listo para pegar en tu hoja de estilos y usar con `var(--color-1)` donde lo necesites.
Es una serie de variantes más claras y más oscuras del mismo color base, independiente de la armonía elegida. Sirve para fondos, bordes o estados de interacción (hover, active) que necesitan quedarse dentro de la misma familia de color en vez de introducir un tono nuevo.
Alternativas
Adobe Color y Coolors permiten generar paletas de forma similar, con más reglas de exportación y guardado en la nube. Esta herramienta es conveniente para una paleta rápida basada en teoría del color clásica, sin crear una cuenta ni depender de un servicio externo.