Entender la armonía cromática en el diseño de interfaces

La mayoría de las interfaces "feas" que me han pedido arreglar no tienen un problema de color en el sentido que la gente supone. Los colores individuales están bien. Lo que falla es la relación entre ellos: los botones, los enlaces, los gráficos y las insignias se eligieron cada uno de forma aislada, y nada en la pantalla concuerda con nada más. Esa concordancia es lo que en realidad es la armonía cromática. No es un estado de ánimo ni una vibra; es un conjunto de relaciones angulares medibles en el círculo cromático, y en cuanto eres capaz de ver esas relaciones, puedes construir una paleta en diez minutos que de otro modo te llevaría una semana de retocar valores hex hasta que algo deja de parecer mal.

Esta es una guía práctica sobre la armonía cromática en el diseño de interfaces: cómo se construye cada esquema en el círculo, los códigos hex concretos a los que yo recurriría y los errores que veo (y he cometido) una y otra vez.

Qué es realmente la armonía cromática

La armonía cromática es el principio según el cual los colores relacionados por distancias geométricas fijas en el círculo cromático parecen intencionados juntos. El círculo son 360 grados de tono. Cada regla clásica de armonía —complementaria, análoga, tríada y las demás— no es más que una receta para elegir puntos alrededor de ese círculo con ángulos concretos. Eliges un tono base, aplicas el ángulo y obtienes colores que el ojo lee como pertenecientes a la misma familia en lugar de como un accidente.

La razón por la que esto importa en una interfaz, más que en un cuadro, es que una interfaz tiene trabajos para el color. No usas una paleta de forma decorativa: asignas roles. El modelo que utilizo en cada proyecto es dominante, secundario, acento:

• Dominante es tu columna vertebral: superficies, rellenos grandes, el color en el que el ojo aterriza más a menudo. A menudo es un casi neutro derivado de tu tono principal en lugar del primario saturado en sí.
• Secundario lo apoya: fondos de sección, botones secundarios, estados hover.
• Acento es el llamativo: el CTA principal, la pestaña activa, el punto de notificación. Debe ser escaso. Cuanto más escaso, mejor funciona.

Un reparto aproximado que llevo siempre en la cabeza es algo así como 60/30/10. La armonía te dice qué colores tienen permiso para estar en la sala; el reparto dominante/secundario/acento te dice cuánto usar de cada uno. Quien se salta la segunda mitad acaba con tres colores perfectamente armoniosos gritando todos al mismo volumen, lo cual es su propia clase de fealdad.

Si quieres saltarte la aritmética, el generador de paletas de color construye cada uno de estos esquemas a partir de un único código hex y te da los valores HSL y RGB, pero conviene entender la construcción para saber en qué resultado confiar.

Complementaria: dos colores, a 180 grados de distancia

Los pares complementarios están directamente opuestos en el círculo. Coges un tono base y le sumas 180 grados. El azul #2563EB frente al naranja #EA580C es el ejemplo de manual, y es de manual porque funciona: máximo contraste de tono, lo que hace que un acento prácticamente vibre contra su fondo.

Esa vibración es exactamente la razón por la que los esquemas complementarios son una trampa en una interfaz. Dos complementarios plenamente saturados colocados uno al lado del otro pelean. Pon texto rojo brillante sobre un fondo verde brillante y tus ojos no logran asentarse: el borde parece centellear. La solución es no usar nunca ambos a plena intensidad. Deja que uno sea la gran superficie dominante, muy desaturado u oscurecido, y reserva el complementario como un acento pequeño y saturado.

Así que en la práctica: el dominante es una superficie apagada de tinte azulado como #1E293B, el texto del cuerpo es casi blanco y el complementario solo aparece en el botón principal como #F97316. Eso es un esquema complementario, pero nunca lo describirías como "azul y naranja chocando" porque nunca les diste igual superficie. Stripe y Linear se apoyan en este tipo de acento único de alto contraste contra un campo tranquilo, casi monocromo.

Análoga: vecinos en el círculo

Los colores análogos quedan dentro de unos 30 grados entre sí —tres porciones adyacentes del círculo, como #0EA5E9, #0E7490, #0D9488 (de azul cielo, pasando por el cian, hasta el verde azulado)—. Como comparten el tono subyacente, son casi imposibles de afear. Todo el esquema parece un único color respirando.

Esa es su fuerza y su debilidad. Las paletas análogas son tranquilas, cohesionadas, con sensación premium: estupendas para productos con mucho contenido, paneles, cualquier cosa donde quieras que el cromado se difumine. El problema es el contraste: si todos los colores son primos, nada destaca, y tu llamada a la acción se ahoga. Mi maniobra estándar es construir la interfaz en análoga y luego tomar prestado un color del lado opuesto del círculo puramente para el acento. Ahora tienes la calma análoga más un único golpe complementario, que es, no por casualidad, la idea del complementario dividido que viene a continuación.

Tríada: tres colores, a 120 grados de distancia

Los esquemas en tríada usan tres tonos repartidos exactamente a 120 grados de distancia, formando un triángulo equilátero en el círculo. El clásico es rojo–amarillo–azul, pero una tríada más moderna y apta para interfaces es algo como #6366F1 (índigo), #10B981 (esmeralda), #F59E0B (ámbar).

