Generador de paletas de colores
Una paleta de colores organiza tonos que funcionan juntos en una interfaz, marca, presentación o pieza gráfica. La herramienta puede ayudarte a explorar armonías como complementaria, análoga, triádica, tetrádica, dividida o monocromática, partiendo de un color base.
Una buena paleta no depende solo de colores bonitos. Debe incluir contraste suficiente, tonos para fondo, texto, borde, estados de alerta y acciones principales. En diseño web, el contraste entre texto y fondo es esencial para accesibilidad.
Cómo elegir una paleta útil
Empieza con un color principal y añade tonos neutros. Usa colores vivos con moderación para llamadas a la acción o indicadores. Antes de aplicar la paleta, pruébala en botones, formularios, tarjetas y mensajes de error. Una paleta equilibrada debe funcionar tanto en elementos grandes como en detalles pequeños.
La herramienta genera la paleta a partir de un color base en formato HEX. Internamente convierte ese color a RGB y luego a HSL para poder rotar el matiz de forma controlada. En una armonía complementaria usa giros como 180 grados; en análoga trabaja con colores cercanos; en triádica usa separaciones de 120 grados; en tetrádica distribuye cuatro tonos a 90 grados; y en monocromática mantiene el matiz cambiando la luminosidad. Por eso los resultados no son aleatorios: siguen reglas sencillas de teoría del color que se pueden revisar en la tabla lateral.
Cada muestra muestra el HEX y el valor RGB, y al hacer clic se copia el color individual. El botón de copiar todos devuelve la lista de colores separada por comas, útil para documentación, Figma, CSS o una guía de marca. El botón CSS genera variables dentro de :root con nombres como --color-1, lo que facilita probar la paleta en un prototipo. Si escribe el HEX manualmente, la entrada exige seis dígitos válidos; si el formato no es correcto, la herramienta avisa en lugar de crear una paleta ambigua.
Una paleta equilibrada no depende solo de que los tonos combinen. También hay que decidir qué color será dominante, cuál servirá de acento y cuáles quedarán para fondos, bordes o estados secundarios. Antes de usar todos los colores en una interfaz, pruebe contraste con texto, estados de hover y elementos deshabilitados. Las armonías generadas son un punto de partida rápido; el ajuste final debe considerar accesibilidad, identidad visual y el contexto donde se aplicará la combinación.
Cuando una paleta se usa en producción, guarde también el color base y el tipo de armonía elegido. Así podrá regenerar la familia o explicar por qué ciertos tonos pertenecen al mismo sistema visual.
Comentarios