Cómo usar una rueda de color para elegir colores

La primera vez que de verdad entendí la rueda de color no fue por un libro de texto. Estaba mirando dos azules que se veían casi idénticos en mi panel de muestras pero que se leían de forma completamente distinta en pantalla, y no sabía explicar por qué. La rueda es lo que finalmente lo hizo encajar: en cuanto dejas de verla como un póster en la pared de un aula y empiezas a verla como un mapa de decisiones, elegir colores deja de ser adivinar. Esta es la guía que ojalá hubiera tenido: cómo se construye realmente la rueda, qué controla cada parte de ella y cómo leer las armonías como ángulos a los que puedes rotar a propósito.

Qué es en realidad la rueda de color

Quita la decoración y una rueda de color no es más que el tono envuelto en un círculo. El tono es la parte de "qué color": rojo, naranja, el verde concreto de un semáforo. Como el espectro visible se enrolla sobre sí mismo (el rojo se desvanece en violeta, que se desvanece de vuelta hacia el rojo), tiene sentido doblarlo en un anillo en lugar de una línea. Así que el ángulo de la rueda es el tono, medido de 0° a 360°.

Esa sola idea es todo el truco. Cada regla de armonía de la que has oído hablar —complementaria, tríadica, análoga— no es más que una instrucción sobre ángulos. "Complementaria" significa "ve al lado opuesto". "Tríadica" significa "avanza un tercio de la vuelta, tres veces". En cuanto interiorizas que la rueda es un dial de 360° para el tono, las reglas con nombre se convierten en cosas que puedes hacer con las manos en lugar de términos que memorizas.

Primarios, secundarios, terciarios... y la trampa RYB

Aquí es donde la mayoría de las explicaciones te mienten en voz baja. La rueda clásica que pintaste en el cole es la rueda RYB: primarios rojo, amarillo, azul; secundarios (al mezclar dos primarios) naranja, verde, morado; terciarios (al mezclar un primario con su secundario vecino) los tonos intermedios como rojo-naranja o azul-verde. Ese modelo describe cómo se mezcla el pigmento físico. Es cómo se comporta la pintura, y es genuinamente útil ante un caballete.

Pero tu pantalla no mezcla pintura. Mezcla luz, y la luz es aditiva: los primarios son rojo, verde y azul, y los secundarios son cian, magenta y amarillo. Por eso una rueda de color digital —la que hay dentro de el generador de paletas de color y básicamente de toda herramienta de diseño moderna— se construye sobre geometría RGB/HSL, no RYB. La consecuencia práctica hace tropezar a la gente constantemente: en una rueda RYB el complementario del rojo es el verde, pero en la rueda RGB/HSL el complementario del rojo (0°) es el cian (180°). Ninguno está mal. Responden a preguntas distintas. Si estás eligiendo colores para una web, una app o cualquier cosa que brille, confía en la rueda digital: predice lo que harán los píxeles.

Saco esto a colación porque he visto a diseñadores pelear con sus herramientas, esperando la lógica de la pintura de una pantalla. Saber sobre qué rueda estás pisando ahorra mucha confusión.

Tono, saturación, luminosidad: leer la rueda en tres dimensiones

Un círculo plano solo te muestra el tono. El color real necesita dos dimensiones más, y la genialidad del modelo HSL es que las dispone sobre la misma rueda de un modo que puedes sentir.

• El tono es el ángulo. Según la especificación de CSS y MDN, el rojo se sitúa en 0deg, el amarillo en 60deg, el verde en 120deg, el cian en 180deg, el azul en 240deg y el magenta en 300deg. Rotar alrededor de la rueda cambia qué color tienes, nada más.
• La saturación es la distancia desde el centro. En el borde, el color está totalmente saturado y vívido. Arrastra hacia el centro y se drena hacia el gris. El centro exacto no tiene color en absoluto.
• La luminosidad suele ser un deslizador aparte (de arriba abajo, de negro a blanco), porque no puedes apilar un tercer eje en un círculo 2D. Algunas herramientas pliegan el valor dentro del radio en su lugar. Sea como sea, la luminosidad es lo que hace que hsl(210, 80%, 30%) sea un azul marino profundo y hsl(210, 80%, 85%) un cielo pálido: mismo tono, misma saturación, distinto brillo.

Cuando arrastras el punto en la rueda interactiva, te estás moviendo exactamente en estos términos: ángulo para el tono, radio para la saturación, deslizador para la luminosidad. Observa los valores HSL y RGB actualizarse a medida que avanzas: es la forma más rápida que conozco de construir intuición sobre por qué un color está haciendo lo que hace. Arrastra el punto hacia el centro y un naranja chillón se convierte en una terracota sofisticada sin que su tono cambie en absoluto. Ese movimiento —desatura, no recolorees el tono— arregla más paletas de aficionado que ningún otro ajuste por sí solo.

