Generador de paletas de colores

¿Qué es un generador de paletas de color?

Un generador de paletas de color crea conjuntos armónicos de colores basados en reglas de teoría del color. Partiendo de un único color base, genera esquemas complementarios, análogos, triádicos, complementarios divididos y otros. Los diseñadores usan generadores de paletas para crear rápidamente sistemas de color cohesivos para sitios web, apps, marcas e ilustraciones.

Las buenas paletas de color no son aleatorias: siguen relaciones matemáticas en la rueda de color. Los colores complementarios están opuestos (alto contraste). Los análogos son adyacentes (armoniosos y tranquilos). Los triádicos forman un triángulo equilátero (vibrantes y equilibrados). Esta herramienta genera paletas con estas y otras reglas de armonía probadas.

Cómo usar esta herramienta

Elige un color base con el selector o introduce un valor hex. Selecciona una regla de armonía (complementaria, análoga, triádica, etc.). La herramienta genera una paleta completa con cada color en una muestra junto con sus valores hex, RGB y HSL. Ajusta el color base para ver la paleta actualizarse en tiempo real.

Tipos de armonía cromática

• Complementaria — dos colores opuestos en la rueda. Alto contraste, energética. Ejemplo: azul y naranja.
• Análoga — tres colores adyacentes en la rueda. Tranquila, cohesionada. Ejemplo: azul, azul-verde, verde.
• Triádica — tres colores espaciados uniformemente (a 120 grados). Equilibrada, vibrante. Ejemplo: rojo, amarillo, azul.
• Complementaria dividida — un color base más dos colores adyacentes a su complementario. Contraste con menos tensión que la complementaria.

Color y accesibilidad

Al diseñar interfaces digitales, asegura un contraste suficiente entre el texto y el fondo (WCAG requiere un mínimo de 4,5:1 para texto normal). Evita transmitir información solo mediante color: alrededor del 8 % de los hombres tienen alguna forma de deficiencia de visión cromática. Prueba tu paleta con un simulador de daltonismo. Esta herramienta puede mostrar los ratios de contraste entre los colores generados.

Ejemplo práctico

Parte de un azul de marca en HSL(220, 80%, 55%). Un acento complementario se sitúa enfrente en la rueda, en el matiz 40, un ámbar cálido. Para un esquema triádico, gira 120 grados dos veces hasta el matiz 340 y el matiz 100. Mantener la saturación y la luminosidad constantes girando solo el matiz da colores que se sienten relacionados y equilibrados en lugar de aleatorios.

Errores comunes

El error más común es juzgar el contraste solo por el matiz; un amarillo brillante y el blanco pueden parecer distintos y aun así no cumplir el contraste WCAG para texto. Comprueba siempre la relación de contraste, no solo los colores. Otro es usar demasiados colores de acento fuertes, lo que fragmenta un diseño: la mayoría de las paletas funcionan mejor con un color dominante, uno secundario y un único acento.

Preguntas frecuentes

¿Cuántos colores debe tener una paleta?

La mayoría de los sistemas de diseño usan 5-7 colores: un color de marca primario, un acento secundario, una paleta neutra (grises para texto y fondos) y posiblemente un conjunto semántico (verde para éxito, rojo para error, amarillo para aviso). Demasiados colores crean caos visual. Demasiado pocos limitan la flexibilidad. Empieza con 3 colores más neutros y añade solo los necesarios.

¿Qué hace que los colores se vean bien juntos?

Los colores se ven armoniosos cuando tienen una relación matemática en la rueda de color (complementarios, triádicos, etc.) o comparten una propiedad (mismo nivel de saturación, brillo similar). La regla 60-30-10 es muy utilizada: 60 % color dominante, 30 % secundario, 10 % acento. Limitar el número de colores muy saturados y usar abundante espacio neutro también mejora la armonía visual.

¿Qué es la regla 60-30-10 en diseño de color?

Es una guía para equilibrar una paleta: en torno al 60% de un diseño usa un color dominante (a menudo un neutro), el 30% un color secundario y el 10% un acento para destacados y llamadas a la acción. Las proporciones mantienen un diseño cohesivo y dan al acento suficiente contraste para atraer la mirada.