Derivar colores de apoyo a partir de un primario (armonía de color)

Aquí tienes un experimento de dos minutos. Toma un azul saturado —#2563eb, que es oklch(0.546 0.215 262.9)— y gira su tono media vuelta alrededor de la rueda hasta su complementario de manual, un naranja a ≈83°. Renderiza ese complementario con la luminosidad y el croma del propio azul (≈#AB5B00, recortado a lo que sRGB puede contener) y coloca los dos uno junto al otro como campos planos que comparten un borde nítido. Mira la frontera. Vibra. Cada color parece empujar contra el otro, y el borde entre ellos se niega a quedarse quieto. El efecto es el contraste simultáneo, y es lo primero sobre lo que las reglas clásicas de armonía no te advierten.

La armonía de color es la práctica de derivar colores de apoyo a partir de un primario mediante relaciones en la rueda de tonos: complementario, complementario dividido, análogo, triádico. Un generador de armonía de color aplica esas rotaciones a un color semilla de forma automática, pero uno pensado para la UI ajusta el manual dos veces: se desplaza alrededor del complementario en lugar de aterrizar sobre él, y baja la luminosidad y el croma de cada candidato por debajo de los del primario, de modo que el resultado apoya en vez de competir. Lo que sale son candidatos relacionados estructuralmente; que la paleta necesite alguno de ellos sigue siendo una decisión de diseño. Cómo los candidatos se convierten en rampas y roles se trata a lo largo de nuestra guía de escalas de color; este artículo trata de por qué funcionan las rotaciones en sí.

¿De dónde viene el vocabulario de la armonía?

Los nombres de los esquemas son vocabulario de la tradición pictórica, y conviene decirlo con claridad. Complementario: dos tonos opuestos entre sí en la rueda, separados 180°. Análogo: vecinos cercanos, normalmente dentro de 30–40°. Complementario dividido: un tono más los dos tonos que flanquean su complementario. Triádico: tres tonos separados 120° entre sí. El catálogo clásico de esquemas de color descansa sobre una premisa: el círculo de tonos es un mapa de parentesco, y los colores cuyas posiciones tienen una relación geométrica describible tienden a leerse como pertenecientes al mismo grupo.

Esa premisa se traslada bien a las interfaces. El resto de la tradición necesita traducción, porque una pintura y una UI usan el color de forma distinta. Un pintor mezcla, vela y media —un par complementario en un paisaje suele encontrarse a través de neutros y color quebrado, rara vez como dos campos planos a plena intensidad. Una interfaz hace exactamente lo que la pintura evita: rellenos sólidos, bordes nítidos, sin textura de por medio. Los esquemas nombran relaciones útiles; las intensidades con las que la pintura los despliega no sobreviven al salto al color plano.

¿Por qué los pares complementarios vibran en pantalla?

El titileo del experimento inicial tiene un mecanismo. El sistema visual codifica el color en parte a través de canales oponentes, y un campo intenso de color induce un matiz de su complementario en lo que tenga al lado: eso es el contraste simultáneo. Pon un color y su complementario real uno junto al otro a pleno croma y las dos inducciones chocan a lo largo del borde compartido, exagerando cada campo al otro. Si los dos colores además tienen una luminosidad parecida, el borde empeora: el ojo localiza los bordes en gran medida por la diferencia de luminancia, y una frontera de igual luminosidad entre dos complementarios vívidos le da muy poco a lo que aferrarse. El resultado es ese borde inestable y vibrante tan característico: célebre en el op art, poco grato en una barra de herramientas.

Nada de esto significa que los complementarios sean inservibles en la UI. Significa que el par de manual —a plena intensidad, en igualdad de condiciones, uno junto al otro— es la única configuración que se porta mal de forma fiable. La derivación práctica conserva el contraste de temperatura que ofrece un complementario y renuncia a la colisión frontal, en dos movimientos.

¿Por qué desplazarse alrededor del complementario en lugar de aterrizar sobre él?

El primer movimiento es angular. Desde el tono del azul semilla, 262,9°, el complementario exacto está en ≈83°. La propuesta Contraste de Scale Composer se coloca en +165° en lugar de +180°, aterrizando en ≈68°: un bronce cálido a quince grados del punto de colisión. Su propuesta Acero se aproxima por el lado opuesto en +210°, ≈30° más allá del complementario. Los dos candidatos del otro lado de la rueda encuadran el complementario sin tocarlo, lo que en el vocabulario clásico es terreno de complementario dividido. Conservas casi todo lo que ofrecía el complementario (un tono tan cálido como frío es el primario) mientras te apartas del eje donde los canales oponentes más se pelean.

¿Por qué los candidatos derivados también bajan la luminosidad y el croma?

El segundo movimiento tiene que ver con la intensidad, y se desprende de una observación simple: la rotación por sí sola produce un rival, no un apoyo. Un color de apoyo que iguala la viveza del primario compite con él: dos tonos con el mismo croma y una luminosidad parecida reclaman la misma atención, y la paleta adquiere dos primeras voces. Por eso la derivación práctica atenúa cada candidato. Medidas frente al croma de 0,215 del color semilla, las cuatro propuestas de abajo llegan a aproximadamente ≈0,05–0,08 —entre un cuarto y dos quintos del colorido del primario— y su luminosidad se aleja bastante del 0,546 del semilla en una dirección o en otra. La intuición que conviene retener: la rotación de tono decide dónde se sitúa un candidato; la bajada de luminosidad y croma decide con cuánta fuerza habla, y un color de apoyo habla en segundo lugar.

¿Qué aspecto tienen las cuatro propuestas a partir de un color semilla real?

Ejecuta la derivación sobre el azul semilla y la geometría se vuelve concreta:

La tabla se lee como una lección de armonía comprimida. Claro y Profundo son los movimientos análogos: vecinos cercanos, uno elevado hacia un lavado pálido, otro hundido hacia la tinta. Contraste y Acero son los movimientos de complementario dividido, que flanquean el complementario de ≈83° por ambos lados. Y cada fila lleva una fracción del croma del semilla: ningún candidato llega a una intensidad en la que pudiera confundirse con un segundo primario.

Abre en Scale Composer las cuatro propuestas derivadas de este azul —el semilla con sus cuatro candidatos uno junto al otro, con el desplazamiento de tono y la intensidad atenuada de cada uno visibles frente al original.

¿Qué puede decidir la armonía y qué no?

El límite honesto: la geometría garantiza que los candidatos estén relacionados con el primario, no que sean adecuados para el producto. Las relaciones en la rueda son un filtro contra el color arbitrario —un bronce derivado del azul de marca es de la familia de una forma que un coral de moodboard nunca lo será— pero no saben nada sobre si el producto tiene gráficos que necesitan tonos categóricos, superficies de marketing que quieren calidez, o ninguna de las dos cosas. Muchas interfaces hacen todo su trabajo con un solo tono más neutros y colores funcionales, y para ellas el número correcto de colores de apoyo es cero. Esa decisión queda fuera del alcance de la armonía.

Así que trata la salida de cualquier generador de armonía como una lista corta, no como una paleta. Abre las propuestas y quédate como mucho con una —descarta el resto, y conserva esa solo si ya puedes nombrar la superficie que va a ocupar. Un candidato que sobrevive a la curaduría con un trabajo asignado es la armonía haciendo su verdadera labor: reducir el espacio infinito de tonos a un puñado de opciones estructuralmente sólidas, y dejar la decisión donde corresponde.