La tríada es vibrante y equilibrada a la vez, lo que suena ideal hasta que intentas usar los tres colores por igual y produces algo que parece un juguete infantil. La disciplina que exige la tríada es una asignación de roles brutal. Elige uno de los tres como tu color de marca dominante, relega el segundo a un rol de apoyo/secundario y usa el tercero solo como un acento puntual. Muchas paletas de producto que nunca etiquetarías como "tríada" en realidad lo son: una marca índigo, un estado de éxito esmeralda y un estado de advertencia ámbar son una tríada haciendo un trabajo semántico. Es la armonía tríada escondida a plena vista, y es la forma más inteligente de usarla: deja que los tres colores se asignen a tres significados en lugar de a tres decoraciones.

Complementario dividido: el que más uso

El complementario dividido toma un color base, encuentra su complementario y luego usa los dos colores adyacentes a ese complementario en lugar del complementario en sí. Así que, en vez de azul frente a naranja puro, emparejarías el azul #2563EB con #F97316 y #EAB308, los dos tonos que flanquean al naranja.

Esta es mi recomendación por defecto para cualquiera que esté construyendo su primera paleta de interfaz seria. Obtienes casi todo el contraste de un esquema complementario —tu acento sigue resaltando contra la base dominante— pero la tensión es más suave, y obtienes gratis un segundo acento, lo cual es genuinamente útil: uno para las acciones principales, otro para los resaltes o el énfasis secundario. Es más indulgente que el complementario puro y más contenido que la tríada. Si solo aprendes una regla más allá de la complementaria, aprende esta.

Tetrádica y cuadrada: esquemas de cuatro colores para los valientes

La tetrádica (a veces llamada doble complementaria) usa dos pares complementarios: cuatro colores que forman un rectángulo en el círculo. La cuadrada es el caso especial en el que esos cuatro colores están repartidos de forma uniforme a intervalos de 90 grados.

Seré honesto: las armonías de cuatro colores rara vez son la respuesta correcta para una interfaz enfocada. Cuatro tonos de fuerza comparable es mucha señal compitiendo, y equilibrarlos es trabajo de verdad. Donde se ganan su sitio es en la visualización de datos —gráficos, etiquetas, paneles multicategoría— donde de verdad necesitas cuatro o más colores distinguibles, de igual peso, que aun así parezcan un conjunto. Para esos, un esquema cuadrado como #3B82F6, #22C55E, #EF4444, #A855F7 te da cuatro categorías claramente separables. Para el trabajo de marca y maquetación, trata la tetrádica como "elige dos de estos cuatro para usar de verdad y deja el resto en la reserva".

Monocromática: un tono, muchos trabajos

La monocromática no es realmente una relación del círculo: es un único tono expandido a una gama tonal completa variando la luminosidad y la saturación. Un azul se convierte en #EFF6FF, #BFDBFE, #3B82F6, #1D4ED8, #1E3A8A: fondos, bordes, rellenos, texto, todo a partir de un solo progenitor.

Todo sistema de diseño serio es monocromático en su núcleo, incluso cuando la marca usa varios tonos, porque necesitas una escala de 9 a 11 pasos por color para manejar superficies, hovers, estados deshabilitados y modo oscuro. La monocromática es infalible para la cohesión y peligrosamente fácil de dejar plana: si cada paso está demasiado cerca en luminosidad, la interfaz pierde jerarquía. Reparte tu escala ampliamente y comprueba que los pasos adyacentes son realmente distinguibles.

Los errores que aparecen una y otra vez

• Usar los tonos de la armonía a plena saturación en áreas grandes. La armonía elige los tonos; no te dice que los uses al 100%. Las superficies grandes casi siempre quieren una versión desaturada o teñida del tono armonioso, no el puro.
• Tratar la armonía como si fuera todo el trabajo. Una paleta armoniosa sin una proporción dominante/secundario/acento no es más que una discusión equilibrada donde todos gritan. Asigna roles y áreas.
• Olvidarse por completo de la accesibilidad. El círculo no dice nada sobre el contraste. Dos colores armoniosos pueden ser completamente ilegibles juntos. El texto del cuerpo necesita una ratio de contraste de 4,5:1 frente a su fondo (3:1 para el texto grande), y los componentes de interfaz y los gráficos necesitan al menos 3:1 frente a los colores adyacentes, según las pautas de contraste de la WCAG 2.1. La armonía y el contraste son problemas independientes: resuelve ambos.
• Dejar que lo "armonioso" prevalezca sobre lo "significativo". Tus estados de éxito, advertencia y error transmiten significado. El verde-para-adelante y el rojo-para-parar a veces rompen una regla de armonía, y no pasa nada. La comunicación le gana a la geometría siempre.

Si te quedas con una sola cosa: la armonía es la mitad fácil. El círculo te entregará colores que parecen relacionados en unos treinta segundos. El oficio es todo lo que viene después: decidir qué color es el dominante, con cuán poco acento puedes salir adelante y si alguien con baja visión puede leer de verdad el resultado. Empieza con el complementario dividido, mantén tu acento escaso, comprueba tus ratios de contraste y estarás por delante de la mayoría de las interfaces que se publican hoy.