Leer cada armonía como un ángulo

Esta es la recompensa. Cada regla de armonía es una plantilla geométrica que haces girar encima de la rueda. Elige un tono base y la regla te dice dónde aterrizan los demás.

• Complementaria — a 180°. Una base, una al otro lado de la rueda. Máximo contraste, máxima energía. Estupenda para una llamada a la acción contra un fondo tranquilo; agotadora si dejas que ambos colores peleen a plena saturación a lo largo de toda una maqueta.
• Análoga — vecinos dentro de aproximadamente ±30°. Piensa en #1B6CA8, #1B9AA8, #1BA87E: azules deslizándose hacia el verde azulado. Baja tensión, muy natural (es la paleta de la mayoría de los atardeceres y los bosques). Elige uno para dominar para que no se lea como una papilla.
• Tríadica — tres tonos a 120°. Equilibrada y animada. La sensación clásica de rojo-amarillo-azul vive aquí, aunque en la rueda digital el trío se desplaza. Deja que uno lidere y los otros dos apoyen.
• Complementaria dividida — tu base, más los dos vecinos de su complementario en lugar del complementario mismo. Mantienes la fuerza del contraste pero suavizas la colisión frontal. Es mi opción por defecto cuando la complementaria se siente demasiado agresiva; escribí más sobre esa concesión en paletas complementarias divididas frente a tríadas.
• Tetrádica — dos parejas complementarias formando un rectángulo. Rica pero difícil de equilibrar; de verdad necesitas degradar tres de las cuatro a acentos.
• Cuadrada — cuatro tonos espaciados uniformemente a 90°. Como la tetrádica pero simétrica, así que es aún más exigente. Úsala con moderación.
• Monocromática — un solo tono, variado únicamente por saturación y luminosidad. Sin rotación alguna, solo movimiento a lo largo del radio y el deslizador. La opción más segura y cohesionada, y un gran punto de partida si una paleta se siente caótica.

Alterna entre estas reglas en el generador y observa cómo los puntos saltan a nuevas posiciones en la misma rueda. Ver moverse los ángulos vale más que cualquier cantidad de memorización.

Un método repetible que de verdad uso

Aquí está el flujo de trabajo, de principio a fin:

• Ancla primero. Elige un tono que tenga que estar ahí: un color de marca, una foto de producto, un ambiente. Arrastra el punto hasta él y anota el HSL.
• Elige la relación, no los colores. Decide cuánta tensión quieres. ¿Tranquila y unificada? Análoga o monocromática. ¿Necesitas un punto focal? Complementaria o complementaria dividida. Deja que el ángulo haga la elección.
• Controla con saturación y luminosidad, no con el tono. Una vez colocados los tonos, resístete a volver a rotarlos. Ajusta en su lugar el radio y el deslizador. La mayoría de las paletas "raras" están bien en el tono y mal en la saturación.
• Asigna roles. Nunca repartas los colores por igual. Un dominante, un secundario y un pequeño acento: la regla 60-30-10 es la forma más fácil de evitar que un color avasalle al resto.
• Comprueba el contraste antes de comprometerte. Una preciosa relación en la rueda no significa nada si el texto no se lee. Pasa tu pareja de texto y fondo por el verificador WCAG integrado; apunta al menos a 4,5:1 para el texto de cuerpo, según la guía de contraste del W3C. Profundizo en el porqué en los ratios de contraste WCAG explicados.

La rueda elige relaciones. La saturación, la luminosidad y la proporción convierten esas relaciones en algo utilizable. Si quieres profundizar en lo que estas combinaciones comunican realmente, entender la armonía de color en el diseño de interfaces retoma donde la geometría lo deja.

Los errores que más veo

Dos patrones, una y otra vez. Primero, plena saturación por todas partes: cada color al máximo en el borde. La rueda te entregará encantada una tríada perfecta, pero si las tres están al máximo, el resultado vibra. Arrastra la mayoría hacia dentro. Segundo, tratar las reglas con nombre como leyes. Son puntos de partida. Un ángulo "equivocado" que ajustaste 10° porque se veía mejor es mejor. La rueda es una herramienta para hacer primeros movimientos rápidos y defendibles, no un reglamento al que debas obediencia. Arrastra el punto, confía en tus ojos y deja que los valores te enseñen el vocabulario sobre la marcha.