🎨

Generador de Paletas de Colores

Genera paletas de colores hermosas y armónicas desde un solo color base — ideal para diseño de interfaces.

Una buena paleta de colores no es una colección aleatoria de colores bonitos: es un conjunto de colores elegidos por una regla, y la regla es lo que hace que funcionen juntos. Los diseñadores no eligen cinco colores que casualmente les gustan; eligen un color base y derivan los demás mediante relaciones en la rueda de color: complementaria, análoga, triádica. Por eso las paletas profesionales se sienten cohesivas y las amateur se sienten ruidosas. Esta herramienta genera paletas armoniosas a partir de un solo color base usando esas relaciones establecidas de teoría del color, dándote un conjunto coordinado sobre el que construir un diseño en lugar de adivinar.

Cómo funciona el generador

Elige un color base y una regla de armonía, y la herramienta calcula los demás colores por su relación matemática con tu base en la rueda de color. Un esquema complementario toma el color opuesto; el análogo toma los vecinos; el triádico toma tres puntos equiespaciados; y así. Como las relaciones son geométricas, los colores resultantes están garantizados a relacionarse entre sí de una forma que el ojo lee como intencional. Obtienes los códigos hex listos para soltar en un diseño.

Las reglas de armonía

En la rueda de color de 360°, desde tu tono base H: Complementaria H, H+180 → alto contraste Análoga H, H+30, H−30 → calmada, cohesiva Triádica H, H+120, H+240 → vibrante, equilibrada Comp. dividida H, H+150, H+210 → contraste, más suave Tetrádica H, H+90, H+180, H+270 → rica, compleja La saturación y la luminosidad se quedan cerca de la base.

Todo el sistema funciona porque el tono es un ángulo, así que las relaciones se vuelven aritmética simple en un círculo. Los colores complementarios están a 180° de distancia, por lo que producen el máximo contraste: están tan lejos entre sí como permite la rueda. Los colores análogos están dentro de unos 30°, compartiendo suficiente tono para sentirse armoniosos y calmados. La razón para mantener la saturación y la luminosidad consistentes en toda la paleta es que variar el tono por regla mientras se mantienen los otros dos fijos es exactamente lo que hace que un conjunto se sienta como una familia coordinada en lugar de un surtido aleatorio.

Lo que conviene saber sobre las paletas de color

  • 1Usa la regla 60-30-10 para aplicar una paleta. Un color dominante para el 60% del diseño, uno secundario para el 30% y un acento para el 10% crea jerarquía visual y evita que el resultado se sienta caótico. Una paleta es la materia prima; esta proporción es cómo los profesionales convierten un conjunto de colores en una interfaz equilibrada en lugar de un lavado plano y uniforme de todos ellos.
  • 2Los esquemas complementarios son de alto contraste: usa el acento con moderación. Dos colores opuestos a plena intensidad compiten por la atención y pueden vibrar de forma incómoda. El movimiento profesional es una base dominante con su complementario reservado para acentos pequeños y de alto impacto como botones y llamadas a la acción, donde el contraste trabaja a tu favor en lugar de abrumar el diseño.
  • 3Comprueba siempre el contraste para el texto, no solo la estética. Una paleta puede ser hermosa y aun así fallar la accesibilidad si el texto y el fondo no tienen suficiente contraste: WCAG exige una ratio de 4,5:1 para texto normal. Los colores armoniosos suelen ser similares en luminosidad, lo que se lee elegante pero puede hacer el texto ilegible. Verifica el contraste por separado de la armonía.
  • 4Las paletas análogas son el valor por defecto seguro y calmado. Los colores que están uno al lado del otro en la rueda son casi imposibles de errar: comparten suficiente tono para sentirse unificados y de baja tensión. Cuando un diseño necesita sentirse sereno, coherente y profesional sin riesgo, un esquema análogo es el punto de partida fiable que rara vez decepciona.
  • 5Reserva los colores saturados para acentos, no para áreas grandes. Un color plenamente saturado en una superficie grande es agotador de mirar y hace difícil leer texto encima. El enfoque maduro usa versiones desaturadas o claras de la paleta para fondos y áreas grandes, guardando las versiones vibrantes y saturadas para elementos pequeños que necesitan atraer el ojo.

Preguntas frecuentes

¿Qué hace que los colores combinen bien?

Una relación definida en la rueda de color más que el gusto personal. Los colores que están a ángulos específicos entre sí —opuestos para complementaria, adyacentes para análoga, equiespaciados para triádica— se leen como intencionales y armoniosos porque el ojo reconoce el patrón. Por eso las paletas construidas con reglas de teoría del color se sienten cohesivas mientras que los colores elegidos al azar se sienten ruidosos. La armonía viene de la geometría, no de que los colores individuales sean atractivos por sí solos.

¿Cuál es la diferencia entre paletas complementarias y análogas?

La complementaria usa colores opuestos en la rueda (a 180°), produciendo alto contraste y energía —bueno para captar atención pero intenso si se abusa—. La análoga usa colores vecinos (dentro de unos 30°), produciendo una sensación calmada, cohesiva y de baja tensión —buena para diseños serenos y unificados—. Los esquemas complementarios necesitan usar su contraste con cuidado como acentos; los análogos son más indulgentes y difíciles de errar, lo que los hace un valor por defecto seguro común.

¿Cuántos colores debe tener una paleta?

Normalmente de tres a cinco para un diseño coherente: un color dominante, uno o dos secundarios y un acento. Más que eso se vuelve difícil de aplicar de forma consistente y tiende a verse caótico. La clásica regla 60-30-10 —60% dominante, 30% secundario, 10% acento— funciona mejor con una paleta pequeña. Es más fácil construir un diseño fuerte a partir de unos pocos colores bien elegidos que domar un conjunto grande para que parezca coordinado.

¿Cómo me aseguro de que mis colores sean accesibles?

Comprueba la ratio de contraste entre el texto y su fondo por separado de comprobar la armonía. WCAG exige al menos 4,5:1 para texto normal y 3:1 para texto grande. Las paletas armoniosas a menudo usan colores de luminosidad similar, lo que luce elegante pero puede dejar el texto ilegible, así que una paleta hermosa aún necesita una comprobación de contraste. Mantén tus colores de texto y de fondo lo bastante separados en luminosidad para superar la ratio, aunque eso signifique ajustar ligeramente la armonía.

¿Puedo construir un diseño entero a partir de un color base?

Sí, eso es exactamente para lo que sirven las reglas de armonía. Partir de un solo color base y derivar los demás mediante relaciones complementarias, análogas o triádicas te da una paleta completa y coordinada. Añadir tonos más claros y oscuros de cada uno para fondos, bordes y estados la redondea en un sistema de diseño completo. Construir desde un color base es más fiable que ensamblar colores de forma independiente, porque cada color del conjunto está anclado al mismo origen.